🚨 Get Your Free NFT Certificate Mint by Completing the Web3 Exam! START NOW

Code has been added to clipboard!

Style Elements by Their Attributes With CSS Attribute Selectors

Reading time 4 min
Published Nov 13, 2016
Updated Oct 1, 2019

TL;DR — The CSS attribute selectors target elements according to their attributes and values. They are case-sensitive by default, meaning that CSS looks for exact matches.

Types of CSS Attribute Selectors

There are several types of CSS selectors for styling elements with specific attributes.

  • Targeting elements by their attribute only.
  • Targeting elements by their attribute and exact value.
  • Targeting elements by their attribute and exact word (might be separated by white-space).
  • Targeting elements by their attribute and exact value (or the value followed by a hyphen).
  • Targeting elements by their attribute and whose value has a prefix of the exact value.
  • Targeting elements by their attribute and whose value has a suffix of the exact value.
  • Targeting elements by their attribute and whose value has the exact value at least once.
  • Adding i or I makes the search case-insensitive.
  • Adding s or S makes the search case-sensitive.

[attribute] Selector

The CSS [attribute] selector is for matching HTML elements with a certain attribute. Therefore, the value is not important.

The example below selects every <a> element with [href] attribute in our HTML file:

Example
a[href] {    
    background-color: blue;
}

[attribute="value"] Selector

The [attribute="value"] selector is for choosing HTML elements with a certain attribute and value. This attribute selector styles only the elements with an exact value name and attribute.

The example below selects every <a> element with [href="#"] in our HTML file:

Example
a[href="#"] {
    background-color: blue;
}

CSS [attribute~="value"] Selector

The CSS [attribute~="value"] selector finds elements with an attribute which contains a certain word (regardless of its placement in the full name).

The example below styles elements that have the title attribute containing a whitespace-separated list with the word doggo:

Example
[title~="doggo"] {    
    border: 10px solid blue;
}

CSS [attribute|="value"] Selector

The [attribute|="value"] selector matches every element that has a certain attribute that starts with the specified value (a hyphen can follow it).

The below example styles every element that has a class attribute value which begins with style:

Example
[class|="style"] {    
    background: blue;
}

DataCamp
Pros
  • Easy to use with a learn-by-doing approach
  • Offers quality content
  • Gamified in-browser coding experience
  • The price matches the quality
  • Suitable for learners ranging from beginner to advanced
Main Features
  • Free certificates of completion
  • Focused on data science skills
  • Flexible learning timetable
Udacity
Pros
  • Simplistic design (no unnecessary information)
  • High-quality courses (even the free ones)
  • Variety of features
Main Features
  • Nanodegree programs
  • Suitable for enterprises
  • Paid Certificates of completion
Udemy
Pros
  • Easy to navigate
  • No technical issues
  • Seems to care about its users
Main Features
  • Huge variety of courses
  • 30-day refund policy
  • Free certificates of completion

CSS [attribute^="value"] Selector

The [attribute^="value"] attribute selector styles elements that have the specified attribute and starts with the specified value.

The below example selects each element that has a class attribute value which begins with style:

Example
[class^="style"] {    
    background: blue;
}

CSS [attribute$="value"] Selector

The [attribute$="value"] is for styling elements that have a certain attribute that ends with a specified value. The last word of the value of the attribute has to match the keyword described in the selector.

The below example will select every element that has a class attribute value which ends with style:

Example
[class$="style"] {    
    background: blue;
}

CSS [attribute*="value"] Selector

The selector [attribute*="value"] finds elements which have a specified keyword anywhere in the attribute value.

The below example selects every element that has a class attribute value which contains style anywhere in the string:

Example
[class*="style"] {    
    background: blue;
}

Case-Insensitive Styling

It is possible to use the CSS selector attribute to perform matching that is not case-sensitive.

The following example we are adding the i to style all <div> elements with example class (regardless of the way the example is written):

Example
div[class="example" i] {
  color: green;
  background-color: antiquewhite;
}

Matching Elements With Attribute Selectors

Same as with all regular CSS selector, you can use any styling properties with CSS attribute selectors.

In the example below, we apply a few styles to our selected HTML elements:

Example
input[type="text"] {
   width: 120px;
   display: block;
   margin-bottom: 20px;
   background-color: blue;  
}  

input[type="button"] {
   width: 100px;
  margin-left: 25px;
  display: block;  
}

CSS Attribute Selector: Useful Tips

  • It is possible to combine a CSS attribute selector with the class, tag, or ID selectors.
  • It is very common to target input elements that usually have a lot of values that need to be styled differently.