Skip to main content

Getting StartED with CSS

Attribute Selectors

Attribute selectors target elements based on attributes defined in their opening HTML tags. CSS2.1 specifies four types of attribute selectors. A further three from the proposed CSS3 specification are already supported by all browsers in widespread use, with the exception of Internet Explorer 6, which supports none of the selectors on this page.

The basic syntax for each attribute selector is shown in the following format: E[foo="bar"], where E represents a selector, foo represents the name of the attribute, and bar is the attribute’s value. Quotes around the value are optional, except when it contains spaces.

Matching an attribute

The syntax for this selector is E[foo], which matches any E element that contains the foo attribute, regardless of the attribute’s value. For example, the following style rule uses the universal selector in combination with an attribute selector to add a 2px blue border to every item that has a title attribute:

*[title] { border: solid 2px blue; }

Matching an attribute with an exact value

The syntax for this selector is E[foo="bar"]. For the selector to work, the value of the attribute must be exactly equal to the value given. For example, the following style rule selects all elements that use only the warning class:

*[class="warning"] { font-weight:bold; color:#F00; }

Because the value must be exactly equal, *[class="warning"] does not match elements that use class="warning reallyBig" or class="warn".

Matching an attribute that contains a specific word

The syntax for this selector is E[foo~="bar"]. The tilde (~) in front of the equals sign instructs the browser to match any E element where the value of the foo attribute value is a list of space-separated values, one of which is exactly equal to bar. For example, the following rule selects all elements that use at least the warning class:

*[class~="warning"] { font-weight:bold; color:#F00; }

If you have a page where some elements have class="warning" in their opening HTML tags, and others have class="warning reallyBig", all of them will be selected by *[class~="warning"].

Matching an attribute that contains a substring

The syntax for this selector is E[foo*="bar"]. It matches any E element where the value of the foo attribute contains the substring bar.

The following selector matches all images that contain “Paris” anywhere in the alternate text:

img[alt*="Paris"]

Because this attribute selector is looking only for a substring, it will match images that have the following alternate text: “Parisians relax”, “Elegant Parisienne”, or “Paris in the spring”.

Matching an attribute that begins with a value

The syntax for this selector is E[foo^="bar"]. It matches any E element where the value of the foo attribute begins with bar.

A particularly useful example of this is using the following selector to target links to external sites (assuming you don’t use fully qualified URLs for internal links):

a[href^="http://"]

Matching an attribute that ends with a value

The syntax for this selector is E[foo$="bar"]. It matches any E element where the value of the foo attribute ends with bar.

You could use the following selector to apply a special style to all links to PDF files:

a[href$=".pdf"]

Matching the lang attribute

The syntax for this selector is E[lang|="bar"]. This matches any E element where the lang attribute has a hyphen-separated list of values beginning (from the left) with bar.

The following rule targets all paragraphs that have the lang attribute set to fr (French) or fr-ca (Canadian French):

p[lang|=fr] { font-style: italic; }