paazmaya.fi

The Website of Juga Paazmaya | Stories about Web Development, Japanese Martial Arts, Hardware prototyping and travelling

Fixing semantics for CSS pseudo element selectors

Pseudo elements and pseudo selectors in CSS can be differentiated by using different number of : (colon), as suggested in the related CSS3 specification module.

Regular expression for finding possible usages of single colons, such as :after and :before:

([^:])(:{1})(\bafter|before\b)

Replace with, thus using the three matched values with inserted additional colon:

$1:$2$3

The regular expression could be extended by adding all the pseudo elements defined in the specification, such as ::first-line and ::first-letter.

Essentially making this change will drop the support for IE8, as can be seen via browser support table at Mozilla Developer site.

More about regular expressions, learn in 55 minutes.