Pseudo classes vs pseudo elements
source link: https://hiddedevries.nl/en/blog/2017-06-22-pseudo-classes-vs-pseudo-elements
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
Pseudo classes vs pseudo elements
22 June 2017 ・ category: 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).
Thanks Krijn for pointing me to this.
Hidde de Vries (@hdv) is a freelance front-end and accessibility specialist in Rotterdam (NL), conference speaker and workshop teacher. Currently, he works for the W3C in the WAI team (views are his own). Previously he was at Mozilla, the Dutch government and various other organisations and businesses.
Comments & mentions (2)
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
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
Website
Occupation
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.
© 2007–2020 Hidde de Vries
NederlandsRecommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK