Skip to content

Regexp Match Selector

Tommy Hodgins edited this page Dec 13, 2019 · 3 revisions

This pseudo-class-style selector allows CSS authors to specify a regular expression to match when targeting elements on a page.

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

Usage

Suppose you had three list items:

<li>Chocolate Truffle
<li>Raspberry Trifle
<li>Chocolate Log

You could write a selector to target anything that looks like Truffle/Trifle with the regex:

li:--regexp-match(Tr[ui]ff?le) {
  color: lime;
}