Specificity and the Cascade - Pro CSS Techniques - page 31

the child selector is much more particular about its lineage:
div > h3 {...}
and will only target h3 s that are children (the first descendant of their parent), like so:
<div>
<h3>Heading</h3>
</div>
Siblings
The adjacent sibling selector type works similarly to the child selector, but instead of targeting
a direct descendant, it allows you to style elements that are next to each other in the document
flow and that share the same parent element by joining two simple selectors with a plus sign ( + ).
This type comes in quite handy when, for example, you need to give the first p immedi-
ately following an h2 a smaller margin than all other paragraphs:
<h2>Heading</h2>
<p>some text</p>
<p>some more text</p>
Without the adjacent sibling selector, you would have to assign a class or ID to the first para-
graph, but thankfully this selector does the job for us:
h2 + p { margin-top: .25em; }
Pseudo-Class Selectors
Although both Chapter 2 and Appendix A contain details on pseudo-classes, there's one aspect
worth mentioning here that deals with specificity—ordering link rules within your style sheet.
Link and Dynamic Pseudo-Classes: A LoVe/HAte Relationship
Styling links is fairly straightforward, but it's helpful to know the correct order to place the var-
ious pseudo-classes within your style sheet in order to see the correct behavior in the browser.
The correct order is :link , :visited , :hover , and :active (or LoVe/HAte), like so:
a:link {
color:blue;
}
a:visited {
color:purple;
}
a:hover {
background-color:black;color:white;text-decoration:none;
}
a:active {
background-color:red;color:white;text-decoration:none;
}