Skip to navigation

Attribute Selectors

What? More selectors? Damn straight. Because someone somewhere really wants you to keep your HTML as tidy as possible. So before you add a class attribute to a tag see if you can simply target it by an attribute that might already be there.

Attribute selectors allow you to style an element’s box based on the presence of an HTML attribute or of an attribute’s value.

With the attribute…

Appending an attribute name enclosed in square brackets, to style something that simply contains a certain attribute, you can do something like this:

abbr[title] { border-bottom: 1px dotted #ccc }

This basically says “shove a dotted line underneath all abbreviations with a title attribute”.

With the attribute and its value…

You can further specify that you want to style something with a specific attribute value.

input[type=text] { width: 200px; }

This example will apply a width of 200 pixels only to input elements that are specified as being text boxes (<input type="text">).

You can also target more than one attribute at a time in a way similar to the following:

input[type=text][disabled] { border: 1px solid #ccc }

This will only apply a gray border to text inputs that are disabled.