The [attribute|=value] selector is used to match elements whose specified attribute value is either exactly equal to the given value or starts with that value followed by a hyphen (-). This selector is most commonly associated with language and locale-based attributes, such as lang, where values often use hyphen-separated formats like en, en-US, or fr-CA.

This selector is especially useful when working with standardized attribute patterns where a base value may have regional or contextual variations. For example, when targeting content written in English, using [lang|="en"] will match elements with lang="en" as well as lang="en-US", lang="en-GB", or any other hyphenated extension. This makes it ideal for internationalization and accessibility-related styling without needing multiple selectors.

Unlike the ~= selector, which matches whole space-separated words, or the ^= selector, which matches any value that starts with a string, [attribute|=value] is more precise. It only matches the exact value or that value followed immediately by a hyphen, making it safer and more predictable when working with structured attribute values.

A common real-world use case is styling elements based on the document language:

<p lang="en">Hello</p>
<p lang="en-US">Howdy</p>
<p lang="fr">Bonjour</p>

[lang|="en"] {
  font-style: italic;
}

In this example, both English paragraphs will be styled, while the French one will not.

This selector is also frequently combined with HTML attributes such as html, p, or span to scope language-specific or region-specific content more precisely. It can also work alongside CSS properties like font-style or font-family to improve readability and localization.

Overall, the [attribute|=value] selector is a powerful yet narrowly focused tool that excels in scenarios where structured, hyphenated attribute values are used. It helps keep styles clean, predictable, and semantically meaningful - especially in multilingual or standards-based documents.