LInks
:is() [:matches(), :any()]
:is() это функция псевдокласс CSS принимающая список селекторов как аргумент, и выбирает любой элемент, который может быть выбран одним из селекторов в этом списке. Это полезно при переписи огромных селекторов в более компактную форму.
/* Выбирает какой-либо абзац в шапке, основной части или подвале, который зависал */
:is(header, main, footer) p:hover {
color: red;
cursor: pointer;
}
/* Пример приведённый выше эквивалентен следующему */
header p:hover,
main p:hover,
footer p:hover {
color: red;
cursor: pointer;
}
/* Обратно-совместимая версия с:-*-any() и :matches() (Это невозможно сгруппировать селекторы в одно правило, так как присутствие одного неверного селектора аннулирует все правило.) */
:-webkit-any(header, main, footer) p:hover {
color: red;
cursor: pointer;
}
:-moz-any(header, main, footer) p:hover {
color: red;
cursor: pointer;
}
:matches(header, main, footer) p:hover {
color: red;
cursor: pointer;
}
:where()
CSS псевдокласс :where() в качестве аргумента принимает список селекторов и выбирает только те элементы, которые могут быть выбраны из переданного списка.
/* Выбирает любой параграф внутри header, main или footer на который наведён курсор мыши */
:where(header, main, footer) p:hover {
color: red;
cursor: pointer;
}
/* Пример приведённый выше эквивалентен следующему */
header p:hover,
main p:hover,
footer p:hover {
color: red;
cursor: pointer;
}
:has()
Одиночные картинки в абзацах на всю ширину
Дизайнеры любят растягивать картинки на всю ширину экрана. На CSS-гридах верстать такие блоки очень просто. Но многие интерпретаторы Markdown, визуальные редакторы и подобные инструменты принудительно оборачивают картинки в абзацы. Обычно блочная обертка скорее полезна, но здесь она мешает: абзац с одной картинкой не отличается от абзаца с текстом, а задавать классы в таких редакторах не всегда удобно. А с :has() это легко решается:
/* в центре колонка для текста удобной для чтения ширины, по бокам поля до краев */
.content {
display: grid;
grid-template-columns: 1fr 60ch 1fr;
}
/* по умолчанию блочные элементы в контенте занимают только контентную колонку */
.content > :is(p, ul, ol, blockquote, pre) {
grid-column: 2/3;
}
/* абзацы, в которых только картинка, растягиваем на всю ширину (синтаксис относительного селектора поясняется далее в статье) */
.content > p:has(> img:only-child) {
grid-column: 1/-1;
}