Coming into second part of Power CSS3 selectors, we will learn here about Descendant, Adjacent, Child, Sibling Combinators and Selectors that make our styling task lots easier.
You should have a look at the first part of CSS3 selectors if you already haven’t read it yet.
Power CSS3 – Descendant, Adjacent, Child, Sibling Combinators and Selectors
1. X Y (Descendant Combinator)
The most used descendant selector or, more accurately, the descendant combinator let you combine two or more selectors so you can be more specific in your selection method. For example:
- Only anchor tags inside list should have a common style.
- All
litags inside a specific class should have a specific style. - Rather than targeting all
spantags, you only need to target thespanthat are insidethumbclass.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | li a { text-decoration: none; color: #66c4fa; } .thumb li { width: 200px; height: 150px; float: left; } .thumb span { font-size: 16px; text-decoration: underline; } <!-- HTML --> <ul class="thumb"> <li><span>Topic</span><br /><a href="#">link</a></li> <li><span>Topic</span><br /><a href="#">link</a></li> <li><span>Topic</span><br /><a href="#">link</a></li> </ul> |
A quick note: Don’t apply much weight on selectors whenever you not need, so get rid of selectors looking like
ul.thumb li a img.round-imgorP Q R M N.my-class.
View Demo | Compatible with: IE6+, Firefox, Chrome, Safari, Opera
2. X + Y (Adjacent Combinator)
An adjacent sibling combinator uses the plus symbol (+). It will select only the element that is immediately preceded by the former element means the targeted element must be an immediate sibling. This CSS code below will make all first paragraph after each h2 tag to appear in green:
1 2 3 | h2 + p { color: green; } |
View Demo | Compatible with: IE7+, Firefox, Chrome, Safari, Opera
3. X > Y (Child Combinator)
1 2 3 | div#container > ul { border: 1px solid black; } |
The difference between the descendant combinator X Y and child combinator X > Y is that the latter will only select direct children. For example, consider the following markup.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <div id="container"> <ul> <li> List Item <ul> <li> Child </li> </ul> </li> <li> List Item </li> <li> List Item </li> </ul> <ul> <li> List Item</li> <li> List Item </li> <li> List Item </li> </ul> </div> |
A selector of #container > ul will only target the two uls which are direct children of the div with an id of container. It will not target, for instance, the ul that is a child of the first li.
This selector can come in handy when styling nested lists and recommended when working with JavaScript-based CSS selector engines .
View Demo | Compatible with: IE7+, Firefox, Chrome, Safari, Opera
4. X ~ Y (Sibling Combinator)
This sibling combinator is a generalization of adjacent combinator and is less strict. It will select all the later elements as long as they follow the former selector.
1 2 3 4 5 6 7 8 9 10 11 | h3 ~ p { color: orange; } <!-- HTML --> <h3> A title</h3> <p>Paragraph example.</p> <p>Paragraph example.</p> <div><p>Paragraph example.</p></div> <p>Paragraph example.</p> |
In the example the style will be applicable to all the paragraph except the one who is wrapped inside a div.
View Demo | Compatible with: IE7+, Firefox, Chrome, Safari, Opera
So it’s second part in this series where you have learned about the power of Descendant, Adjacent, Child, Sibling Combinators and Selectors.
Let’s continue with attribute selectors followed by pseudo-class and pseudo-element.