JavaScript: parsing CSS selectors with regular expressions

CSS selectors fall into several categories. Each category can be actually parsed with JavaScript and regular expressions. In this post I will show you several useful regular expressions used to match CSS selectors taken from the CSSUtilities library.

Single pseudo-element

REGEX_SINGLE_PSEUDO_ELEMENT = /[:]{1,2}(?:first\-(letter|line)|before|after|selection|value|choices|repeat\-(item|index)|outside|alternate|(line\-)?marker|slot\([_a-z0-9\-\+\.\\]*\))/i;

Pseudo-elements

REGEX_PSEUDO_ELEMENTS = /([:]{1,2}(?:first\-(letter|line)|before|after|selection|value|choices|repeat\-(item|index)|outside|alternate|(line\-)?marker|slot\([_a-z0-9\-\+\.\\]*\)))/ig;

Pseudo-classes (except :not() )

REGEX_PSEUDO_CLASSES_EXCEPT_NOT = /([:](?:(link|visited|active|hover|focus|lang|root|empty|target|enabled|disabled|checked|default|valid|invalid|required|optional)|((in|out\-of)\-range)|(read\-(only|write))|(first|last|only|nth)(\-last)?\-(child|of\-type))(?:\([_a-z0-9\-\+\.\\]*\))?)/ig;

Attribute selectors

REGEX_ATTR_SELECTORS = /(\[\s*[_a-z0-9-:\.\|\\]+\s*(?:[~\|\*\^\$]?=\s*[\"\'][^\"\']*[\"\'])?\s*\])/ig;

ID selectors

REGEX_ID_SELECTORS = /(#[a-z]+[_a-z0-9-:\\]*)/ig;

Class selectors

REGEX_CLASS_SELECTORS = /(\.[_a-z]+[_a-z0-9-:\\]*)/ig;

!important rule

IMPORTANT_RULE = /\!\s*important\s*$/i;