Discover the power of CSS3 selectors

This article explains how to keep your markup slim and target elements in the DOM without resorting to extra presentational markup or JavaScript by using CSS3 selectors.

To style an element with CSS, we need to be able to target it. Enter CSS selectors, which enable us to target elements at a more granular level without adding presentational markup or attributes.
This means your markup can be super slim, semantic and flexible. There isn’t space to cover all the CSS3 selectors here so we’ll concentrate on attribute and substring selectors followed by structural and negation pseudo-classes.
With a range of selectors available, it can be difficult to know which type of selector to use. As the new CSS3 selectors are introduced, we’ll provide real-world use cases for them to use in your projects right away.

Attribute and substring selectors

CSS3 has extended the list of attribute selectors we can use by adding three new substring selectors to our toolkit. This means we can now target a rule and apply CSS styling to an element based on part of an attribute’s value. We’ll briefly describe each below.

“Starts with” substring selector

The caret (^) operator, when related to the substring selector, means “starts with”. For example, this could be used to target all external links in our content by adding a small icon indicating an external link. In the following example, we’ll add a background image and padding to all links that start with http:// by using the ^ “starts with” attribute substring selector as below:

1. a[href^="http://"] {
2.    background:url(img/external.png) 100% 50% no-repeat;
3.    padding-right:15px;
4. }

That’s great but occasionally there will be internal links that begin with http://. In that case you don’t want the icon to appear. We can work around this exception by adding another rule beneath our initial one (they have the same specificity) to nullify the properties set for external links. The ^ operator is retained because the link(s) may be going to various pages within the site.

1. a[href^="http://"] {
2.    background:url(img/external.png) 100% 50% no-repeat;
3.    padding-right:15px;
4. }
5. a[href^="http://mysite.com"], a[href^="http://www.mysite.com"] {
6.    background:none;
7.    padding-right:0;
8. }

Another use case for the ^ operator might be to target links starting with the
mailto: string and add an icon such as a mail icon:

1. a[href^="mailto:"] {
2.    background:url(img/email.png) 100% 50% no-repeat;
3.    padding-right:15px;
4. }

The :last-child pseudo-selector, “starts with” (^) substring selector and first-of-type pseudo-class combined with first-letter in action

“Ends with” substring selector

We’ve dealt with “starts with”, now we’ll look at “ends with”. The operator for this is the dollar symbol, $.
The syntax is exactly the same as the “starts with” syntax and common use cases include adding icons to represent different files types for document downloads or to indicate different feed types. To indicate that a link goes to a PDF document, we can use:

1. a[href$=".pdf"] {
2.    background:url(img/pdf.png) 100% 50% no-repeat;
3.    padding-right:18px;
4. }

This method can be used to target any file type, such as .doc, .jpg, .atom or .xml.

This example uses “ends with” ($) and “contains” (*) substring selectors

"Contains" substring selector

The final substring selector uses the star or asterisk (*) operator, which stands for “contains”. This is powerful when we wish to target elements that have more than one class applied. It can also be used to target specific domains within an anchor. We’ll use it in the following example to highlight those anchors linking to a person’s Twitter account:

1. a[href*="twitter"] {
2.    background:url(img/twitter.png) 100% 50% no-repeat;
3.    padding-right:20px;
4. }

The same effect could have been achieved using the ^ operator and the value http://twitter.com, but using the (*) operator helps us save a few bytes. The real power of the * substring selector, however, comes when we need to style one of the Twitter links differently based on its Twitter handle (eg http://twitter.com/chrisdavidmills). To clarify, all the links contain twitter as in the above example, but only one contains chrisdavidmills:

1. a[href*="chrisdavidmills"] {
2.    background:url(img/twitter.png) 100% 50% no-repeat;
3.    padding-right:20px;
4.    color:#ff0;
5. }

We could also use the * operator to apply different styling to links pointing to the pages of people we've indicated as friends, family members and others using the XFN microformat, selected via their rel attribute values. For example, to indicate that Chris Mills is our friend, our markup would be:

1. <a href="http://twitter.com/chrisdavidmills" rel="met friend">Chris Mills</a>

Because there are two values for the rel attribute, it becomes difficult to target using the ^ or $ operator, so * (contains) becomes an option, as does the CSS 2.1 tilde (~), which targets a whitespace-separated list of words, one of which equals the value. Here we’ll use the new CSS3 substring selector *:

1. a[rel*="friend"] {
2.    background:url(img/friend.png) 100% 50% no-repeat;
3.    padding-right:20px;
4. }

This causes a problem though: our Twitter icon for Chris has been overwritten by the XFN icon, because both the style rules have the same specificity and the a[rel*="friend"] {...} rule appears further down our style sheet. We can get around this by adding some additional padding to our friend rule and using multiple background images to add both icons placed in different positions:

1. a[rel*="friend"] {
2.    background:
3.     url(img/friend.png) 100% 50% no-repeat,
4.     url(img/twitter.png) 85% 50% no-repeat;
5.    padding-right:40px;
6. }

Structural pseudo-classes

