Chapter 3: Selectors
49
of elements between the ancestor and descendant does not matter. As a result, the following selector will match all elements inside the document body: body * {}
E>F (Child Combinator) The child selector describes an element (F) that is the child (or direct descendant) of another element (E). ul > li { font-family: san-serif; } ol > li { font-family: monospace; }
Here, list items that are direct children of an unordered list tag will be in a sans-serif font, and those that are direct children of an ordered list will be ďŹ xed-width.
E+F (Adjacent Sibling Combinator) The adjacent sibling combinatory matches elements (F) that come directly after other elements (E) and share the same parent element. h1 + p { font-size: 1.2em }
This example will select all paragraphs that come directly after an <h1> tag and apply an increased font size.
E~F (General Sibling Combinator) With this selector, the element (F) is selected if it appears at some point after its sibling element (E).