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

⌚ 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

Keep up to date with everything I'm up to

Come hang out with me live every Monday on Twitch!

---

Help support my channel

---

---

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 YouTube channel, make sure to follow me on Instagram and Twitter.

---

And whatever you do, don't forget to keep on making your corner of the internet just a little bit more awesome!

[egonzdev]

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

[koigorfogbawa]

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

[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!

[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.

[securefolder]

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

[unsalad]

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

[Pluvofor]

So many gems in this video. Thank you.

[phucnguyen]

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

[suruemmanuel]

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

[buntykumar]

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

[abrahamjohnson]

From Nigeria, your videos have my life a lot easier

[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!

[haidubogdan]

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

[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.

[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]

[ifix_gh]

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

[zoro]

Oh Kevin, you larned how to pronounce 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!!!

[ZackPyle]

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

[danser_theplayer]

Kevin Powell, bringing CSS some social power.

[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="http://"]' .I think the different options would make for an interesting seperate video.