CSS Pseudo-Classes vs Pseudo-Elements | Pseudo-Selectors Tutorial

Показать описание

Learn CSS Pseudo-Classes vs Pseudo-Elements in this CSS Pseudo-Selectors tutorial for beginners. Both pseudo-classes and pseudo-elements are used as pseudo-selectors in CSS. Examples of each type of pseudo-selector are provided.

🚀 This lesson is part of a CSS for Beginners tutorial series playlist:

CSS Responsive Card Design | Mini-Project Tutorial for Beginners

(00:00) Intro
(00:05) Welcome
(00:26) Pseudo-Classes vs Pseudo-Elements
(01:38) Starter Code
(02:13) :active
(02:58) :is
(04:06) :any-link
(05:02) Specificity with :is and :where
(07:55) :target
(09:33) :not
(11:31) :nth-child
(13:30) Create a pseudo-element
(14:54) Emoji pseudo-elements
(15:22) Fancy quotes with ::before and ::after
(18:36) ::first-letter
(19:49) ::first-line

⚙ Web Dev Tools:

📚 References:

✅ Follow Me:

Was this tutorial about CSS Pseudo-Classes and Pseudo-Elements helpful? If so, please share. Let me know your thoughts in the comments.

#css #pseudo #classes

Рекомендации по теме

Комментарии

Thanks so much Dave. You actually cleared the confusion that I have been battling with

judeleon

Always inspiring and may I even add, thrilling, watching your videos. Something new, and helpful always. Thanks, Gray.

NedumEze

Hi Dave can you kindly cover the ::before and ::after pseudo elements, love the tutorials keep it up :)!!

mohamedabdelrazig

When you say .card p::before or .card p::after, am I right in my understanding that for pseudo-elements, their immediate parent are considered to be "p"?

andromilk

I wasn't aware of :is, :where and :any pseudo classes 🤦‍♂
the cool thing about :first-line pseudo element is that is always selects the first line even when it wraps to a multiple lines,

Thanks Dave, soon you'll hit the 50K subs, Congrats in advance (just in case I missed the event)🎉

ahmad-murery

Hey, Dave! I learn CSS from you. Amazing lessons. I like your teaching technique. I follow you on my VSCode and I noticed that paragraph and quotes go over the nav element if you scroll all the way down. You can see it at the last seconds of this lesson. I suspect ::before and ::after have some kind of layer to them, something like z-index. Should we use something else to avoid this or make some change to nav?

vladimirshnyakin

Is it allowed to replace :is(a:hover, a:focus) with a:is(:hover, :focus) to make it even shorter?

stanislavaksenov

Can you please upload a react native course for beginners ❤️

morningstar

Thanks for the video! Can I ask which extension you use for the bracket line highlight??

min

CSS Pseudo-Classes vs Pseudo-Elements | Pseudo-Selectors Tutorial

Do you know the difference? pseudo-classes vs pseudo-elements

What is the difference between CSS pseudo class and element?

CSS Pseudo-elements :: in 100 Seconds

Learn CSS Pseudo Elements In 8 Minutes

Learn CSS pseudo-classes in 7 minutes! ☟

Exploring CSS Pseudo-Elements: Pseudo-Classes vs. Pseudo-Elements

CSS Pseudo-classes: in 100 Seconds

CSS Pseudo Classes vs Pseudo Elements Explained (with examples)

CSS Pseudo-Classes vs Pseudo-Elements | Pseudo-Selectors Tutorial

Pseudo Classes CSS , Pseudo Elements, ::before and ::after in CSS | Web Development Course #31

Pseudo-Classes vs Pseudo-Elements in CSS

Pseudo Class VS Pseudo Elements - Easy Explanation - Hindi

The new CSS pseudo-classes explained - :is() :where() :has()

CSS Pseudo Classes and Elements Explained | CSS Tutorial for Beginners | SimpliCode

Before and After pseudo elements explained - part one: how they work

HTML & CSS Crash Course Tutorial #9 - Pseudo Classes & Elements

Pseudo Classes vs Pseudo Elements

Pseudo class vs pseudo element in css in hindi

Learn CSS pseudo-elements in 5 minutes! ✔

Learn CSS Pseudo-Class vs Pseudo-Element Differences In 6 Minutes

Learn CSS pseudo elements in 4 minutes 🔎

Three fun uses for ::before and ::after

Learn Every CSS Selector In 20 Minutes

Pseudo classes CSS| Pseudo class selectors| Pseudo Pseudo classes in Telugu| CSS selectors #css