Skip to content

String Match Selector

Tommy Hodgins edited this page Dec 12, 2019 · 2 revisions

This pseudo-class-style selector allows CSS authors to specify a string of text content to match when targeting elements on a page.

<selector>:--string-match(<string>) { <list of declarations> }
  • <selector> is a CSS selector of tags to consider
  • <string> is a string to match in text content of each tag matching the selector

Usage

Suppose you had two paragraphs:

<p>This is the intro</p>
<p>This is the next paragraph.</p>

You could write a selector to target the first paragraph because it contains the text intro:

p:--string-match("intro") {
  background: lime;
}