Unlock the Power of CSS Attribute Selectors

When it comes to styling HTML elements, CSS attribute selectors are a game-changer. By targeting specific attributes and their values, you can apply styles with precision and ease. Let’s dive into the world of attribute selectors and explore their capabilities.

The Basics of Attribute Selectors

An attribute selector is denoted by square brackets [] and targets an HTML element based on its attributes. The basic syntax is [attr], where attr is the attribute name. This selector will match any element that has the specified attribute, regardless of its value.

[hreflang] {
  color: blue;
}

Matching Attributes with Specific Values

To target elements with specific attribute values, you can use the [attr="value"] syntax. This selector will only match elements whose attribute value exactly matches the specified value.

[hreflang="en"] {
  color: red;
}

Pattern Matching with Attribute Selectors

CSS provides several pattern matching attribute selectors that allow you to target elements based on their attribute values. These include:

• [attr^="value"]: Matches elements whose attribute value starts with the specified value.
• [attr$="value"]: Matches elements whose attribute value ends with the specified value.
• [attr*="value"]: Matches elements whose attribute value contains the specified value.
• [attr~="value"]: Matches elements whose attribute value is a space-separated list that includes the specified value.
• [attr|="value"]: Matches elements whose attribute value is either the specified value or starts with the specified value followed by a hyphen.

[hreflang^="en-"] {
  color: green;
}

Check out this interactive demo to see these attribute selectors in action.