CSS3 Attribute Selectors

CSS3 Substring Matching Attribute Selectors

The CSS3 Selectors module introduces three new attribute selectors, which are grouped together under the heading “Substring Matching Attribute Selectors”.

These new selectors are as follows:

[att^=val] – the “begins with” selector

[att$=val] – the “ends with” selector

[att*=val] – the “contains” selector



The first of these new selectors, which we’ll refer to as the “begins with” selector, allows for the selection of elements where a specified attribute (e.g. the href attribute of a hyperlink) begins with a specified string (e.g. “http://”, “https://” or “mailto:”).

In the same way, the additional two new selectors, which we’ll refer to as the “ends with” and “contains” selectors, allow for the selection of elements where a specified attribute either ends with or contains a specifed string (respectively).

The CSS3 Selectors module was the second of the new CSS3 modules to become an official W3C Recommendation, in September 2011, and the features within can now be considered to be at a stable stage of development. As such, browser support for the three new attribute selectors is relatively widespread – full details can be found in the browser support section near the end of this article.

How they Work

Let’s take a look at each of these new selectors in more detail, including examples to demonstrate how they might be used.

[att^=val] – the “begins with” selector

The “begins with” selector allows for the selection of elements where a specified attribute (e.g. thehref attribute of a hyperlink) begins with a specified string (e.g. “http://”, “https://” or “mailto:”).

The Syntax

element[att^=val]

Examples

a[href^=”http://”]
p[title^=”Hello”]

Here’s a real-life example of the “begins with” selector in use. Below we have a list of links, as follows: a standard web link; a link to a secure website; a mailto: link; an ftp link; and lastly a magnet link. Using the “begins with” selector we can style each link differently, in this case using CSS to apply different icons to the differing link types, by selecting the links we want to style based on the begining of their href attribute.

Here’s the example:

Visit a website

Visit a secure website

Send an email

Connect to an FTP server

Download from a magnet link





Here’s the HTML for this example:

<div class="example1">
<ul>
<li><a href="http://www.google.com">Visit a website</a></li>
<li><a href="https://www.google.com">Visit a secure website</a></li>
<li><a href="mailto:email@email.com">Send an email</a></li>
<li><a href="ftp://www.google.com">Connect to an FTP server</a></li>
<li><a href="magnet:…">Download from a magnet link</a></li>
</ul>
</div>

And here’s the CSS for this example:

div.example1 ul {
list-style-type: none;
}

div.example1 ul li a {
padding-left: 20px;
background-image: url(demo-images/file.png);
background-repeat: no-repeat;
}

div.examples1 ul li a[href^=”https://”] {
background-image: url(demo-images/lock.png);
}

div.example1 a[href^=”mailto:”] {
background-image: url(demo-images/mail.png);
}

div.example1 a[href^=”ftp://”] {
background-image: url(demo-images/folder_ftp.png);
}

div.example1 a[href^=”magnet”] {
background-image: url(demo-images/magnet.png);
}



[att$=val] – the “ends with” selector

Similar to the “begins with” selector, the “ends with” selector allows for the selection of elements where a specified attribute (e.g. the href attribute of a hyperlink) ends with a specified string (e.g. “.pdf”, “.docx” or “.mp3”).

The Syntax

element[att$=val]

Examples

a[href$=”.pdf”]
p[title$=”World”]

Here’s a real-life example of the “ends with” selector in use. Again we have a list of links, this time as follows: a link to a PDF document; a link to Word document; a link to an Excel document; a link to an MP3 file; and lastly a standard link. Using the “ends with” selector we can style each link differently, in this case using CSS to apply different icons to the differing file types by selecting the links we want to style based on the ending of their href attribute.

Here’s the example:

A link to a PDF document

A link to a Word document

A link to an Excel document

A link to an MP3 file

A normal web link





Here’s the HTML for this example:

<div class="example2">
<ul>
<li><a href="http://www.css3.info/demos/files/1.pdf">A link to a PDF document</a></li>
<li><a href="http://www.css3.info/demos/files/1.docx">A link to a Word document</a></li>
<li><a href="http://www.css3.info/demos/files/1.xlsx">A link to an Excel document</a></li>
<li><a href="http://www.css3.info/demos/files/1.mp3">A link to an MP3 file</a></li>
<li><a href="http://www.css3.info">A normal web link</a></li>
</ul>
</div>

And here’s the CSS for this example:

div.example2 ul {
list-style-type: none;
}

div.example2 ul li a {
padding-left: 20px;
background-image: url(demo-images/file.png);
background-repeat: no-repeat;
}

div.example2 ul li a[href$=”.pdf”] {
background-image: url(demo-images/pdf.png);
}

div.example2 ul li a[href$=”.docx”] {
background-image: url(demo-images/page_white_word.png);
}

div.example2 ul li a[href$=”.xlsx”] {
background-image: url(demo-images/page_white_excel.png);
}

div.example2 ul li a[href$=”.mp3″] {
background-image: url(demo-images/audio.png);
}



[att*=val] – the “contains” selector

The last of the new substring matching attribute selectors, and perhaps the most powerful, is the “contains” selector, or “wildcard” selector as it is sometimes refered to. The “contains” selector enables designers to select elements where a specified attribute (again we could use the example of the href attribute of a hyperlink) contains a specified string (eg. google.com or yahoo.com).

The Syntax

element[att*=val]

Examples

a[href*=”google.com”]
p[title$=”orl”]

Again, here’s a real life example using a list of hyperlinks, this time; a link to Google, a link to our Twitter profile, a link our Facebook page, a link to Yahoo, and lastly a link to Bing. Using the “contains” selector we can style each link differently based on the contents of the href attribute, in this case by specifying a specific icon for elements where the contents of the href attribute contains a particular domain name.

Here’s the example:

A link to Google

A link to a Twitter profile

A link to a Facebook page

A link to Yahoo

Any other link





Here’s the HTML for this example:

<div class="example3">
<ul>
<li><a href="http://www.google.com">A link to Google</a></li>
<li><a href="http://www.twitter.com/css3">A link to a Twitter profile</a></li>
<li><a href="https://www.facebook.com/css3.info">A link to a Facebook page</a></li>
<li><a href="http://www.yahoo.com">A link to Yahoo</a></li>
<li><a href="http://www.bing.com">Any other link</a></li>
</ul>
</div>

And here’s the CSS for this example:

div.example3 ul {
list-style-type: none;
}

div.example3 ul li a {
padding-left: 20px;
background-image: url(demo-images/file.png);
background-repeat: no-repeat;
}

div.example3 ul li a[href*=”google.com”] {
background-image: url(demo-images/google.png);
}

div.example3 ul li a[href*=”twitter.com”] {
background-image: url(demo-images/twitter.png);
}

div.example3 ul li a[href*=”facebook.com”] {
background-image: url(demo-images/facebook.png);
}

div.example3 ul li a[href*=”yahoo.com”] {
background-image: url(demo-images/yahoo.png);
}



Browser Support

	Chrome	Firefox	IE	Safari	Opera
[att^=val] – “begins with”	2.0	3.01.0	7.0	1.3	9.59.2
[att$=val] – “ends with”	2.0	3.01.0	7.0	1.3	9.59.2
[att*=val] – “contains”	2.0	3.01.0	7.0	1.3	9.59.2

Table key:

#native selector support (with no known bugs), since version indicated



#native selector support (with known bugs), since version indicated





With development on the CSS3 Selectors module now complete, browser support is relatively widespread, and in fact the CSS3 substring matching attribute selectors have enjoyed widespread browser support for sometime now, although some older versions of certain browsers (particularly Internet Explorer) contain known bugs.

Additional Notes & Further Reading