Про новые CSS псевдоклассы - :is() :where() :has()

В мире веб-разработки постоянно появляются новые инструменты и возможности для создания более эффективных и удобных интерфейсов. Одним из последних дополнений к CSS стали селекторы :is(), :where() и :has(), которые предлагают новые способы выбора элементов на веб-странице. Давайте рассмотрим каждый из них подробнее и узнаем, как они могут быть полезны в веб-разработке.

CSS псевдокласс :is()

Селектор :is() позволяет группировать несколько селекторов в один, что делает код более компактным и удобным для чтения. Например, вместо повторения одних и тех же селекторов для различных элементов, вы можете просто объединить их в :is(). Например:

	
:is(h1, h2, h3) {
  color: #333;
}
	

Этот код применит цвет текста #333 ко всем элементам h1, h2 и h3 на странице.

CSS псевдокласс :where()

Селектор :where() позволяет применять стили к элементам внутри указанного контейнера без изменения их специфичности. Это полезно, когда вам нужно установить стили для группы элементов внутри определенного блока, не изменяя структуру CSS. Например:

	
.container :where(p, ul, ol) {
  margin: 0;
}
	

Этот код применяет отступы к параграфам, спискам ul и ol, которые находятся внутри элемента с классом .container.

CSS псевдокласс :has()

Селектор :has() позволяет выбирать элементы, которые содержат указанный подэлемент. Это очень удобно для стилизации элементов на основе их содержимого. Например:

	
li:has(> a[href*="proweb63.ru"]) {
  font-weight: bold;
}
	

Этот код выделит жирным шрифтом все элементы li, которые содержат прямого потомка a с атрибутом href, содержащим "proweb63.ru".

В заключение, селекторы :is(), :where() и :has() представляют собой мощные инструменты, которые позволяют более гибко управлять стилями элементов на веб-странице. Используйте их в своем коде, чтобы делать его более читаемым, модульным и эффективным.