Готовимся к вопросам по вёрстке на интервью Frontend-разработчика: «Какие знаешь псевдо-классы?»

[vanxant]

:has удобно вешать на body, чтобы реагировать на всякие потусторонние фигни, на которые нельзя ни повлиять, ни отказаться. Всякие там CRM-кнопки, свистоперделки маркетолухов и т.д., которые при всплытии например ломают нам макет страницы или отдельные элементы. Тогда можно что-то починить через body:has(.crm-popup.shown) .myitem { ... }

[ImagineTables]

body:has() вообще сила. Например, если объединить с проверкой состояний, можно сделать pureCSS-переключалку. Главное, не злоупотреблять, и если скрипты выразительнее, пользоваться ими.

[timonbandit]

PureCSS переключалку можно и на input сделать. У тебя есть что кликать и :checked если нажато. А нажимать можно и на label, а input вообще скрыть

[ImagineTables]

Да, но как тогглить произвольный блок? Абсолютно несвязанный?

[alexnozer]

Можно, но не нужно :) Все эти "хаки" вредят доступности и портят UX. Не стоит зло употреблять с пуризмом CSS.

[bubn0ff]

Спасибо за тему, как всегда познавательно.

[slavaRomantsov]

Привет! Спасибо за статью! Есть еще один интересный псведокласс :not

Очень удобно его использовать для например всех кроме первого элементов :not(:first-child)