CSS Attribute Hyphen-Prefix Selector

The CSS attribute hyphen-prefix selector selects elements whose specified attribute value exactly matches a given value or begins with that value immediately followed by a hyphen. It uses the pipe-equals operator (|=) between the attribute name and value.

Syntax

The attribute hyphen-prefix selector uses the pipe-equals operator (|=) to match an exact value or a value followed immediately by a hyphen:

[attribute|="value"] {
  property: value;
}

For example, the following selector matches elements whose lang attribute is en or begins with en-:

[lang|="en"] {
  color: #0088cc;
}

How the Attribute Hyphen-Prefix Selector Works

The |= operator matches an attribute when its value is exactly equal to the specified value or begins with the specified value followed immediately by a hyphen.

[lang|="en"] {
  background-color: #d8f1fc;
}

The selector matches both of the following elements:

<p lang="en">English content</p>
<p lang="en-US">U.S. English content</p>

Both values match because the first is exactly en and the second begins with en-.

Hyphen-Prefix Matching

The hyphen is significant when the attribute value is longer than the specified value. Text that merely begins with the same characters does not match unless the next character is a hyphen.

[data-category|="news"] {
  color: #0088cc;
}

This selector matches data-category="news" and data-category="news-local". It does not match data-category="newsletter", data-category="news local", or data-category="local-news".

This behavior differs from the begins with selector (^=), which matches any attribute value that begins with the specified sequence of characters.

Case Sensitivity

Whether an attribute value is matched case-sensitively can depend on the document language and the attribute being selected. The i and s flags can explicitly control ASCII case sensitivity for the value comparison.

[data-category|="news" i] {
  color: #0088cc;
}
[data-category|="news" s] {
  font-weight: 600;
}

The i flag makes the value comparison ASCII case-insensitive, while the s flag makes the comparison case-sensitive.

Combining with Other Selectors

The attribute hyphen-prefix selector can be combined with a type selector to restrict the match to a particular HTML element.

p[lang|="en"] {
  color: #0088cc;
}

This selector matches <p> elements whose lang attribute is en or begins with en-.

It can also be combined with classes, IDs, pseudo-classes, and other selectors:

.article[data-category|="news"] {
  font-weight: 600;
}
a[hreflang|="en"]:hover {
  text-decoration: underline;
}

Specificity

An attribute hyphen-prefix selector contributes 0-1-0 to a selector's specificity, the same as other attribute selectors.

Selector	Specificity
`[lang\|="en"]`	`0-1-0`
`p[lang\|="en"]`	`0-1-1`
`.article[data-category\|="news"]`	`0-2-0`
`#content [lang\|="en"]`	`1-1-0`

Attribute Hyphen-Prefix Selector Example

The following example uses [data-category|="news"] to select elements whose data-category value is exactly news or begins with news-. A value such as newsletter does not match.

[data-category|="news"] {
  background-color: #d8f1fc;
  color: #0088cc;
  font-weight: 600;
}

Play in Editor

Other attribute selectors provide different ways to match attribute values:

Specifications

The attribute hyphen-prefix selector is defined in the Selectors Level 4 specification.

CSS Attribute Hyphen-Prefix Selector