Style Elements by Their Attributes With CSS Attribute Selectors

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:

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:

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:

[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:

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

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:

[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:

[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:

[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):

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:

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.