Category: WebDesign

There are many types of selectors in CSS. If you’re still making your way through the darkness with nothing more than a few element selectors, a few classes, some ids, and the occasional pseudo selector, you need to find your way into the light with attribute selectors.

I wrote about Attribute Selectors in CSS back in 2008, but there are 3 new types of attribute selectors in CSS3. And they have good browser support.

Attribute Selector Basics

The basic syntax is to name an element, with an attribute in brackets following it, then give the CSS rule.

element[attribute] {
some rules here;
}

This rule, for example, would target any image with a title attribute.

img[title] {
some rules here;
}

This rule would target any anchor element with an href attribute.

a[href] {
some rules here;
}

Beyond that basic type of attribute selector, there are several operators can can be used to refine or broaden what you are selecting.

Using an equals sign, you can add specific values to the chosen attributes, making the selector even more precise. For example,

img[title="mybunny"] {
some rules here;
}

a[href="http://blogher.com"] {
some rules here;
}

The first example would select any image with the exact title attribute “mybunny.” The second would choose any link going to exactly “http://blogher.com,” but not to, say, “http://blogher.com/tech.”

The ~= operator select elements with an attribute value containing a specified word.

i [lang~="en"] {
some rules here;
}

This would match any italic element with a language attribute of English.

The |= uses the syntax |= to match hyphenated elements. This most often is used in rules targeting specific language declarations, where you might have hyphenated attributes in an HTML element such as en-US or en-GB. An example selector is:

body [lang|="en"]{
some rules here;
}

New in CSS3

The ^= operator uses the caret (^) with the equals sign to select what something begins with. It will match elements that have an attribute containing a value that starts with the specified value. For example,

a[href^="https:"] {
some rules here;
}

That selector would match only anchor elements with an href that began with https:.

The *= operator will match elements that have an attribute which contains the specified value somewhere in the attribute value. For example,

a[href*="blogher.com"] {
some rules here;
}

That would select any anchor element with an href value that contained blogher.com somewhere. This gives you a much wider sweep than the simple = operator.

Finally, the $= operator uses the dollar sign ($), which matches to elements that have a  specified value at the end. Examples:

img[src$=".gif"] {
some rules here;
}

a[href$=".doc"] {
some rules here;
}

These two examples would select only image elements ending with .gif or only href attributes ending in .doc.