CSS Selector Combinators | CSS: Presentation Layer
Standards Based Development
When a selector contains more than one simple selector, a selector combinator must be included between the selectors. There are four selector combinators that when used, change the nature of the selector:
Descendant Selector
Descendant selectors express the relationship describing an element that is the descendant element in the document tree. A descendant combinator is whitespace that separates two sequences of simple selectors. The code below shows descendant combinators in action:
h1 em{}
div * p{}
div p *[href]{}
Strong: in the second example above, note the whitespace on either side of the universal selector is not part of the universal selector, the whitespace is a combinator indicating that the div must be the ancestor of some element, and that that element must be an ancestor of the p.
Child Combinator Selector
Child combinator selector describes a childhood relationship between two elements and is the greater-than-sign in css syntax. Child combinator matches all elements that are the immediate children of a specified element.
a > b{}
The css declaration shows a child combinator that matches all b elements that are the immediate children of a a element.
Adjacent Sibling Combinator
Adjacent sibling combinator matches all elements that are adjacent siblings of a specified element. Adjacent means immediately following; sibling elements must have the same parent element and there cannot be any elements between the sibling elements. Consider the following markup and styles:
css
h1+p{}
html
<h1>Header</h1>
<p>The adjacent sibling combinator declared above matches this paragraph</p>
<p>The adjacent sibling combinator declared above does not match this paragraph</p>
General Sibling Combinator
General sibling combinator was introduced in css3 and is represented by the tilde (~) character, separating two sequences of simple selectors. The elements do not have to be adjacent siblings, but they do have to have the same parent element.
css
h1~p{}
html
<h1>Header</h1>
<p>The general sibling combinator declared above matches this paragraph</p>
<div>
<p>The general sibling combinator declared above does not match this paragraph</p></div>