CSS Selectors - beyond the very basics

Early on, we learn about element, class, and ID selectors, but there are so many others, so in this video I’m taking a look at the ones just beyond those basics ones, with a dive into descendant selectors, a few pseudo-classes and pseudo-elements, and a few other useful selectors 🙂
🔗 Links
✅ The 6 most important CSS concepts for beginners: • The 6 most important C...
✅ The basic CSS selectors: • HTML & CSS for Beginne...
✅ ::before and ::after deep dive: • Before and After pseud...
⌚ Timestamps
00:00 - Introduction
00:55 - The descendant selector and direct child combinator
06:55 - :hover and :focus
08:00 - :first-child
09:31 - :nth-child and :nth-of-type
10:40 - :not()
12:22 - ::before and ::after
12:52 - ::selection
14:12 - ::marker
16:03 - attribute selectors
#css
--
Come hang out with other dev's in my Discord Community
💬 / discord
Keep up to date with everything I'm up to
✉ www.kevinpowell.co/newsletter
Come hang out with me live every Monday on Twitch!
📺 / kevinpowellcss
---
Help support my channel
👨‍🎓 Get a course: www.kevinpowell.co/courses
👕 Buy a shirt: teespring.com/stores/making-t...
💖 Support me on Patreon: / kevinpowell
---
My editor: VS Code - code.visualstudio.com/
---
I'm on some other places on the internet too!
If you'd like a behind the scenes and previews of what's coming up on my KZread channel, make sure to follow me on Instagram and Twitter.
Twitter: / kevinjpowell
Codepen: codepen.io/kevinpowell/
Github: github.com/kevin-powell
---
And whatever you do, don't forget to keep on making your corner of the internet just a little bit more awesome!

