CSS Attribute Selector Detailed

CSS 2 introduced attribute selectors.

Attribute selectors can be used to select elements based on the element's attributes and attribute values.

Simple Attribute Selector

If you want to select elements with a certain attribute, regardless of the attribute value, you can use a simple attribute selector.

Example 1

If you want to turn all elements containing a title (title) into red, you can write:

*[title] {color:red;}

Try it yourself

Example 2

Similar to the above, you can apply styles only to anchors (a elements) with the href attribute:

a[href] {color:red;}

Try it yourself

Example 3

You can select based on multiple attributes, just link the attribute selectors together.

For example, to set the text of HTML hyperlinks that have both href and title attributes to red, you can write it like this:

a[href][title] {color:red;}

Try it yourself

Example 4

Creative methods can be used to take advantage of this feature.

For example, you can apply styles to all images with the alt attribute to highlight these valid images:

img[alt] {border: 5px solid red;}

Try it yourself

Tip:This special case is more suitable for diagnosis rather than design, that is, to determine whether the image is indeed valid.

Example 5: Using attribute selectors in XML documents

Attribute selectors are quite useful in XML documents because the XML language advocates specifying element names and attribute names for the purpose of elements and attributes.

Suppose we have designed an XML document to describe the planets in the solar system. If we want to select all planet elements with the moons attribute and display them in red to pay more attention to the planets with moons, we can write it like this:

planet[moons] {color:red;}

This will make the text of the second and third elements in the following markup fragment appear in red, but the text of the first element is not red:

<planet>Venus</planet>
<planet moons="1">Earth</planet>
<planet moons="2">Mars</planet>

View the effect

Selection based on specific attribute values

In addition to selecting elements with certain attributes, you can further narrow down the selection range to only select elements with specific attribute values.

Example 1

For example, if you want to change the hyperlink pointing to a specific document on a web server to red, you can write it like this:

a[href="http://www.codew3c.com/about_us.asp"] {color: red;}

Try it yourself

Example 2

Similar to simple attribute selectors, multiple attribute-value selectors can be linked together to select a document.

a[href="http://www.codew3c.com/"][title="W3School"] {color: red;}

This will change the text of the first hyperlink in the following markup to red, but the second or third link will not be affected:

<a href="http://www.codew3c.com/" title="W3School">W3School</a>
<a href="http://www.codew3c.com/css/" title="CSS">CSS</a>
<a href="http://www.codew3c.com/html/" title="HTML">HTML</a>

Try it yourself

Example 3

Similarly, XML language can also use this method to set styles.

Let's go back to the planet example again. Suppose you only want to select planet elements with a moons attribute value of 1:

planet[moons="1"] {color: red;}

The above code will make the second element in the following tag red, but the first and third elements are not affected:

<planet>Venus</planet>
<planet moons="1">Earth</planet>
<planet moons="2">Mars</planet>

View the effect

The attribute and attribute value must match completely

Please note that this format requires a complete match with the attribute value.

If the attribute value contains a list of values separated by spaces, there may be a problem with the match.

Consider the following markup fragment:

<p class="important warning">This paragraph is a very important warning.</p>

If written as p[class="important"], then this rule cannot match the example tag.

To select an element based on a specific attribute value, you must write it like this:

p[class="important warning"] {color: red;}

Try it yourself

Partial attribute value selection

If you need to select based on a word in a list of words in the attribute value, you need to use the tilde (~).

Suppose you want to select elements that contain "important" in the class attribute. You can do this with the following selector:

p[class~="important"] {color: red;}

Try it yourself

If the tilde is omitted, it means that a complete value match is required.

The difference between partial value attribute selectors and dot class name notation

This selector is equivalent to the dot class name notation we discussed in class selectors.

That is to say, p.important and p[class="important"] are equivalent when applied to an HTML document.

Why do we need the "~=" attribute selector? Because it can be used for any attribute, not just class.

For example, a document with a large number of images may only contain a few images. In this case, you can use a partial attribute selector based on the title attribute to select only these images:

img[title~="Figure"] {border: 1px solid gray;}

This rule will select all images whose title text contains "Figure". Images without the title attribute or those whose title attribute does not contain "Figure" will not match.

Try it yourself

Substring Matching Attribute Selector

Next, I will introduce a more advanced selector module that was released after CSS2 was completed. It includes more partial value attribute selectors. According to the specification, it should be called 'Substring Matching Attribute Selector'.

Many modern browsers support these selectors, including IE7.

The following table is a simple summary of these selectors:

Types Description
[abc^="def"] Select all elements whose abc attribute value starts with "def"
[abc$="def"] Select all elements whose abc attribute value ends with "def"
[abc*="def"] Select all elements whose abc attribute value contains the substring "def"

You can imagine that these selectors have many uses.

For example, if you want to apply styles to all links pointing to CodeW3C.com, you do not need to specify a class for all these links and then write styles based on this class. You just need to write the following rule:

a[href*="codew3c.com"] {color: red;}

Try it yourself

Tip:Any attribute can use these selectors.

Specific Attribute Selector Types

Finally, let me introduce a specific attribute selector. Please see the following example:

*[lang|="en"] {color: red;}

This rule will select all elements with the lang attribute equal to en or starting with en-. Therefore, the first three elements in the following example markup will be selected, and the last two elements will not be selected:

<p lang="en">Hello!</p>
<p lang="en-us">Greetings!</p>
<p lang="en-<p lang="au">G'day!</p>
<p lang="fr">Bonjour!</p>
<p lang="cy-en">Jrooana!</p>

Try it yourself

Generally, [att|="val"] can be used for any attribute and its value.

Suppose there is a series of images in an HTML document, and each image's filename is like this: figure-1.jpg and figure-2.jpgYou can use the following selector to match all these images:

img[src|="figure"] {border: 1px solid gray;}

Try it yourself

Of course, the most common use of this attribute selector is to match language values.

CSS Selector Reference Manual

Selector Description
[attribute] Used to select elements with specified attributes.
[attribute=value] Used to select elements with specified attributes and values.
[attribute~=value] Used to select elements that contain the specified term in the attribute value.
[attribute|=value] Used to select elements with attribute values that start with the specified value, and the value must be a whole word.
[attribute^=value] Match each element that starts with the specified value in the attribute value.
[attribute$=value] Match each element that ends with the specified value in the attribute value.
[attribute*=value] Match each element that contains the specified value in the attribute value.