TIL, CSS Pseudo Classes and Elements

Esraa Nasr - Aug 28 '23 - - Dev Community

Hey guy,
I'm Esraa a front-end developer, wife, and mom.
It’s been a long time since I wrote an article so excuse me for any mistakes.

Here’s what the difference between CSS pseudo-classes VS pseudo-elements

First of all I need to know What is a pseudo prefix reference for? a class or an element that is not real.
and How?
It's mean not in your HTML or part of your DOM.

There's examples for pseudo-classes helps to understand the difference

Pseudo-classes: used to target state
:hover
:active
:link
:target
:invalid
:valid

Example for :focus, and :focus-within

For more example Click here

Pseudo-elements: used to target specific part of element

::before
::after
::first-letter
:first-line
::selection

::first-letter

For more example Click here

and I read a useful JavaScript article about operators you can check it out here.

So let's share our knowledge and tell me what you learned today.

Here are my social links if you would like to follow.

Github: https://github.com/EsraaNasr92/
Twitter / X: https://twitter.com/Esraa_nasr92
Instgram: https://www.instagram.com/_esraaanasr/

I hope to publish my portfolio this week. Wish me luck

. . . . . . . . . . . . . .