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".

---

Over 200k developers use LogRocket to create better digital experiences

Learn more →

---

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.

Is your frontend hogging your users' CPU?

As web frontends get increasingly complex, resource-greedy features demand more and more from the browser. If you’re interested in monitoring and tracking client-side CPU usage, memory usage, and more for all of your users in production, try LogRocket.https://logrocket.com/signup/

LogRocket is like a DVR for web and mobile apps, recording everything that happens in your web app, mobile app, or website. Instead of guessing why problems happen, you can aggregate and report on key frontend performance metrics, replay user sessions along with application state, log network requests, and automatically surface all errors.

Modernize how you debug web and mobile apps — Start monitoring for free.