Chidume Nnamdi I'm a software engineer with 6+ years of experience. I've worked with different stacks ranging from WAMP, to MERN, to MEAN. My language of choice is JavaScript; frameworks are Angular and Nodejs.

CSS Reference Guide: Attribute selectors

3 min read 888

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:


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:

We made a custom demo for .
No really. Click here to check it out.

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.

 

You come here a lot! We hope you enjoy the LogRocket blog. Could you fill out a survey about what you want us to write about?

    Which of these topics are you most interested in?
    ReactVueAngularNew frameworks
    Do you spend a lot of time reproducing errors in your apps?
    YesNo
    Which, if any, do you think would help you reproduce errors more effectively?
    A solution to see exactly what a user did to trigger an errorProactive monitoring which automatically surfaces issuesHaving a support team triage issues more efficiently
    Thanks! Interested to hear how LogRocket can improve your bug fixing processes? Leave your email:

    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 apps, recording everything that happens in your web app or site. 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 apps — .

    Chidume Nnamdi I'm a software engineer with 6+ years of experience. I've worked with different stacks ranging from WAMP, to MERN, to MEAN. My language of choice is JavaScript; frameworks are Angular and Nodejs.

    Leave a Reply