HTML and CSS Reference
In-Depth Information
Pseudo-element selectors
target elements that don't specifically exist in the document but are
implied by its structure, such as the first line of a paragraph or the element immediately before
another element.
Child selectors
select an element that is an immediate child of another element and not its other
descendants.
Adjacent sibling selectors
target elements that are immediate siblings of another element, sharing
the same parent in the document.
These CSS 2.1 selectors are well supported by the current generation of graphical browsers, a few
stragglers notwithstanding. CSS 3 brings even more exciting and elaborate selectors to the table, including
a bundle of new pseudo-classes and structural pseudo-elements. Browser support for some of the latest,
cutting-edge selectors from CSS 3 isn't quite as far along, so such advanced features should be used with
care and extensive cross-browser testing.
You'll get to see a few advanced selectors in action later in this topic, but the basic selectors (universal,
element, class, pseudo-class, ID, and descendant) will serve you well.
Specificity and the Cascade
As we mentioned earlier, each type of selector is assigned a certain level of
specificity
, measuring how
many possible HTML elements that selector might influence. Examine these two CSS rules, one with an
element selector and the other with a class selector:
h2 { color: red; }
.title { color: blue; }
and this snippet of HTML, an
h2
element classified as a title:
<h2 class="title">Specificity and the Cascade</h2>
The first rule selects all
h2
elements, and the second rule selects all elements belonging to the “title” class.
But the element shown fits both criteria, causing a conflict between the two CSS rules. A browser must
choose one of the two rules to follow before it can determine the heading's final color. In CSS, a more
specific selector trumps a less specific selector. Because a class selector is more specific than an element
selector, the second rule has greater specificity, and the heading is rendered in blue.
Modern web browsers follow a complex formula to calculate a selector's specificity, which can be rather
confusing to noncomputers like us. Thankfully, you'll rarely need to calculate a selector's numeric
specificity value if you just remember these few rules:
A universal selector isn't specific at all.
An element selector is more specific than a universal selector.
A class or pseudo-class selector is more specific than an element selector.
An ID selector is more specific than a class or pseudo-class.
Properties in an inline
style
attribute are most specific of all.
