What are attribute selectors in CSS?

Attribute selectors in CSS are a powerful way to select elements based on the presence or value of their attributes. Instead of selecting elements based on their type, class, or ID, attribute selectors target elements based on their attributes, such as href, type, data-*, etc.

Here are the different types of attribute selectors available in CSS:

1. Presence and Value Attribute Selectors

   • [attr]: This selects all elements with the specified attribute, regardless of its value.
   • [attr=value]: This selects all elements with the specified attribute and corresponding value.

2. Substring Value Attribute Selectors

   • [attr^=value]: This selects all elements whose attribute value begins with the specified value.
   • [attr$=value]: This selects all elements whose attribute value ends with the specified value.
   • [attr*=value]: This selects all elements whose attribute value contains the specified value anywhere.

3. Prefix-Matched Attribute Selectors

   • [attr|=value]: This selects all elements with the specified attribute value either exactly equal to the given value or starting with that value followed by a hyphen (used primarily for language subcode matches, like en-US, en-GB).

4. Attribute Selectors with Specificity

   • [attr~=value]: This selects all elements with the specified attribute whose value is a whitespace-separated list of words, one of which is exactly 'value'.

5. Case-Sensitivity Attribute Selectors

   • [attr=value i]: This selects all elements with the specified attribute and value, regardless of case. The i at the end signals case-insensitive matching.
   • [attr=value s]: This selects all elements with the specified attribute and value with case sensitivity.

Below are some examples of using attribute selectors in CSS:

/* Selects any element with a 'title' attribute */
[title] {
  color: blue;
}

/* Selects input elements with a 'type' attribute equal to 'text' */
input[type="text"] {
  background-color: yellow;
}

/* Selects all elements with a 'data-category' attribute starting with 'news' */
[data-category^="news"] {
  font-weight: bold;
}

/* Selects all elements with a 'href' attribute ending in '.pdf' */
a[href$=".pdf"] {
  font-style: italic;
}

/* Selects any element with a 'class' attribute containing the word 'important' */
[class~="important"] {
  color: red;
}

/* Selects all elements with a 'src' attribute containing 'avatar' regardless of case */
img[src*="avatar" i] {
  border: 2px solid green;
}

Attribute selectors can be combined with other selectors to create more specific rules. For example, you can combine an attribute selector with a class selector to apply styles to elements that have a certain class and a specific attribute value.

Keep in mind that attribute selectors can have a performance impact, especially when used extensively. They are generally slower than class or ID selectors, as they require more processing to determine which elements match the criteria. However, for many applications, this performance difference is negligible and should not be a concern unless dealing with very large or complex documents.