CSS [attr^="..."] Starts-With Attribute Selector

The ^= Operator

The starts-with attribute selector matches elements whose given attribute value begins with the supplied substring. The match is case-sensitive by default.

[href^="https://"] { /* secure links */ }
[href^="mailto:"]  { /* email links */ }
[href^="tel:"]     { /* phone links */ }

Protocol-Specific Link Styling

A common pattern is to display an icon based on the link's scheme:

a[href^="https://"]::before { content: "🔒 "; }
a[href^="mailto:"]::before { content: "✉️ "; }
a[href^="tel:"]::before    { content: "📞 "; }

This works without adding any classes to the markup — purely structural.

Prefix-Based BEM Modifiers

If your design system prefixes utility classes (.u-) or modifier classes (.is-), the starts-with selector lets you target the whole family:

[class^="u-"], [class*=" u-"] {
  /* All utility classes share a layer */
}

Note the [class*=" u-"] companion — [class^="u-"] only matches when the utility appears first in the class attribute string.

Language-Tag Targeting

[lang^="en"] { quotes: '"' '"' "'" "'"; }
[lang^="ja"] { quotes: '\300C' '\300D'; }  /* 「 」 */

This targets en, en-US, en-GB with one rule.

Specificity and Case

Specificity is (0, 1, 0) — same as a class. Add the i flag inside the brackets for case-insensitive matching: [href^="HTTPS://" i].

Performance

Modern browsers index attribute selectors well; there's no measurable cost compared to a class match in normal documents. Only avoid them on elements that are inserted and removed thousands of times per second.