Do You Use These 7 Attribute Selectors In Your CSS?

Posted: 12 Sep 2011 05:30 AM PDT

CSS Selectors are an essential ingredient in developing websites. They’re the hooks our css has into our html. How may different css selector patterns do you regularly use?

If you’re like me the answer is not many. I have a tendency to stick to simple selectors like html elements, classes, and ids, but there are so many more to choose from.

I thought it would be a good idea to take a look at the 42 different selector patterns we have at our disposal so we can potentially use more of them and get away from classitis and an over reliance on making selectors ever more specific. Both can be enemies of maintainability.

This will take more than a single post so to prepare you for what’s ahead the plan is to cover:

Attribute selectors — hooking into elements through html attributes
Combinators — combining selectors to be more specific and more powerful
Pseudo classes — elements we can target when certain conditions are met

We’ll cover the first today and continue with combinators and pseudo classes in the coming weeks. For the sake of completion let’s begin with a quick look at some simple selectors.

Simple Selectors

Simple selectors include type selectors, the universal selector, attribute selectors, class selectors, ID selectors, and pseudo-classes. We’ll save pseudo classes for the next post.

Note: Numbers in parenthesis indicate in which level of css the selector was introduced.

Type selectors (1) E matches any element of type E — We can use any element in our html as a selector. Most every css file created has a section for how html elements should generally be styled and simple type selectors form the whole of many css resets.

Universal selector (2) * matches any element — If there’s a style you want to apply to all elements this is the one to use. The universal selector was the first css reset as it was often used to give everything a default margin and padding of 0.

Class selectors (1) E.myclass matches an element with a class of myclass — any reusable set of styles on the page should likely be a class.

ID selectors (1) E#myid matches an element with an id of myid — any set of styles you want to use for only one element on a page should likely be an id.

I’m assuming you’re familiar enough with all of the above that little explanation is required. Let’s move on to attribute selectors, which you many not be as familiar with.

Attribute Selectors

Attribute selectors were first added in css2 and more are being added in css3. I have to admit that I don’t use these as often as I could or should.

E[foo] (2) — matches an element E with a “foo” attribute

 <a href="yoursite.com/somepage.html" rel="external"> <a href="mypage.html" rel="internal">

 a[rel] {color: green}

Both links above would be green as both contain the rel attribute.

E[foo="bar"] (2) — matches an element E whose “foo” attribute value is exactly equal to “bar”

 <a href="yoursite.com/somepage.html" rel="external"> <a href="mypage.html" rel="internal">

 a[rel='external'] {color: gree}

Only the first link would be green since the value of its rel attribute is “external.”

E[foo~="bar"] (2) — matches an element E whose “foo” attribute value is a list of whitespace-separated values, one of which is exactly equal to “bar

 <a href="yoursite.com/somepage.html" rel="external friend bob"> <a href="mypage.html" rel="internal friend janice">

 a[rel~="friend"] {color: gree}

Again both links are colored green as both contain the value friend within the whitespace-separated list of values.

E[foo^="bar"] (3) — matches an element E whose “foo” attribute value begins exactly with the string “bar”

 <a href="yoursite.com/somepage.html" rel="external friend bob"> <a href="mypage.html" rel="internal friend janice">

 a[href^="my"] {color: gree}

The second link is green because it’s href value begins with “my.”

E[foo$="bar"] (3) — matches an element E whose “foo” attribute value ends exactly with the string “bar”

 <a href="yoursite.com/somepage.html" rel="external friend bob"> <a href="mypage.php" rel="internal friend janice">

 a[href$="php"] {color: gree}

Again the second link is chosen since it ends in php. This selector is probably a good way to target links pointing to a certain file type. I’m not sure if you’d want to style .jpg and .png images differently, though here’s a way to do that.

E[foo*="bar"] (3) — matches an element E whose “foo” attribute value contains the substring “bar”

 <a href="yoursite.com/somepage.html" rel="external friend bob"> <a href="mypage.php" rel="internal friend janice">

 a[href*="page"] {color: gree}

Both links will be green since both have href values that include “page” as a substring

E[foo|="en"] (3) — matches an element E whose “foo” attribute has a hyphen-separated list of values beginning (from the left) with “en”

 <a href="yoursite.com/somepage.html" rel="external-friend-bob"> <a href="mypage.php" rel="internal-friend-janice">

 a[rel|="internal"] {color: gree}

Only the second link is green here as it’s value begins with “internal.”

Multiple Attribute Selectors

You aren’t limited to a single attribute as part of the selector. For example

 <a href="yoursite.com/somepage.html" rel="external friend bob"> <a href="mypage.php" rel="internal friend janice">

 a[rel~="friend"][rel~=external] {color: gree}

The above matches the first link and says to style any links to external sites run by friends as green

Attributes vs. Classes or IDs

One question you might have looking through the above is what advantage do attribute selectors have over classes and ids. If you have to add an arbitrary attribute to use the selector then none really.

However many elements in your html will have an attribute for other reasons.

Links will always have an href attribute and often a title attribute. Images will have an alt attribute. Form elements use the type attribute. There are already a lot of attributes in your html so why not take advantage of them where you can.

We may also be making more use of attributes in the future as a way to add html5 microdata to our pages. Again why not take advantage of them.

Browser Support

Outside of IE6, browser support for all of the above is good. You can check the links below for which browser and version supports which selector.

Summary

Selectors are a basic part of css syntax and they’re how we hook our css into our html. I’m sure you’ve used elemental selectors, class and id selectors, and perhaps the universal selector as well.

What you may not take advantage of is the attribute selectors. I know I don’t even while I know I should. Attribute selectors allow you to take advantage of code you’re already using instead of having to add arbitrary classes or ids to our html.

Next week we’ll run through combinators and some pseudo class selectors.