The new CSS3 selectors

The new CSS3 selectors

CSS3 specifications introduce new selectors. The selectors module is finished, so the W3C has proposed Recommendation dated September 29, 2011. This is the URL: http://www.w3.org/TR/css3-selectors/

The general switch adjacent elements

The CSS2 we proposed the adjacent selector, allowing the selection element located below sibling of another element. Example Syntax: h1 + h2 {...}. Thus it was only possible to apply a specific style to follow the first h2 h1.

With CSS3, the adjacent element need not be necessarily immediately after the first element, there may be other elements between them, and the style will apply to the following items have been specified.

This is the syntax: h1 ~ h2 {...}.

Example selector:

h1 ~ h2 {font-style: italic};

Code sample:

<h1> Tag Level 1 </ h1>

<p> My main text between p tags ... </ p>

Label <h2> level 2 </ h2>

Another label <h2> Level 2 </ h2>

And the result:

As we can see, the emphasis has been applied to the text of the two elements that are <h2> the <h1> then, even if we have an element in the middle <p>.