When reading CSS code, we sometimes see code using :before
and other times with ::before
(same for ::after
).
Is there a difference between the 2 notations? Is one correct?
A bit of history
In CSS2, the syntax used at the time was :before
. This was confusing because CSS also had selectors like :hover
, but they both had different semantic meanings.
So in Selectors Level 3, they decided to change the syntax for :before
to ::before
(and for legacy reasons, we can still use :before
, but it is now deprecated).
The :
notation isnβt deprecated as a whole, instead the old syntax was split into two:
-
:
now represents pseudo-classes (and is still valid for:hover
for instance), -
::
represents pseudo-elements (and should be used for::before
).
:pseudo-class
Pseudo-classes represent variations of a state of an element.
When the condition is satisfied, the whole element is selected.
A CSS pseudo-class is a keyword added to a selector that specifies a special state of the selected element(s).
Example
-
:hover
matches an element on hover -
:not(p)
matches an element if it's not ap
-
:last-of-type
matches an element that is the last of its siblings, and also matches a certain type selector.
See the full list in MDN
::pseudo-element
On the other hand, pseudo-elements are parts of the original element. They represent fake HTML nodes within the selected element.
A CSS pseudo-element is a keyword added to a selector that lets you style a specific part of the selected element(s).
Example
-
::before
corresponds to a slot just before this element, -
::first-line
selects the first line in the current element, -
::first-letter
retrieves the very first letter of the element.
See the full list in MDN
Top comments (1)
This is the simplest and clearest explanation I have ever seen for these two css selector modifiers.
Meta-comment: it is too bad that the highest-quality Web developer help is scattered across so many, many websites (Stack Overflow, CSS-Tricks.com, dev.to, MDN, .Gists, ..). And some of those sites are a mixture of excellent and terrible help.