Пікірлер: 62

  • @egonzdev
    @egonzdev Жыл бұрын

    This kind of lessons is why he is the true CSS KING👑

  • @georgesaitdev
    @georgesaitdev Жыл бұрын

    Wow, you have such a talent for structuring a lesson / telling a story. Combine this with your absolute love for CSS and you'll get to the 1mln subs this year no doubt! Thanks Kevin!

  • @koigorfogbawa8238
    @koigorfogbawa8238 Жыл бұрын

    I hardly use stack overflow...because I know Powell definitely would have a video on the CSS problem I'm faced with

  • @kylevandeusen
    @kylevandeusen Жыл бұрын

    Great breakdown! Thanks, Kevin!

  • @securefolder4548
    @securefolder4548 Жыл бұрын

    I used to love developing and designing but these days I've lost interest on everything in my life everything is going downhill seeing u upload a tutorial gave me back the motivation I was lacking ❤ thank you

  • @KevinPowell

    @KevinPowell

    Жыл бұрын

    Glad I can help motivate you a bit! Sometimes when things become a grind, building out a nice, simple and small project can be a fun way to get into a little groove and remind yourself that it can be fun 😊

  • @Pluvo2for1
    @Pluvo2for1 Жыл бұрын

    So many gems in this video. Thank you.

  • @suruemmanuel3351
    @suruemmanuel3351 Жыл бұрын

    Wow, thanks alot. Really been looking for something like this. 👍

  • @CirTap
    @CirTap Жыл бұрын

    Attribute selectors on ID are very useful, as they lower the specificity: [id="mainmenu"] vs #mainmenu, 0,1,0 vs 1,0,0 The former (0,1,0) is easy to overwrite with another single class (0,1,0) OR pseudo selector (0,1,0) and keeps you from fighting a specificity war if an id (1,0,0) is involved. Attribute selectors also provide means to use only parts of an attribute's value. If you're a CSS novice: Use IDs as Javascript hooks only (or use querySelector) but avoid them for general purpose styling unless you're very aware of the consequences (good and bad ones.) this has on the cascade or even want to "make a point" in your style sheet and force *some* style properties to be harder to overwrite (like many CSS Frameworks do). Whenever you find yourself using an ID selector because they're convenient or to apply simple *cosmetic styles* (colours, font) or change other inheriting properties, rethink your choice! Rather use the [id] attribute selector variance. If that's not possible find some other unique node type and attribute combinations to "identify" the element rather than slapping an id attribute on it in your html. The "nth" pseudo classes are very powerful and you can always combine them with other attribute selectors to narrow things down while keeping a sane level (0,n,m) on the selector's specificity value: element name, class name, its position within its parent or a set, the data and ARIA attributes often produce an equally unique *identity* without raising the specificity above 0,2,n or 0,3,n Happy coding.

  • @brianm3160
    @brianm3160 Жыл бұрын

    OMG this is Exactly what I needed!

  • @ifix-knust-gh2504
    @ifix-knust-gh2504 Жыл бұрын

    thank you. YOU KEEP DELIVERING TO MY EXPECTATION.✌✌

  • @unsalad
    @unsalad Жыл бұрын

    Perfect! I can supplement this along with the Odin Project! (In the Intermediate HTML and CSS section)

  • @buntykumar9008
    @buntykumar9008 Жыл бұрын

    Awesome and informative as always ..👍👍 I learned 2n & 3n and :not concept .

  • @user-wr2ky2ec7m
    @user-wr2ky2ec7m9 ай бұрын

    Thank you so much

  • @phucnguyen0110
    @phucnguyen0110 Жыл бұрын

    Now THIS is something I want to learn, thanks Kevin!

  • @abrahamjohnson2018
    @abrahamjohnson2018 Жыл бұрын

    From Nigeria, your videos have my life a lot easier

  • @DuneNobleman
    @DuneNobleman Жыл бұрын

    Thanks Kevin...🔥

  • @ShaunLevett
    @ShaunLevett Жыл бұрын

    :marker definitely needs more properties. I use it but often the bullet is positionally a bit off depending on the font and it’s tricky to line it up.

  • @zoro9888
    @zoro98888 ай бұрын

    Oh Kevin, you larned how to pronounce specificity.....😅I just came back to your awsome videos, cause a seson job, I'm glad that you are healthy and strong, keep up the good work, I appreciate it and I've learnt a lot from you, thanks!!!

  • @haidubogdan8712
    @haidubogdan8712 Жыл бұрын

    cool! ... I think nowadays we use "~" and "+" adjacent selector very often too.

  • @KevinPowell

    @KevinPowell

    Жыл бұрын

    I use + quite a bit for sure

  • @proteus1
    @proteus1 Жыл бұрын

    Could you do a video on site maps in consol as most of my 6 pages aren't found at all except one. Great channel 👏

  • @BaileyPoint
    @BaileyPoint Жыл бұрын

    I wish there was something like an "nth-of-selector", or "nth-of-match", where we could target elements by specific selectors, rather than just the element type. Imagine the possibilities!

  • @BigBadTubaDudeCRA
    @BigBadTubaDudeCRA Жыл бұрын

    Thanks again for the great video! Is it possible to target the ::selection for options if a select input? option:: selection and select: selection doesn't work

  • @Duulketariakas
    @Duulketariakas Жыл бұрын

    Waited for some more difficult attribute selectors like ~= or |=

  • @ZackPyle
    @ZackPyle Жыл бұрын

    Would have been great to include things like ^ in the attribute section!

  • @MariaRodriguez-bp1tl
    @MariaRodriguez-bp1tl6 күн бұрын

    Id love to be able to use the emojis for my lists, is there a video where you explain how to do this? if not I'd love to suggest that please 😁

  • @harmarize
    @harmarize Жыл бұрын

    Man i love these things.. problem is, I always forget about them when I need them and and up creating a class instead :( even odd I didnt know about, nor first-of-type which would have been really useful a few times

  • @dimensionalpotential
    @dimensionalpotential Жыл бұрын

    You could have mentioned of the other comparison operators for attributes [attr^=value] [attr|=value] [attr$=value] , maybe elude to the nuanced of [attr~=value] vs [attr*=value]

  • @makingtheweb6620
    @makingtheweb6620 Жыл бұрын

    I clicked the thumbs up button 3 times. 👍 👍 👍.

  • @mmuralikrishna2881
    @mmuralikrishna2881 Жыл бұрын

    Hi Kevin.. I want learn from you about input[tel] number backspace delete number. Could you please an video

  • @Keithen
    @Keithen Жыл бұрын

    Is it possible to set an li::marker as an SVG?

  • @odysseaskorelides7897
    @odysseaskorelides7897 Жыл бұрын

    Just realized how Kevin Powell's groupie i am, and you know what? I'm proud for it.

  • @iamavegetable1936
    @iamavegetable1936 Жыл бұрын

    Thanks you a lot Kevin, for your great videos and so for your work. By the way, can you give me the name of your 'serif' font when you switch the 'font-family' at 5:00 of this video ? Thank in advance to make internet, a little bit, more ; awesome :)

  • @KevinPowell

    @KevinPowell

    Жыл бұрын

    It's the system default, probably Times New Roman?

  • @Trazynn
    @Trazynn Жыл бұрын

    A tutorial on styled React components would be welcome.

  • @KevinPowell

    @KevinPowell

    Жыл бұрын

    I'm not the right person for React videos, I haven't touched it in like 2 years :D

  • @mirimjam
    @mirimjam Жыл бұрын

    Attribute selectors are also very interesting for JS purposes with document.querySelector(). You could for example use it to select all insecure links on a page with a selector like 'a[href=""]' .I think the different options would make for an interesting seperate video.

  • @tmbuff77
    @tmbuff77 Жыл бұрын

    What if I want to style an element on a specific page; say I want to style my "header" on the "index" page, but want to leave the others alone. Can I do that using one CSS document?

  • @abdullahialhassan3700
    @abdullahialhassan3700 Жыл бұрын

    i like the part u always say if u are not getting too crazy 😂

  • @saimurali031
    @saimurali0316 ай бұрын

    Anyone pls share the link of the starter code base for this lecture.??

  • @abc-dx7nm
    @abc-dx7nm Жыл бұрын

    Plz tell us about newest css awesome things and also tell us about advanced feature of css

  • @XMattingly
    @XMattingly Жыл бұрын

    Fun fact: the attribute selector is a way to override !important, if you inherited someone’s convoluted nightmare code and you don’t have time/resources to rewrite their entire style sheet.

  • @AnkitTannaVlogs
    @AnkitTannaVlogs Жыл бұрын

    Where can I get the code to practice?

  • @abdullahialhassan3700
    @abdullahialhassan3700 Жыл бұрын

    you still my favourite 💝 from 🇳🇬

  • @Randomguy48279xyz
    @Randomguy48279xyz Жыл бұрын

    👍

  • @TechBarAmaBaro4810
    @TechBarAmaBaro4810 Жыл бұрын

    Is there any other use of HTML5 besides of Web development

  • @zinodavidoff5953
    @zinodavidoff5953 Жыл бұрын

    The 👑

  • @aliirtaza6936
    @aliirtaza6936 Жыл бұрын

    Sir what is this (dark:bg-slate-800) in html class and how can we work with these types of classes??

  • @KevinPowell

    @KevinPowell

    Жыл бұрын

    Looks like Tailwind to me, which is a utility class based CSS library

  • @aliirtaza6936

    @aliirtaza6936

    Жыл бұрын

    ​@@KevinPowell yes sir this is tailwind CSS, but I want to learn these type of techniques so I can work with my own CSS and these classes... please made a video on this

  • @JimKernix
    @JimKernix Жыл бұрын

    You skipped adjacent sibling combinator - do you not use that anymore?

  • @islem9958
    @islem995811 ай бұрын

    There's something confusing me is how even and odd work ? I don't really get it

  • @Keithen
    @Keithen Жыл бұрын

    Could you make a video on email development with CSS and HTML?

  • @KevinPowell

    @KevinPowell

    Жыл бұрын

    It's very different and not something I have experience with. I do have an interview on my channel with an email designer though, which includes a ton of resources

  • @marufqureshi5268
    @marufqureshi5268 Жыл бұрын

    King Kevin

  • @blastjohney
    @blastjohney Жыл бұрын

    Yeah I’m the first

  • @gandalfrj9364
    @gandalfrj9364 Жыл бұрын

    If you could share the HTML code , so we can practice while watching. 😢

  • @bachforever372
    @bachforever372 Жыл бұрын

    first

  • @reddev8906
    @reddev8906 Жыл бұрын

    2^8 views