#статья дня
А ну, сходу ответьте, чем отличается :has(:not()) от :not(:has())?
На самом деле, если тупо воспользоваться логикой английского языка — легко ошибиться.
Разработчики браузера для, простите, разработчиков —Polypane — ведут свой блог с разными мелкими фишками, и сегодня — https://polypane.app/blog/decoding-css-selectors-has-not-vs-not-has/, как раз об этом.
📌 :has(:not())
Выбирает элементы, которые содержат определённые дочерние элементы, но не содержащие другие.
.card:has(:not(img)) {
background: lightblue;
}
🔹 Выберет .card, если внутри есть любой элемент, кроме
![]()
.
📌 :not(:has())
Выбирает элементы, не содержащие определённый дочерний элемент.
.card:not(:has(img)) {
background: lightcoral;
}
🔹 Выберет .card, если внутри вообще нет
![]()
.
🏁 Итого:
:has(:not(img)) проверяет, есть ли что-то, кроме
![]()
.
:not(:has(img)) проверяет, что
![]()
вообще нет.
Ну а в статье всё то же самое, только чуть подробнее.
Не ошибайтесь, котаны.
#css #has #not #бородач
