paazmaya.fi

The Website of Juga Paazmaya | Stories about web development, hardware prototyping, and education

Fixing semantics for CSS pseudo element selectors

Pseudo elements and pseudo selectors in CSS can be differentiated by using different number of colons, while both will continue to work with single colon, better semantics are achieved by using two where appropiate.

Pseudo elements and pseudo selectors in CSS can be differentiated by using different numbers of : (colons), 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 an 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 support for IE8, as can be seen via the browser support table at the Mozilla Developer site.

More about regular expressions, learn in 55 minutes.