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
.
More great articles from LogRocket:
- Don't miss a moment with The Replay, a curated newsletter from LogRocket
- Learn how LogRocket's Galileo cuts through the noise to proactively resolve issues in your app
- Use React's useEffect to optimize your application's performance
- Switch between multiple versions of Node
- Discover how to animate your React app with AnimXYZ
- Explore Tauri, a new framework for building binaries
- Advisory boards aren’t just for executives. Join LogRocket’s Content Advisory Board. You’ll help inform the type of content we create and get access to exclusive meetups, social accreditation, and swag.
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.
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.