CSS: Attribute Selector

The attribute selector in CSS is used to target HTML elements based on the presence, absence, or value of a given attribute. It’s a powerful tool for applying styles to elements with certain characteristics without having to add classes or IDs. Here are the different types of attribute selectors:

Presence and Value Selectors:

• [attr]: Selects elements with the specified attribute, regardless of its value.
• [attr=value]: Selects elements with the specified attribute and value.

Substring Value Selectors:

• [attr^=value]: Selects elements whose attribute value begins with the specified value.
• [attr$=value]: Selects elements whose attribute value ends with the specified value.
• [attr*=value]: Selects elements whose attribute value contains the specified substring.

Specificity Value Selectors:

• [attr|=value]: Selects elements with the specified attribute whose value is exactly value or starts with value followed by a hyphen.
• [attr~=value]: Selects elements with the specified attribute whose value is a whitespace-separated list of words, one of which is exactly value.

Case Sensitivity:

• [attr=value i]: Selects elements with the specified attribute and value, case-insensitively.

Here’s an example to illustrate the use of attribute selectors:

CSS

/* Selects all <a> elements with a 'title' attribute */
a[title] {
  color: purple;
}

/* Selects all <input> elements with a 'type' attribute of 'text' */
input[type="text"] {
  background-color: yellow;
}

/* Selects all elements with a 'data-info' attribute containing '123' */
div[data-info*="123"] {
  font-weight: bold;
}

In these examples:

• All <a> elements with a title attribute will have purple text.
• All <input> elements of type text will have a yellow background.