The Lodge is members-only design/dev videos and Office Hours.

Next Office Hours Session: "Implementing an SVG Icon System" Nov 30 - 6:00 PM Eastern


Last updated on:

There are lots of ways you can select elements in CSS. The most basic selection is by tag name, like p { }. Almost anything more specific than a tag selector uses attributes — class and ID both select on those attributes on HTML elements. But class and ID aren't the only attributes developers can select. We can use any of an element's attributes as selectors.

Attribute selection has a special syntax. Here's an example:

a[href=""] {
  color: #E18728;

That's an exact match selector that will only select links with the exact href attribute value of "".

The Seven Different Types

Attribute selectors are case-sensitive, and are written inside brackets [].

There are seven different types of matches you can find with an attribute selector, and the syntax is different for each. Each of the more complex attribute selectors build on the syntax of the exact match selector — they all start with the attribute name and end with an equals sign followed by the attribute value(s), usually in quotes. What goes between the attribute name and equals sign is what makes the difference among the selectors.

[data-value] {
  /* Attribute exists */

[data-value="foo"] {
  /* Attribute has this exact value */

[data-value*="foo"] {
  /* Attribute value contains this value somewhere in it */

[data-value~="foo"] {
  /* Attribute has this value in a space-separated list somewhere */

[data-value^="foo"] {
  /* Attribute value starts with this */

[data-value=|"foo"] {
  /* Attribute value has this in a dash-separated list somewhere */

[data-value$="foo"] {
  /* Attribute value ends with this */

Value contains: attribute value contains a term as the only value, a value in a list of values, or as part of another value. To use this selector, add an asterisk (*) before the equals sign. For example, img[alt*="art"] will select images with the alt text "abstract art" and "athlete starting a new sport", because the value "art" is in the word "starting".

Value is in a space-separated list: value is either the only attribute value, or is a whole value in a space-separated set of values. Unlike the "contains" selector, this selector will not look for the value as a word fragment. To use this selector, add a tilde (~) before the equals sign. For example, img[alt~="art"] will select images with the alt text "abstract art" and "art show", but not "athlete starting a new sport" (which the "contains" selector would select).

Value starts with: attribute value starts with the selected term. To use this selector, add a caret (^) before the equals sign. Don't forget, case-sensitivity matters. For example, img[alt^="art"] will select images with the alt text "art show" and "artistic pattern", but not an image with the alt text "Arthur Miller" because "Arthur" begins with a capital letter.

Value is first in a dash-separated list: This selector is very similar to the "starts with" selector. Here, the selector matches a value that is either the only value or is the first in a dash-separated list of values. To use this selector, add a pipe character (|) before the equals sign. For example, li[data-years|="1900"] will select list items with a data-years value of "1900-2000", but not the list item with a data-years value of "1800-1900".

Value ends with: attribute value ends with the selected term. To use this selector, add a dollar sign ($) before the equals sign. For example, a[href$="pdf"] selects every link that ends with .pdf.

A note about quotes: You can go without quotes around the value in some circumstances, but the rules for selecting without quotes are inconsistent cross-browser. Quotes always work, so if you stick to using them you can be sure your selector will work.

See the Pen Attribute Selectors by CSS-Tricks (@css-tricks) on CodePen.

Fun fact: the values are treated as strings, so you don't have to do any fancy escaping of characters to make them match, as you would if you used unusual characters in a class or ID selector.

[class="(╯°□°)╯︵ ┻━┻"]{
  color: red;
  font-weight: bold;

Combining them

You can combine an attribute selector with other selectors, like tag, class, or ID.

div[attribute="value"] {
  /* style rules here */

.module[attribute="value"] {
  /* style rules here */

#header[attribute="value"] {
  /* style rules here */

Or even combine multiple attribute selectors. This example selects images with alt text that includes the word "person" as the only value or a value in a space separated list, and a src value that includes the value "lorem":

img[alt~="person"][src*="lorem"] {
  /* style rules here */

See the Pen Combined Attributes and Attribute-Only Selection by CSS-Tricks (@css-tricks) on CodePen.

Attribute Selectors in JavaScript and jQuery

Attribute selectors can be used in jQuery just like any other CSS selector. In JavaScript, you can use attribute selectors with document.querySelector() and document.querySelectorAll().

See the Pen Attribute Selectors in JS and jQuery by CSS-Tricks (@css-tricks) on CodePen.


More Information

Browser Support

Chrome Safari Firefox Opera IE Android iOS
Any Any Any Any 7+ Any Any


  1. Druid of Lûhn
    Permalink to comment#

    About using [rel$=external]
    You could use it with an :after selector on links ending in “.pdf” to have an icon at the end.

  2. shahryar
    Permalink to comment#

    Do Multiple attribute work in all browser?

  3. Gumnos
    Permalink to comment#

    While I like the power of these, I’m regularly frustrated that they don’t seem to be dynamic:

    input[checked]:after {
      content: attr(name);
      background-color: green;
      position: absolute;
        <li><input type=checkbox name='unchkd'>unchecked</input>
        <li><input type=checkbox name='chkd' checked>checked</input>

    which I keep hoping would update the CSS based on the “checked” property toggling on/off. Alas, not.

  4. Michael K. Sohn
    Permalink to comment#

    The comment for the attribute selection with hyphen separated values [data-value=|"foo"] should read:

    /* Attribute value starts with this in a dash-separated list */

    • daGo

      [data-value=|”foo”] indeed you very picky…And yep, obviously that need change by [data-value|=”foo”]

  5. Shafi
    Permalink to comment#

    Thanks @Chris you are ‘Superman’

  6. Danny
    Permalink to comment#

    In the ‘Seven Different Types’ Block, I think [data-value=|"foo"] Needs to be [data-value|="foo"]

  7. Jeremy
    Permalink to comment#

    How would I write the css for this?

    <option data-hidden="true" value="">[Fornecedor]</option>

    I’ve tried

    option[data-hidden="true"]{color: green;}
    option[data-hidden]{color: green;}
    option[dataHidden] {color: green;}

    all to no avail.

    Thanks in advance

Leave a Comment

Posting Code

We highly encourage you to post problematic HTML/CSS/JavaScript over on CodePen and include the link in your post. It's much easier to see, understand, and help with when you do that.

Markdown is supported, so you can write inline code like `<div>this</div>` or multiline blocks of code in in triple backtick fences like this:

  function example() {
    element.innerHTML = "<div>code</div>";

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed