when to use pseudo-classes and when to use pseudo-elements selectors in CSS

Question

what i don't understand about these concepts is when should i use a pseudo-class selector like :before or :first-child and when to use a pseudo-element selector like ::before.

Note: CSS3 introduced the ::before notation (with two colons) to distinguish pseudo-classes from pseudo-elements. Browsers also accept :before, introduced in CSS2. - https://developer.mozilla.org/en-US/docs/Web/CSS/::before#syntax — A. Meshu, Nov 02 '21 at 11:50

score 1 · Accepted Answer · answered Nov 02 '21 at 11:52

The single colon syntax is an older implementation. In general, there are pseudo-elements :: & pseudo-classes :, and they are not identical. In this case though, browsers still support the outdated single-colon syntax.

This means that in your example with :before/::before, it will not make a difference to the outcome, but in general you should use the double colon syntax, because before & after are pseudo-elements, not pseudo-classes.

Read more on MDN.

score 0 · Answer 2 · answered Nov 02 '21 at 11:50

0

The ::before selector inserts something before the content of each selected element(s).

Use the content property to specify the content to insert.

/* CSS3 syntax */
::before

/* CSS2 syntax */
:before

More info here

answered Nov 02 '21 at 11:50

Andrew

572
6
29

when to use pseudo-classes and when to use pseudo-elements selectors in CSS

2 Answers2