CSS Attribute Begins With Selector

The CSS attribute begins with selector selects elements whose specified attribute value begins with a particular sequence of characters. It uses the caret-equals operator (^=) between the attribute name and value.

Syntax

The attribute begins with selector uses the caret-equals operator (^=) to match an attribute value that begins with the specified text:

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

For example, the following selector matches links whose href attribute begins with https://:

a[href^="https://"] {
  color: #0088cc;
}

How the Attribute Begins With Selector Works

The ^= operator compares the beginning of an attribute value with the specified sequence of characters. The remaining characters in the attribute value do not need to match.

[data-category^="news"] {
  background-color: #d8f1fc;
}

The selector matches each of the following elements because their data-category values begin with news:

<p data-category="news">News</p>
<p data-category="news-local">Local news</p>
<p data-category="newsletter">Newsletter</p>

Prefix Matching

The specified text only needs to appear at the beginning of the attribute value. It does not need to be a complete word or be followed by a particular character.

[data-file^="image"] {
  color: #0088cc;
}

This selector matches values such as image, image-large, and images/photo.jpg. It does not match a value such as thumbnail-image because image does not appear at the beginning.

This differs from the hyphen-prefix selector (|=), which requires either an exact match or the specified value immediately followed by a hyphen.

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 begins with selector can be combined with a type selector to restrict the match to a particular HTML element.

a[href^="https://"] {
  color: #0088cc;
}

This selector matches <a> elements whose href attribute begins with https://.

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

.item[data-category^="news"] {
  font-weight: 600;
}
a[href^="https://"]:hover {
  text-decoration: underline;
}

Specificity

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

Selector	Specificity
`[data-category^="news"]`	`0-1-0`
`a[href^="https://"]`	`0-1-1`
`.item[data-category^="news"]`	`0-2-0`
`#content [data-category^="news"]`	`1-1-0`

Attribute Begins With Selector Example

The following example uses [data-category^="news"] to select elements whose data-category value begins with news. The final value does not begin with news and is not selected.

[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 begins with selector is defined in the Selectors Level 4 specification.

CSS Attribute Begins With Selector