New CSS3 selectors and how to use them

CSS3 gives incredible power for selecting elements within a page. You may not think this sounds very glitzy but trust me, it will make your life easier and you'll love CSS3 for it! I'd better qualify that bold claim.

CSS3 attribute selectors

You've probably used CSS attribute selectors to create rules. For example, consider the following rule:

img[alt] {
  border: 3px dashed #e15f5f;
}

This would target any image tags in the markup which have an alt attribute. Or, let's say we wanted to select all elements with a data-sausage attribute:

[data-sausage] {
  /* styles */
}

All you need is to specify the attribute in squared brackets.

Tip

The data-* type attribute was introduced in HTML5 to provide a place for custom data that can't be stored sensibly by any other existing mechanism. The specification description for these can be found at http://www.w3.org/TR/2010/WD-html5-20101019/elements.html.

You can also narrow things down by specifying what the attribute value is. For example, consider the following rule:

img[alt="sausages"] {
  /* Styles */
}

This would only target images which have an alt attribute of sausages. For example:

<img class="oscarMain" src="img/sausages.png" alt="sausages" />

So far, so 'big deal we could do that in CSS2'. What does CSS3 bring to the party?

CSS3 substring matching attribute selectors

CSS3 lets us select elements based upon the substring of their attribute selector. That sounds complicated. It isn't! The three options are whether the attribute is:

Beginning with the prefix
Contains an instance of
Ends with the suffix

Let's see what they look like.

The 'beginning with' substring matching attribute selector

Consider the following markup:

<img src="img/ace-film.jpg" alt="film-ace">
<img src="img/rubbish-film.jpg" alt="film-rubbish">

We can use the 'beginning with' substring matching attribute selector to select both of those images like this:

img[alt^="film"] {
    /* Styles */
}

The key character in all this is the ^ symbol (the symbol is called the caret, although it is often referred to as the 'hat' symbol too) which means "begins with". Because both alt tags begin with film our selector selects them.

The 'contains an instance of' substring matching attribute selector

The 'contains an instance of' substring matching attribute selector has the following syntax:

[attribute*="value"] {
  /* Styles */
}

Like all attribute selectors, you can combine them with a type selector (one that references the actual HTML element used) if needed, although personally I would only do that if I had to (in case you want to change the type of element used).

Let's try an example. Consider this markup:

<p data-ingredients="scones cream jam">Will I get selected?</p>
We can select that element like this:
[data-ingredients*="cream"] {
  color: red;
}

The key character in all this is the * symbol that in this context means "contains".

The 'begins with' selector would not have worked in with this markup as the string inside the attribute didn't begin with 'cream'. It did however contain 'cream' so the 'contains an instance of' substring attribute selector finds it.

The 'ends with' substring matching attribute selector

The "ends with" substring matching attribute selector has the following syntax:

[attribute$="value"] {
  /* Styles */
}

An example should help. Consider this markup:

<p data-ingredients="scones cream jam">Will I get selected?</p>
<p data-ingredients="toast jam butter">Will I get selected?</p>
<p data-ingredients="jam toast butter">Will I get selected?</p>

Suppose we only want to select the element with scones, cream, and jam in the data-ingredients attribute (the first element). We can't use the 'contains an instance of' (it will select all three) or 'begins with' (it will only select the last one) substring attribute selector. However, we can use the 'ends with' substring attribute selector.

[data-ingredients$="jam"] {
color: red;
}

The key character in all this is the $ (dollar) symbol which means "ends with".

Gotchas with attribute selection

There is a 'gotcha' with attribute selection that's it's important to grasp: attributes are seen as a single string. Consider this CSS rule:

[data-film^="film"] {
  color: red;
}

It might surprise you to know that it would not select this, even though one of the words inside the attribute begins with film:

<span data-film="awful moulin-rouge film">Moulin Rouge is dreadful</span>

That's because the data-film attribute here doesn't begin with film, in this case it begins with awful (and if you've seen Moulin Rouge you'll know that it begins awfully too—and never improves).

There are a couple of ways around this, in addition to the substring matching selectors we looked at a moment ago. You could use the whitespace separated selector (note the tilde symbol), which has support all the way back to Internet Explorer 7:

[data-film~="film"] {
  color: red;
}

You could select the entire attribute:

[data-film="awful moulin-rouge film"] {
  color: red;
}

Or, if you only wanted to select based upon the presence of a couple of strings inside an attribute, you could join a couple (or as many as were needed) of 'contains an instance of' substring attribute selectors:

[data-film*="awful"][data-film*="moulin-rouge"] {
  color: red;
}

There's no 'right' thing to do, it really just depends on the complexity of the string you are trying to select.

Attribute selectors allow you to select IDs and classes that start with numbers

Before HTML5, it wasn't valid markup to start IDs or class names with a number. HTML5 removes that restriction. When it comes to IDs, there are still some things to remember. There should be no spaces in the ID name and it must be unique on the page. For more information visit http://www.w3.org/html/wg/drafts/html/master/dom.html.

Now, although you can start ID and class values with numbers in HTML5, CSS still restricts you from using ID and class selectors that start with a number (http://www.w3.org/TR/CSS21/syndata.html).

Lucky for us, we can easily workaround this by using an attribute selector. For example, [id="10"].

Previous Chapter

Facilitating feature forks in CSS

Next Chapter

CSS3 structural pseudo-classes

Table of Contents for Responsive Web Design with HTML5 and CSS3 - Second Edition