Write less code with these 5 CSS tips

🔗 Links

⌚ Timestamps
00:00 - Introduction
00:43 - The problem with overly-generic rules
01:15 - Using [class] and :not[class]
02:50 - Selecting ranges of content
05:33 - Selecting all the elements except the one I’m interactive with
09:02 - Selecting the elements before or after a specific element
12:15 - Using nesting to style an element depending on context

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

[thornikejangveladze]

Nice use case for changing something on preceding siblings could be star rating module. Like when you hover on 4th star fill all the preceding stars.

[JacksonGreenMagic]

8:35 for dimming all the images except the one you’re hovering on, I think you can do the first approach with one selector and without using :has. You could just make it .showcase-list:hover img:not(:hover). Pretty similar to the second approach, but still without :has since some people don’t want to use it yet.

[AndyFairlie]

That first tip for lists with and without classes is genius

[andru]

As always, another great video! Thanks a lot for the info!

[mma]

I love the reverse nesting idea!! I never even thought about it ! Definitely going to try that one out

[aspizuwastaken]

.showcase-list:hover img:not(:hover) { opacity: .5; } would have been also worked I think for a single rule approach.

[moy]

Hey Kevin! I've been following your channel for years and I totally love your content! Recently I experimented with CSS-only performance improvements for rendering large lists, and found out that content-visibility: auto, contain: content and content-intrinsic-size provided the best performance improvements (in that order).

I'm planning to write a blog post around it in the future, vut thought that it would also be a good subject for you to cover in your channel.

[dzsuvi]

Good ones. Learning something every day. Thanks Kevin!

[vinodkumarpujar]

Thank you for knowledge sharing Kevin.

[Kapcash]

The "all previous" and "all after" selectors are useful for calendars, so you can target all days before the one you are hovering (like disabling them or whatever)!

[YacineBougera]

I watched all your last year videos ...I literally learner a lot...thanks

[RasmusSchultz]

that showcase hover effect is nice! I simplified it a bit:

.showcase-list:hover img:not(:hover) {
opacity: .5;
}

that is, instead of :has(img:hover) on the parent selector, just use :hover - simpler and actually looks better, since the whole list of images won't flicker in and out when you hover over the gaps between the items. 💁‍♂

[flavioczuk]

A simple idea to use on 1:18 is a simple start rating system for a product, ecommerce or something. Very handy for the user to rate something from 1-5 for example.

[madiko]

Kudos to your T-Shirt designer. This is hillarious! Love it.

[Nusamaxa]

I believe this video is one of the most helpful videos you ever did 😊✌

[solvedfyi]

This is exactly the type of video I want. Do these

[lyrebird]

I had no idea vanilla CSS had nested rules! This feature was one of the reasons I had finally learned SASS for my own projects. I have another tool to use now in my other projects where I can't convince the team to use (read: learn) SASS.

[vitabramov]

Changing styles for preceding siblings could be useful while creating range date picker

[xldoesit]

the image grid nth child thing blew my mind

[george]

nice another learning video, great Kevin, thank you, I'll take notes, when will you make more CSSBattle videos?