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

Sibling selection is a great way to set up styles for certain element combinations, such as
increasing the space between a list that immediately follows a table or a heading that immedi-
ately follows a div .
h ere's a closely related combinator that allows the selection of elements that are following
siblings, but not immediately adjacent following siblings. h is uses the tilde as a combinator,
like so:
h1 ~ ul { list-style-type : lower-alpha ;}
66
Figure 2-21: Selecting paragraphs that immediately follow level-two headings.
h e following code will select any ul element that follows an h1 that shares its parent
element, such as all the lists in the following markup except the i rst one.
< body >
< ul > … </ ul >
< h1 > Planning </ h1 >
< p > This is an abstract. </ p >
< ul > … </ ul >
< ul > … </ ul >
< h2 > Introduction </ h2 >
< p > We have some thoughts here. </ p >
< ul > … </ ul >
</ body >
Because all those elements share the same parent (the body ), they're all siblings. h e i rst list
in the markup does not follow an h1 , so it is not selected by h1 ~ ul . h e rest do, even
though there are other elements “between” them, so they are selected.