CSS3 – Substring matching attribute selectors

[att^=val] : Represents an element with the att attribute whose value begins with the prefix “val”.

[att$=val] : Represents an element with the att attribute whose value ends with the suffix “val”.

[att*=val] : Represents an element with the att attribute whose value contains at least one instance of the substring “val”.

This whole group of selectors is new, and the selectors in it let developers match substrings in the value of an attribute.

Assume that we have an HTML document that contains the following markup structure:
<div id=”nav-primary”></div>
<div id=”content-primary”></div>
<div id=”content-secondary”></div>
<div id=”tertiary-content”></div>
<div id=”nav-secondary”></div>

By using the substring matching attribute selectors we can target combinations of these structural parts of the document.

The following rule will set the background colour of all div elements whose id begins with “nav”:
div[id^=”nav”] { background:#ff0; }

In this case the selector will match div#nav-primary and div#nav-secondary.

To target the div elements whose id ends with “primary”, we could use the following rule:
div[id$=”primary”] { background:#ff0; }

This time the selector will match div#nav-primary and div#content-primary.

The following rule will apply to all div elements whose id contain the substring “content”:
div[id*=”content”] { background:#ff0; }

The elements that will be affected by this rule are div#content-primary, div#content-secondary, and div#tertiary-content.

The substring matching attribute selectors are all fully supported by the latest versions of Mozilla, Chrome, Firefox, Safari and Opera.

Reference: http://www.456bereastreet.com/archive/200601/css_3_selectors_explained/

2 thoughts on “CSS3 – Substring matching attribute selectors

  1. Hi you have a good website over here! Thanks for sharing this interesting information for us! If you keep up the great work I’ll visit your weblog again. Thanks!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s