CSS Reference Guide: Attribute selectors

In HTML, we use attributes to pass info or additional options to DOM elements. These attributes can be leveraged in CSS to target specific elements for quick styling.

Jump ahead:

• [attr]
• [attr="value"]
• [attr^="value"]
• [attr$="value"]
• [attr*="value"]
• [attr~="value"]
• [attr|="value"]
• Live example

---

Consider the following example:

<div class="flex-item" id="flexm" disabled>Hi</div>

The div element has three attributes: class, id, and disabled, with values "flex-item", "flexm", and true, respectively.

Attribute selectors target a specific selector in the HTML based on the attribute of the element.

---

[attr]

The [attr] selector selects an element or elements with the attr attribute.

div[test] {
    color: red;
}

This example will style div elements with a test attribute with the color red.

p[target] {
    border-radius: 3px;
    padding: 10px;
}

This selector will match all p elements with the attribute target and make their border-radius 3px and padding 10px.

CSS will match the elements regardless of whether they have values defined.

---

[attr="value"]

This selector is more specific to the attribute and its value. It will match all elements with attribute attr that have a value of value.

Consider the example below:

div[test="testing"] {
    color: tomato;
}

This will select all div elements that have a test attribute with a value of "testing".

<div test>1</div>
<div test="testing">2</div>
<div test="testing">3</div>

Here, only divs 2 and 3 will be matched and styled because they have a test attribute with its value set as "testing". Div 1 will not be styled despite having a test attribute because it does not have a value of "testing" — thus, it is not selected.

---

[attr^="value"]

This selector is a matching pattern selector. It will select elements with attribute attr whose value starts with "value".

The key words here are starts with. The attribute must start with the specified value.

Here’s an example:

div[test^="test"] {
    color: tomato;
}

This will select div elements with the test attribute whose values start with "test".

<div test="lasttesting">1</div>
<div test="testing">2</div>
<div test="tester">3</div>

Here, only divs 1 and 2 will be selected because they have test attributes whose values start with "test". Div 1 isn’t selected because its test attribute value does not start with "test".

---

[attr$="value"]

This is also a matching pattern selector. It selects elements with the attribute attr that have a value ending with value.

Here’s an example:

div[test$="ing"] {
    color: green;
}

This selector will match all div elements with attribute test whose value ends with "ing".

<div test="lasttesting">1</div>
<div test="testing">2</div>
<div test="tester">3</div>

Only divs 1 and 2 will be matched by the selector because they have a test attribute and their values end with "ing". Div 3 will be unaffected.

---

[attr*="value"]

Another matching pattern selector, it checks for a containing attribute value. This selector will select elements with the attr attribute with a value that contains value.

div[test*="val"] {
    color: turquoise;
}

In the example above, we select all div elements with the test attribute whose values contain the "val" string.

<div test="valuetesting">1</div>
<div test="tester">2</div>
<div test="testingvalue">3</div>
<div test="testervalue">4</div>

We have four div elements, all with the "test" attribute. Now, following the CSS selector, only divs 1, 3, and 4 will be affected. Their attribute "test" values contain the "val" string; div 2 will be unaffected because its "test" attribute value does not contain a "val" string.

---

[attr~="value"]

This selector targets space-separated attribute values. It selects elements whose attr attribute values list matches the "value".

div[test~="val"] {
    color: orangered;
}

In the example above, the selector will affect div elements with the "test" attribute whose values lists match "val".

<div test="tester value">1</div>
<div test="tester val">2</div>
<div test="testervalue">3</div>
<div test="testingvalue">4</div>
<div test="testing value">5</div>
<div test="val testing">6</div>

Here, only divs 2 and 6 will be selected. This is because one of their discrete "test" attribute values is "val". Divs 1, 3, 4, and 5 will be unaffected because their "test" attribute values have no space-separated values that match "val".

---

[attr|="value"]

This selects elements whose attribute is attr and whose value is either "value" or whose value is followed immediately by a hyphen, -.

This attribute selector is mainly used for internationalization.

div[lang|="en"] {
    color: limegreen;
}

This will select div elements with the lang attribute whose values are either "en" or "en-", with a hyphen.

<div lang="en">English(en)</div>
<div lang="en-EN">English(en-EN)</div>
<div lang="es">Espana(es)</div>
<div lang="es-ES">Espana(es-ES)</div>

Divs English(en) and English(en-EN) will be selected because they contained "en" and "en-", respectively.

---

Live example

You can explore the implementation of the various selectors in the demo below.

See the Pen
css attributes by Chidume David (@philipsz-davido)
on CodePen.