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

[@aaronbell5994]

Nice distinction of not selecting before the but before the text within the at 2:43.

[@clevermissfox]

Had no idea ::before and ::after started with/works with one : colon. Very interesting ❤

[@t20sgrunt36]

Always good stuff Kevin. You're a treasure.

[@danisob3633]

he is mountains of gold inside a dragon's lair. the dragon would be css

[@t20sgrunt36]

@@danisob3633 Codepen is the dragonlance?

[@Yeasiin]

No Doubt he is a treasure

[@CarAudioInc]

You're one of the few webdev channels that goes in-depth with css which I love. I'm not saying that css is the answer for everything but a lot of times it is lol.

[@code_blizz]

I always search KZbin to look for your tutorials. is now becoming a reference video for me, thanks a lot

[@suzantamang2180]

i was just about google search difference between pseudo-classes and pseudo-elements and here comes kevin with solution.

[@jsega996]

Great explanations. I especially appreciate the way you combine conceptual knowledge with practical examples to solidify it.

[@giocaonguyen]

I didn't know why sometime I need to use : and ::, now I know it. Thank you for ur sharing!

[@djordjek3916]

Wow Kevin! I really like this video. Very clear explanation. I learned the difference between the two and how to explain where before and after pseudo-elements are injected in the page. All these can be something anyone could be asked on a technical part of the interview for the job, so thank you very much! 🙏👍

[@tanmay_gadge]

Thanks, this helped a lot.

[@ilostonjeopardy]

That was a really great point about screen readers and accessibility 00:04:00

[@matiinb]

Love your channel!

[@KevinPowell]

Thank you so much 😊

[@programmercouple]

Love your teaching style! Great video as usual! Thanks:)

[@randomuploaderguy]

Another useful video! I haven't watched the full video, but I have to ask; is there a current up-to-date list of pseudo classes and elements? Does this video go fully in-depth on all of them? If not, is there a video that fully goes in-depth on all of them? I've noticed that there seem to be ones that don't appear on Firefox's element inspector panel alongside focus and hover and such and I'd love a full knowledgebase of them all to reference.

[@sharbelzoghbi1638]

youre a legend. KZbin algo, please give me more of this. Ill also take a golden ferrari but whichever

[@GarebearluvsBMX]

you have a very healthy fiddle fig! I'm impressed. I hope mine grows up just as healthy. Thanks for the vid!

[@KevinPowell]

The trick is to get a fake one 🤣 - I'm in a basement with no natural light, so it does the trick, lol.

[@muhammadsiddiqui2244]

As always, your video made me "happy".

[@crimsonisland]

Haha, I just googled :: vs : css because I couldn't remember which was which. I am so bad a CSS. Thanks for this!

[@zachjensz]

: (That's the difference)

[@dailymeow3283]

4:31 i've learnt a new trick

[@kugi7786]

Thank you so much. It really helps a lot!!

[@mdkawsarislamyeasin4040]

I'm watching you video new a days. Now i subscribed and also pressed bell icon also Awsome Channel 🖤

[@TheCocoaDaddy]

Wow, I just learned something new! Do you have any videos on the difference between a pseudo-class that's referenced immediately after an element selector vs with a space between? For example: a:hover vs a :hover (hover might be a bad example :)). Thanks for posting this!

[@wolframzell6162]

a:hover would trigger if you hover over the , while a :hover would trigger on child elements of when hovering over them. Like with a normal class selector a space shows that its a child.

[@lukejagodzinski]

I do webdev for so many years and I didn't know that there is ::first-line and ::first-letter :) Btw. at 4:40 [attr*=value] is not "starts with" but "contains" :). Starts with is ^=.

[@GauravKumar-ue7nz]

Thank you Kevin

[@richardjoemartin]

Best explanation❤👏

[@nro337]

This is great! Thank you!

[@NNNedlog]

You always produce quality videos at the right time. A quick question: is it possible to manipulate pseudo-elements with JavaScript

[@KelseyThornton]

Nice explanation!

[@Zen-lz1hc]

Thank you Really cool video :)

[@johnsolly]

Thank you for this explanation!! I finally get it = )

[@aybak3k]

in short pseudo class is a special state of elements like hover and uses only one colon ":" pseudo element is like "first-line"

[@robertkovac7824]

Great video, came in handy for me.

[@AlThePal78]

I love your shirt I use codepen for making my own snipets myself

[@goodnewsjohn2482]

wow great one sir. can you do something about stacking context or do you have one already?

[@maulikthaker009]

good one kevin

[@commentmyideas4523]

Many psuedo. Come and go 👍👍👍

[@sonuyadav1103]

Thank you sir

[@danisob3633]

0:28 Oh no... its important and ive never wondered about it. im doomed D:

[@nitikaajay_vlog6712]

Sir please make a video on how to add a releted post coding in blogger

[@riajmazumder4434]

Please some video for javascript.

[@KevinPowell]

Lots of awesome JS teachers out there already! I'll cover it from time to time when needed for something, but not my focus :)

[@riajmazumder4434]

@@KevinPowell sir, I just only understand your content. Their content goes above my head. I felt lucky to get a teacher like you.

[@josephwong2832]

great video but you should have shown more code examples??

[@nitikaajay_vlog6712]

Related post coding in sidebar menu Related post coding in post

[@confidencekpodo7793]

how do you apply first of type to a content (post content) from a json file?

[@matthewgilarmo9297]

So, applying ::before and ::after to the box model, would the order be: margin, border, padding, ::before/::after, content? Am I thinking about that right?

[@KevinPowell]

well, the ::before and ::after are inside the content, technically. It's a little different too, as a border can be all 4 sides, a before or after squeezes in... well, before or after, heh. It's inside the content, and right before, or right after, whats in the HTML, if that makes sense.

[@matthewgilarmo9297]

@@KevinPowell it does! thank you! Also, saw you had a series on this after I made the comment - already started watching ... your content is always great and really helpful!

[@chhavimanichoubey9437]

just like recursion, it was confusing to me but now it isnt.

[@AfdhalAtiffTan]

Thanks

[@KevinPowell]

Thank you so much!

[@ajayshekhawat2292]

Good video

[@KevinPowell]

Thanks

[@ЯМолодец-ъ6ш]

Where is your telegram? I can't find a link. I mean group for your community, not personal)

[@saugatnepal5956]

Why :first-child is a pseudo class but ::first-letter is a pseudo element?

[@PoisonedPickle]

4:43 i had no idea i can only select external links :"

[@FarhanShaikhTheGreat]

Why don't you have caption in video ? Atleast English (auto generated) would be a good option

[@Mahdi.illusion]

someone please send kevin courses link for me i cant find him thank u

[@KevinPowell]

My courses? kevinpowell.co/courses 😊

[@WIBEDRILLMusic]

👌👌👌👌

[@EAGEEYE321]

#CODEPEN

[@KevinPowell]

It's in the links section of the description, if you're looking for it :)

[@margueritebainbridge9281]

No closed captioning, you talk really fast, I can not keep up. I leave here totaly confused as a beginner to CSS. Content for those familiar. I may come back later.

[@vertigoz]

I guess you'll get used to it, I hear him at 1,5x not a native speaker and get what he says... I speed it up, but I guess one can also speed it down

[@programmercouple]

Love your teaching style! Great video as usual! Thanks:)