SELECTORS - CSS: Professional Techniques for Modern Layout - page 63

Figure 2-19: Inherited styles being overridden by directly assigned styles.

h is problem doesn't come up if you use non-inherited properties like background ,
border , display , margin , padding , and so on. If you aren't clear about whether a given
property is inherited, see w3.org/TR/CSS2/propidx.html or the property's description
in the CSS specii cation.

SIBLING SELECTION
In addition to being able to select along parent-child and ancestor-descendant lines, it's also
possible to select elements based on their being siblings—that is, that they share a common
parent element. We can see this in Figure 2-20, where the elements that are siblings are
highlighted.

65

body

h1 p ul p p p

li li li li li em a cite

a

a
Figure 2-20: Highlighted siblings.

a a a a

h ings like list items are obvious siblings, but any collection of elements that share a common
parent element are siblings.

CSS dei nes a combinator that allows you to select an element based on its previous sibling
element. For example, if you wanted to remove the top margin from any paragraph that
immediately follows an h1 (see Figure 2-21), then it's a simple matter of saying:

h2 { margin-bottom : 0 ;}
h2 + p { margin-top : 0 ;}