CSS3 Attribute Selectors: Substring Matching

Three of the attribute selectors in the CSS3 spec allow you to check the value the specified attribute for a string match. These attribute selectors are referred to as substring matching attribute selectors.

These can open endless possibilities, so I think it’s useful to have them in mind. And as a bonus, these selectors have strong support as far back as IE7, so pending thorough tests I think they are quite safe to use in many current projects.

Here’s a brief outline of each one, with some examples.

“Begins With” Attribute Selector

The first of these three attribute selectors lets you target an element in your CSS based on whether the attribute’s value begins with a given string. Here it is:

a[href^="http://"] {
  color: green;
}

This one uses the caret (^) character to tell the browser: “If this link has an href attribute that starts with http://, make it green.” Now, this specific example looks like an easy way to target external links.

But be careful, because if your CMS is adding your site’s URL to the beginning of certain links (like WordPress does), or if you’ve built your site with a “path” variable prepended to all links, then this would target all links that begin with “http://”, regardless of whether they are external or not. So this example might work only in specific circumstances.

To combat this, you might try:

a[href^="http://"] {
  color: green;
}

a[href^="http://www.domain.com"], a[href^="http://domain.com"] {
  color: blue;
}

But even this is not perfect, because it doesn’t target “https”. So testing is crucial. Nonetheless, this clearly illustrates what this attribute selector does, so you can use it where you think it fits.

Another important note: Don’t confuse this one with what’s been commonly referred to as the “language” attribute selector, which uses the vertical pipe character (|). That attribute selector will only match the specified string if it is at the start of the value and if it precedes a hyphen. This one is commonly used for matching values in the hreflang attribute on links.

“Ends With” Attribute Selector

This next one is exactly the opposite: You can target an element based on the ending of an attribute value. Here it is:

a[href$=".pdf"] {
  background: url(../images/pdf.png) no-repeat center right;
  padding-right: 20px;
}

This selector uses the dollar sign ($). Now we have what looks like a fairly reliable matching process. We know that all anchor elements that point to PDF documents are going to have the extension “.pdf”, so with this code we can add some right padding to those links and add a PDF icon to the link’s background.

“Contains” Attribute Selector

Finally, this selector targets elements based on any string match within an attribute value. So the specified string could occur anywhere in the value, not just at the beginning or the end.

div[class*="post-"] p {
  color: green;
}

The asterisk character (*) is well-known in computing as a wildcard character, so this one’s easy to remember.

The example I’m using may remind you of how WordPress sites attach a number of classes to specific elements, often with prefixes like “post-“. This might not be extremely practical, because usually there is another primary class with which to target the element. But again, it illustrates what can be done, and the type of values you’d be targeting with the wildcard character.

Got Any Use Cases?

Depending on how you build your app, your markup, and how you define certain attributes, the sky is really the limit with these selectors. I’d be glad to hear of any practical ways anyone has used these in their projects.