Modern day CSS enhancements has made it pretty easy to play with the selectors. Before that, we didn’t have that much control over selection in CSS, and had to write the complete class to select.

This article demonstrates some basic use cases of CSS Attribute Selectors. I’m quite sure that this will save you a little bit more time in your front-end development tasks.

CSS Attribute Selectors

Yes, that’s what I’m talking about. Have a look at the code below.

a[href="https://w3bits.com"] {
  color: blue;
}

If you are aware of the attribute selectors in CSS, then you know that of course, the above piece of code will select the links to this site and make them appear blue in color.

Now, what if you want to select an attribute with some conditions associated with it? For instance, you want to select an attribute of an element that starts with a specific word, let’s call it X.

Or, you want that attribute to get selected only when it has X in it.

Or, the attribute should only be selected when it ends with X.

There are certain operators we can use with attribute selectors to make the selection the way we want.

The Different Types of Attribute Selectors

The types of Attribute Selectors are based on the way they operate. Below given is a list of operations you can perform with different Attribute Selectors in CSS.

  1. The Caret (^)

    Caret symbol lets you select an attribute that starts with a word specified by you. Say, you want to select all the elements with CSS class starting with “drag-” and then provide certain properties to it.

    [class^="drag-"] {
   cursor: move;
}

  2. The Dollar ($)

    The Dollar sign does just the opposite of the caret sign. It checks for the word from the very end of the attribute. The below snippet selects all captions next to the JPEG images (using the <img> tag) in a document and mark their type by making use of the dollar attribute selector.

    img[src$=".jpg"] + figcaption:before {
   content: "It's a JPEG image.";
}

  3. The Asterisk (*)

    Asterisk allows you to scan through an attribute for a word specified by you. The respective element will be selected as soon as it finds the first match in the attribute.

    [class*="caption"] {
  font-size: 0.825em;
}

  4. The Tilde (~)

    Tilde is a special one for space-separated values of an attribute. It will match only if the value specified is any one of the space-separated values of the attribute in consideration.

    [class~="blue"] {
  color: blue;
}

That’s about it. Coming up are the practical use cases of CSS Attribute Selectors.

Let me know which one do you use frequently in your projects. Any questions, and suggestions are also welcomed. And if this small guide helped you in any way, please consider sharing it with the fellow developers. Thanks for your time :)

Read further