HTML5: Your visual blueprint™ for designing rich web pages and applications

SELECT AN HTML ELEMENT BY ITS SIBLING ELEMENT

There is a new general sibling combinator in CSS3 that allows you to select an element when followed by a previous sibling element:

element1 ~ element2 { ... }

This will select element2 whenever it comes after element1 but only when element1 and element2 share the same parent. For example, if you have an article that begins with a heading, followed by a figure, several paragraphs and more figures, but you want the leading figure to be styled differently than the other figures, you can do something like this:

h1 ~ figure {style1 }p ~ figure {style2 }

Do not confuse the general sibling combinator with the child and adjacent sibling combinators introduced in CSS2:

element1 > element2 { ... }element1 ...