# No more quirky JS-based workarounds!

## Метаданные

- **Канал:** Academind
- **YouTube:** https://www.youtube.com/watch?v=R23_GNPx7f0

## Содержание

### [0:00](https://www.youtube.com/watch?v=R23_GNPx7f0) Segment 1 (00:00 - 02:00)

The has selector is a relatively new CSS feature that can be super useful, but many developers, and especially AI, don't really know about it. Th- that's why I created this video to teach you so that you can teach your AI assistant. The idea behind the has selector is simple. Let's say you wanna build a nav like this where I can hover over one element and the other elements get dimmed. So what I wanna do in the end is I wanna find out if some condition is active inside of that container, so if an element is being hovered, and then I wanna change the other elements condition. And that has been super hard to do without selector. Just try it. You will very likely need some JavaScript code to make it work. With the has selector, this becomes super simple though. Now, this video is part of a little miniseries where I look at some amazing browser features that are available today that by all major browsers, and that still are not really known by developers. The HTML code for this example here is super simple and it doesn't have anything special inside of it. I also need no JavaScript code for this example. Instead, it's all in that CSS code, and that isn't super complex either as you can see. Instead, this is where the magic happens. For the nav demo element, which in the end is simply my nav element that contains the links, for that element, I'm using the has selector to check child anchor element that's currently being hovered or where the user hovering over. That is what this selector says. Do you, nav demo, have a child anchor element which is currently being hovered? If yes, I wanna target all anchor elements in nav demo and set their opacity to. 35, including the one that's currently being But then we get this rule where we again check if we have some child element that is being hovered, and we then target that child element which is currently being hovered one and set some upper styles as well, in the end leading to this result where the element we're hovering over is highlighted and the other elements are dimmed. And again, try building this without has. It will be rather difficult. It's a breeze with has.

---
*Источник: https://ekstraktznaniy.ru/video/22590*