Как работают селекторы псевдоклассов CSS :is, :where и :has?

Введение в PostCSS Программирование и разработка

Селекторы CSS позволяют выбирать элементы по типу, атрибутам или местоположению в HTML-документе. В этом руководстве объясняются три новых параметра — :is(), :where() и :has().

Селекторы обычно используются в таблицах стилей. В следующем примере выполняется поиск всех <p> элементов абзаца и изменение веса шрифта на полужирный:

p {
  font-weight: bold;
}

Вы также можете использовать селекторы в JavaScript для поиска узлов DOM:

  • document.querySelector() возвращает первый соответствующий элемент HTML
  • document.querySelectorAll() возвращает все соответствующие HTML-элементы в виде массива NodeList.

Селекторы псевдоклассов нацеливаются на элементы HTML на основе их текущего состояния. Возможно, наиболее известным является :hover, который применяет стили, когда курсор перемещается по элементу, поэтому он используется для выделения кликабельных ссылок и кнопок. Среди других популярных вариантов :

  • :visited: соответствует посещенным ссылкам
  • :target: соответствует элементу, указанному в URL-адресе документа.
  • :first-child: нацелен на первый дочерний элемент
  • :nth-child: выбирает определенные дочерние элементы
  • :empty: соответствует элементу без содержимого или дочерних элементов
  • :checked: соответствует включенному флажку или переключателю
  • :blank: стилизует пустое поле ввода
  • :enabled: соответствует включенному полю ввода
  • :disabled: соответствует отключенному полю ввода
  • :required: нацелен на обязательное поле ввода
  • :valid: соответствует допустимому полю ввода
  • :invalid: соответствует недопустимому полю ввода
  • :playing: нацеливается на воспроизводимый аудио- или видеоэлемент.

Недавно браузеры получили еще три селектора псевдоклассов…

CSS: это селектор псевдокласса

Примечание: изначально это было указано как :matches()и :any(), но :is()стало стандартом CSS.

Часто вам нужно применить один и тот же стиль к нескольким элементам. Например, <p> текст абзаца по умолчанию черный, но серый, когда он появляется внутри  <article><section>, и <aside>

/* default black */
p {
  color: #000;
}

/* gray in <article>, <section>, or <aside> */
article p,
section p,
aside p {
  color: #444;
}
Оцените статью
bestprogrammer.ru
Добавить комментарий