CSS3 - HTML5 Mastery: Semantics, Standards, and Styling - page 253

Example.com links </a>
<a href="http://example.com" rel="bookmark"> Example.com
homepage </a>
As you can see, the possibilities are virtually endless in regard to the selectors you
can construct!

Using selectors effectively

As you saw in the simple selector section earlier, selectors can be generalized to all ele-
ments, for example:
:only-child { color:blue; } /* match any element that is
the only element contained in its parent element */
::first-letter { font-size:2em; } /* match the first

letter of all elements' content */
Depending on the selector, generalizing in this way can become unwieldy because
the styles applied may become attached to elements with vastly different purposes and
meanings. You will likely see ID selectors generalized in this way, such as in the code
snippet #item {} . However, this is commonly done because ID selectors will always
pick out only one element and so will never generalize out to other elements on the page.

Note Some professional CSS developers advocate using class selectors in favor of
ID selectors. The reason for this essentially boils down to flexibility. ID selectors can
be used on only one element on the page, ever. Class selectors can be applied to one
element by choice, effectively making them equivalent to ID selectors. However, they
can be applied to multiple elements as well, which is an added benefit, if down the road
you realize that a particular style rule needs to be applied more than once.

Having said that, going in the other direction and getting too specific with a chain of
selectors should be avoided as well. This is termed a selector's specificity . And it's a bad
thing if a selector's specificity gets too focused. Avoid CSS rules like the following:
article section#one ul li.item::first-letter { color:blue;
}

Although this will work fine in the situation it's used in, it is brittle. Changes to the
HTML could easily cause this rule to no longer be applied, which also means this se-
lector can't be easily moved to another context. By assigning a class to the unordered
list (instead of the list item) and picking out the list item by type, the selector could be
shortened to the following:
ul.toc li::first-letter { color:blue; }