CSS Regex selector – Using Regular Expression in CSS

Just like JQuery, CSS also offer a great way to filter out elements with selectors using Regular Expressions.

Selecting on  Attribute and value

[att=str] :- attribute value is exactly matching to str

[att*=str] :-  attribute value contains str – value can contain str anywhere either in middle or at end.

[att^=str] :- attribute value starting with str

[att$=str] :- attribute value ends with str

[att] :-  Elements which contain attribute att with any value

Example:

Applying CSS with Pseudo-class :not

This quite interesting using :not selector to filter out on element properties. Using not selector you can distinguish them from other elements. In this selector also you can use regular expressions to find your elements.

For example:

1 Comment

  1. So where’s the regex part? I don’t see how to apply e.g. the regex rule /n\d+/ here. There is no regex selector like [id^=”n\d+”].

Leave a Reply

Your email address will not be published. Required fields are marked *