Structural pseudo-classes let us style elements and parts of elements that are in the DOM but can’t be targeted with other selectors. They keep your markup clean and efficient, replacing the addition of extraneous classes in your markup, either those in the source code or those added dynamically using JavaScript.

:last-child

This is for targeting the last child of another element. We can use it to remove the border from the last item in a list, for example:

1. nav li:last-child {
2.    border-right:0;
3. }

The :first-child pseudo-class was introduced in CSS 2.1 and works in the same
way as :last-child except it targets the first matched child of another element.

:nth-child

The :nth-child pseudo-class lets us target one or more specific children of a given parent element. It can take the form of a number (integer), keywords (odd or even) or a calculation (expression). It can come in handy when you want to style data tables or complex lists (see issue 216, page 78). We’ll start by showing the keyword value even to add a background colour to create a zebra-striping effect on alternate table rows to improve readability that might traditionally be achieved server-side, using JavaScript or by adding classes to your markup:

1. tr:nth-child(even) td {
2.    background-color:#eee;
3. }

We could achieve the same effect as the previous example using the expression ‘2n’ or ‘2n+0’, which means “style every second row”:

1. tr:nth-child(2n) td {
2.    background-color:#eee;
3. }

If we wanted to reverse the row colouring and have the background colour applied to the odd rows, we could use either the odd keyword or the expression ‘2n+1’, which means ‘every second row starting from the first’. The examples below have exactly the same effect:

1. tr:nth-child(odd) td {
2.    background-color:#eee;
3. }
4. tr:nth-child(2n+1) td {
5.    background-color:#eee;
6. }

Following so far? Good. Using expressions similar to those we’ve seen before, let’s assume we want to target every fourth line of the table. Simply use:

1. tr:nth-child(4n) td {
2.    background-color:#eee;
3. }

How about every fourth item starting from the second row?

1. tr:nth-child(4n+2) td {
2.    background-color:#eee;
3. }

We can see a pattern emerging. Now let’s deal with that smart kid in class who wants to count backwards. Imagine we want to style the first five rows in the table. This is achieved using a negative value for ‘n’:

1. tr:nth-child(-n+5) td {
2.    background-color:#eee;
3. }

Zebra striping using the nth-child structural pseudo-class with ‘even’ argument on the left and using the ‘4n+2’ expression on the right

:nth-last-child

The :nth-last-child pseudo-class is essentially the same as :nth-child but it starts counting from the last element. Using the same expression as the previous example we can highlight the last five rows in the table:

1. tr:nth-last-child(-n+5) td {
2.    background-color:#eee;
3. }

Also just like :nth-child, :nth-last-child accepts the ‘odd’ and ‘even’ arguments and doesn’t have to use a negative value for ‘n’.

:only-child

We have one more ‘child’ pseudo-class to look at. :only-child works by targeting any elements when they are the only child of its parent. This might come in useful if we have a dynamically generated list that only contains only one item, in which case the margins should be decreased:

1. ul li:only-child {
2.    margin-bottom:2em;
3. }

:first-of-type

The ‘type’ pseudo-classes tend to work in the same way as the ‘child’ classes, the key difference being that the ‘type’ pseudo-class only targets those elements that are the same as the element the selector is applied to. They’re useful when we can’t guarantee there won’t be any other child elements in place. Eg, if an hr is placed between each paragraph, by using :first-of-type, we can ensure we target only the paragraphs. Consider an intro paragraph contained within a section (<section id="introduction">). Using :first-of-type, we can style the first paragraph within the section, like so:

1. #introduction p:first-of-type {
2.    font-size:18px;
3.    font-weight:bold;
4. }

For some extra coolness, we can combine :first-of-type with the ::first-letter pseudo-element from CSS 1 (yes, 1) to style the first letter of the first paragraph in the introduction. Note that CSS3 introduced a new double-colon (::) syntax for pseudo-elements to distinguish between them and pseudo-classes such as :hover. We’ve used the double-colon syntax in the example below although using it for client work can be a bad idea because of backwards compatibility:

1. #introduction p:first-of-type::first-letter {
2.    font-size:60px;
3.    float:left; width:auto;
4.    height:50px;
5.    line-height:1;
6.    margin-right:5px;
7. }

:last-of-type

Using :last-of-type, we can achieve the same effect as :last-child. To remove the right-hand border from the last menu item, we can use:

1. nav li:last-of-type {
2.    border-right:0;
3. }

:nth-of-type

:nth-of-type works in the same way as :nth-child and uses the same
syntax. However, it can be more useful than :nth-child should there be elements in between those being targeted. The following example has a section with a heading, followed by a list containing images of animals in space:

1. <section id="animals">
2. <h1>Animals in Space</h1>
3. <ul>
4.  <li><img src="img/fly.png" alt="Fruit Flies" /></li>
5.  <li><img src="img/albert.png" alt="Albert II" /></li>
6.  <li><img src="img/mouse.png" alt="Mouse" /></li>
7.  <li><img src="img/tsygan.png" alt="Tsygan" /></li> <li><img src="img/laika.png" alt="Laika" /></li>
8.  [...]
9. </ul>
10. </section>

Now we’ll remove the bullet points created by the list, declare a width, float each of the list and add some margins:

