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.
[attr]
[attr="value"]
[attr^="value"]
[attr$="value"]
[attr*="value"]
[attr~="value"]
[attr|="value"]
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.
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.
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.
Leptos is an amazing Rust web frontend framework that makes it easier to build scalable, performant apps with beautiful, declarative UIs.
Learn more about the 5 best JavaScript libraries for dealing with multidimensional arrays, such as ndarray, math.js, and NumJs.
We spoke with Dom about his approach to balancing innovation with handling tech debt and to learn how he stays current with technology.
Vite is a versatile, fast, lightweight build tool with an exceptional DX. Let’s explore when and why you should adopt Vite in your projects.