This content originally appeared on Hidde's blog and was authored by Hidde de Vries
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 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.
This content originally appeared on Hidde's blog and was authored by Hidde de Vries
Hidde de Vries | Sciencx (2017-06-22T00:00:00+00:00) Pseudo classes vs pseudo elements. Retrieved from https://www.scien.cx/2017/06/22/pseudo-classes-vs-pseudo-elements/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.