меню

Про новые 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() представляют собой мощные инструменты, которые позволяют более гибко управлять стилями элементов на веб-странице. Используйте их в своем коде, чтобы делать его более читаемым, модульным и эффективным.


Возможно, вам будет интересно

Медиа типы в CSS

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

Стилизуем placeholder при помощи CSS

Атрибут placeholder применяется для призыва к действию внутри пустых элементов input и textarea. В этой статье мы рассмотрим возможности стилизации текста placeholder-a, а также некоторые трюки, которые позволят сделать его более удобным и функциональным.

Треугольники по средствам CSS

На сайтах треугольники применяются сплошь и рядом как часть дизайна элементов, например, они служат указателем на какой-то объект, направляя внимание читателя в нужное место.

Красивая форма обратной связи на чистом CSS

В данной статье мы расскажем Вам, как разработать красивую контактную форму на чистом CSS без использования изображений. Форма будет иметь поля со следующими данными: имя, адрес электронной почты, URL-адрес, тема и текст сообщения.

Оформление заявки

Документы на создание сайта

Изучите наше коммерческое предложение, заполните БРИФ и отправьте его на почту maxidebox@list.ru. Изучив все пожелания из БРИФ-а, обратным ответом оповестим Вас по стоимости разработке, ответим на вопросы.

КП на создание сайта Коммерческое предложение на созданеи сайта

Мы берем на себя ответственность за все стадии работы и полностью избавляем клиентов от забот и необходимости вникать в тонкости.

Скачать БРИФ (акета) на создание сайта Скачать БРИФ (акета) на создание сайта

Зополните у БРИФ-а все необходимые поля. Сделайте краткое описание к каждому из пунктов анкеты, привидите примеры в соответсвующий пунктах - это позволит лучше понять Ваши ожидания и требования к сайту