The difference between : vs :: in CSS, or pseudo-classes vs pseudo-elements

DanielFebruary 4, 2023June 22, 2023

Is there a difference between writing something such as p:suff_here vs writing something like p::suff_here?

The answer is yes. In the first case the single colon : refers to a CSS pseudo-class, while double colon :: refers to a pseudo-element.

Then what is the difference between CSS pseudo classes and CSS pseudo elements? Well:

• the pseudo-classes are referring to a specific SITUATION in which the targeted element can be. Something must happen so that the pseudo-class becomes active. For example: hovering an element with the mouse, the element has a given class or a link was visited.
• while the pseudo-elements refer to a specific artificial PART of the targeted element. For example the first line or letter in a paragraph, or the selected text. In a given selector rule, you can have just one pseudo-element.

Note that we also have functional pseudo-classes or some pseudo-elements that will take a list of arguments as parameters:

/* pseudo class */
p:is(.main, .second) {}

/* pseudo element */
p::part(table) {}

Can I use : instead of :: ?

Given that the distinction between pseudo-classes and pseudo-elements was not present in older versions of the W3C spec, most browsers support both syntaxes for the original pseudo-elements.

This means that for some pseudo-elements, both the el:my_pseudo_element and el::my_pseudo_element will work.

However, the general rule is to use : for pseudo-classes and :: for pseudo-elements.

What about the specificity of pseudo-elements vs pseudo-classes?

Most of the pseudo-elements and pseudo-classes have an equal specificity of 10 points. The same as a normal class selector.

But there are exceptions to this rule. For example, the functional pseudo-class is() takes the highest specificity from the given selector list, while where() has a specificity of zero.