Menu

Pseudo classes vs pseudo elements

Published on by Hidde de Vries in notes

Something I thought I knew, but found out this week that I did not: the exact difference between pseudo classes and pseudo elements in CSS.

Pseudo classes let you style an element based on its state, says MDN (:checked, :valid, :disabled). This also implicates that they refer to an existing element: something that is already in the DOM available to style.

As a rule of thumb, what a pseudo class offers, you could have achieved with a classname. Not that that would be very practical – for most pseudo classes you would need to detect some stuff with JavaScript to work out the state and add that class; so yay CSS for providing this!

Pseudo elements let you style things that are not actually elements. They can be parts of existing elements (::first-letter, ::first-line), including parts that exist temporarily (::selection). Generated content also falls within the pseudo elements bracket (::before, ::after).

Rachel andrew Rachel Andrew said it beautifully at CSS Day 2017: “The more I know about CSS, the more I realise I don’t know” (photo: Bernardo Baquero)

Thanks Krijn for pointing me to this.

Comments & mentions (2)

Iain 22 Jun 2017 07:57:42

Good to know, thanks for pointing it out :)

Thing I learned not that long ago, they also differ in specificity: https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity

Roel Van Gils 26 Jun 2017 09:05:15

That’s a very clear explanation. I kinda knew this (from experience), but it’s the frist time you made me really think about the actual difference :)

Leave a comment
Posted a response to this?

This website uses Webmentions. You can manually notify me if you have posted a response, by entering the URL below.