CSS Pseudo-Elements Syntax

Styling of pseudo-elements must be declared with :: before the element in question for one bad but necessary reason.

Post meta:

The difference

:—a single colon tells it’s a pseudo-class of an element.

::—a double colon says it’s a pseudo-element of an element.

My opinion

Since most browsers allows developers to choose between a single or a double colon for the first ‘generation’ of pseudo-elements, remembering the distinction between pseudo-class and pseudo-element syntax wasn’t needed. It gives an unnecessary additional mental load on developers.

But not anymore

New pseudo-elements are not implemented to be stylable by a single colon (in all browsers?), e.g. ::placeholder.

Resources