1. #animals ul {
2.    list-style-type:none;
3.    width:670px;
4. }
5. #animals li {
6.    float:left;
7.    width:200px;
8.    text-align:center;
9.    margin-right:35px;
10.    margin-bottom:35px;
11. }

Imagine the margins have caused the third list item to drop onto a new row but our design dictates there should be three images per row. This provides the perfect use case for :nth-of-type to target every third list item (3n) and remove the right-hand margin to ensure they don’t drop onto a new line:

1. #animals li:nth-of-type(3n) {
2.    margin-right:0;
3. }

As with :nth-child, we can also use expressions (2n+1) or keywords (odd or even) to target certain elements. :nth-of-type can also be used to target the first item in a group using the expression li:nth-of-type(1) {...}, which has the same effect as using :first-of-type.

On the left, the basic styling of the list of animals in space, on the right is the same list styled using the nth-of-type and last-of-type structural pseudo-classes

:nth-last-of-type

Using :nth-last-of-type(1) {...} is the same as using :last-of-type but, combined with expressions, it lets us count backwards starting from the last item, like :nth-last-child. Using our nth-of-type example, we’ll move the last lonely animal from our list of 10 to the centre by adding a large left margin:

1. #animals li:nth-last-of-type(1) {
2.    margin-left:235px;
3. }

:only-of-type

:only-of-type targets elements whose parent elements have no other children of the same type. Imagine we have an article that can contain several images but if only one image is included, we may want it to be full width. This is where :only-of-type comes into its own:

1. article img:only-of-type {
2.    width:100%;
3. }

:empty

:empty can be an extremely useful pseudo-class. It represents an element with no content. Assume we’ve got a dynamically generated aside in our page: we use :empty to hide it if it has no content.

1. aside:empty {
2.    display:none;
3. }

Before we start jumping for joy, a word of warning: if a browser finds a single character, or even whitespace, the element will be rendered because it no longer correctly matches the :empty selector. It’s fine to add HTML comments to the markup, but ensure there’s no whitespace.

:not()

In many ways the negation pseudo-class :not() works in reverse to other selectors because it enables us to target elements that don’t match the selector’s argument. Strange, we know, but it’s very practical. A prime example would to be style all form inputs that are not submit buttons:

1. input:not([type="submit"]) {
2.    width:250px;
3.    border:1px solid #333;
4. }

This saves us from having to add an extraneous class to a submit button simply for styling purposes. Or looking from the other way, it saves having to add a class to every other input. That markup is looking leaner already, right?
We can also use the negation pseudo-class during testing to catch those things that validation won’t. For example, let’s say we want to see all abbreviations that don’t have a title attribute specified. Just use:

1. abbr:not([title]) {
2.    outline:2px dotted red;
3. }

The same technique can be used to highlight images that don’t have an alt attribute specified:

img:not([alt]) {
   outline:2px dotted red;
}

This is a technique Eric Meyer uses in his diagnostic CSS (meyerweb.com/eric/ tools/css/diagnostics/). Add the diagnostic file when testing to catch all these errors, fix them and remove the file when you’re ready to deploy to the site.

Browser support

So how does this all work in browsers in the real world? Well, CSS3 selectors are fully supported in IE9+, Firefox 3.5+, Chrome 4+, Safari 4+, and Opera 10+ (with three minor exceptions). Support in IE6, IE7 & and IE8 is virtually non-existent (IE7 & and IE8 support the general sibling combinator and all the attribute selectors), but we can get around this by polyfilling with native JavaScript or a jQuery library.

CSS3 Selector compatibility tables found at http://www.findmebyip.com

One useful polyfill we can use is Selectivzr by Keith Clark. Alternatively, if we decide that some of these sprinkles are only added as enhancements and aren’t crucial for the site’s functionality, then it’s fine for them not to show in less capable browsers. The choice is yours.

Selectivzr is a JavaScript polyfill to emulate CSS3 selectors in Internet Explorer by Keith Clark – find out more at selectivizr.com

One caveat with IE before v9 is that, when it’s grouping selectors and comes across a selector it doesn’t understand, it ignores the whole rule. So if we have:

1. ul li:nth-child(3n), ul li.last {
2.  margin-right: 0;
3. }

IE will not recognise the rule. Consequently, we’ll need to split them into their own rules, like so:

1. ul li:nth-child(3n) {
2.   margin-right: 0;
3. }
4. ul li.last {
5.   margin-right: 0;
6. }

Summary

We’ve learned that by using powerful CSS3 selectors, we don’t need to add unnecessary classes and IDs to our markup, ensuring we can truly separate our content and presentation from one another. We’ve seen how to target the first, last, odd or even items in a group. We’ve also learned how to target groups of elements using expressions and those on their own.
We’ve seen how to use negative pseudo-classes to help with testing and diagnostics. But there are many more CSS3 selectors we haven’t had time to cover. These include UI element states pseudo-classes, the general sibling combinator, :target (which deserves an article of its own), the new double-colon syntax of ::before and ::after and many more.
Check out the Selectors Level 3 W3C Proposed Recommendation, which can be found at www.w3.org/TR/css3-selectors.