Both pseudo-classes and pseudo-elements can be very confusing for CSS beginners. However, once you learn more about them, they are easy to apply and very useful! In this tutorial, we look at both pseudo-classes and pseudo-elements, compare their differences, and learn how to apply them to a web page. If you are just starting with CSS, I recommend going to the beginniners of this CSS for Beginners playlist: ruclips.net/p/PL0Zuz27SZ-6Mx9fd9elt80G1bPcySmWit
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"?
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)🎉
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?
I would need to go back and review to give you a specific fix, but in general, you are correct that z-index will impact what is on top. Apply a larger number value to whatever you want on top.
I previously used the VS Code extension Bracket Pair Colorizer 2, but now, it has native support in VS Code with no extension needed - and that is what you see in this video. Link: digitaldrummerj.me/vscode-bracket-pair-colorization/
Both pseudo-classes and pseudo-elements can be very confusing for CSS beginners. However, once you learn more about them, they are easy to apply and very useful! In this tutorial, we look at both pseudo-classes and pseudo-elements, compare their differences, and learn how to apply them to a web page. If you are just starting with CSS, I recommend going to the beginniners of this CSS for Beginners playlist: ruclips.net/p/PL0Zuz27SZ-6Mx9fd9elt80G1bPcySmWit
Thanks so much Dave. You actually cleared the confusion that I have been battling with
Glad to hear it, Jude! 💯
Always inspiring and may I even add, thrilling, watching your videos. Something new, and helpful always. Thanks, Gray.
Thank you for the kind words, Adolf! 🙏💯
Thank you for another video-lesson!
You're welcome! 💯
Hi Dave can you kindly cover the ::before and ::after pseudo elements, love the tutorials keep it up :)!!
Hi Mohamed - I do cover both of those pseudo elements in this video 💯
@@DaveGrayTeachesCode You are amazing!!! my apologies only saw the chapter names 😔
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"?
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)🎉
You're so kind, Ahmad 🙏 Thank you for joining me on this journey, my friend! 🚀
@@DaveGrayTeachesCode My pleasure my friend,
you're so generous to put all this good stuff for free.
@@ahmad-murery are you from Pakistan
@@homail227 No, I'm from Syria
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?
I would need to go back and review to give you a specific fix, but in general, you are correct that z-index will impact what is on top. Apply a larger number value to whatever you want on top.
Is it allowed to replace :is(a:hover, a:focus) with a:is(:hover, :focus) to make it even shorter?
Yes, that is a good way to do it! 💯
Thanks for the video! Can I ask which extension you use for the bracket line highlight??
I previously used the VS Code extension Bracket Pair Colorizer 2, but now, it has native support in VS Code with no extension needed - and that is what you see in this video. Link: digitaldrummerj.me/vscode-bracket-pair-colorization/
Can you please upload a react native course for beginners ❤️
I want to do this in the future, and thank you for the request! 🙏🚀
🎉
400th like 😀