#фишка дня

Поскольку селектор has прилетел во все браузеры, самое время использовать его для чего-то более прозаичного, нежели анимации а-ля macOS Dock: https://t.me/htmlshit/1873

Как вам, например, подсветка колонок в таблице? Ведь без JS эту задачу было решить довольно сложно.

Самый популярный способ подсветки без JS на сегодняшний день — создать очень (очень) высокий псевдоэлемент и показать его по ховеру: https://css-tricks.com/simple-css-row-column-highlighting/

Но это, конечно, какой-то стыд. Хочется что-то чуть менее колхозное.

И, наконец, мы можем это сделать!

Пример от Стэна Хуугарда: https://codepen.io/alinaki/pen/oNmmooN

Значащий код:

table:has(td:nth-child(5):hover) {
  td:nth-child(5) {
    background: var(--hover);
  }
} 

Что тут происходит? Всё просто: если в таблице имеется (has) наведённый мышью пятый (nth-child) элемент в любой строке, надо подсветить все остальные пятые элементы в каждой строке таблицы вообще.

Дыхание будущего! Правда, всё немного портит хардкод номера ячейки... но можно просто сгенерировать сразу штук 10.

По-моему, это решение ну в разы приятнее высоких псевдоэлементов.

Как вам, котаны?

#css #has #table #бородач