css - Attribute Selectors Part 2: Attribute Value Selectors

Attribute value selectors match elements based on their attribute values.

Types:

[attribute="value"] - Exact match.

[attribute~="value"] - Space-separated value.

[attribute|="value"] - Value with optional - suffix.

Examples:

Exact Match

[type="checkbox"] {

  accent-color: red;

}

<input type="checkbox">

<input type="radio">

<!-- Only the checkbox is styled -->

Space-Separated Match

[class~="featured"] {

  background-color: yellow;

}

<div class="featured article">Featured Content</div>

<div class="article">Regular Content</div>

<!-- Only the first div is highlighted -->

Value with - Prefix

[lang|="en"] {

  font-style: italic;

}

<p lang="en-us">English (US)</p>

<p lang="en-gb">English (UK)</p>

<p lang="fr">French</p>

<!-- Only the first two paragraphs are styled -->