Шпаргалка по CSS: основные селекторы

16 апреля, 2022 11:46 дп 870 views | Комментариев нет

| | Комментировать запись

Эта статья – простой и удобный справочник по селекторам CSS. В ней перечислены и новые селекторы из (CSS3).

  • Универсальный селектор: *. Выбирает все.
  • Селектор корневого элемента: :root. Выбирает корневой элемент. Корневой элемент – это родительский элемент всех остальных элементов, он почти всегда ссылается на <html>.
  • Селектор типа: h2. Выбирает все элементы указанного типа.
  • Селектор идентификатора: #myEl. Выбирает элемент по предоставленному идентификатору.
  • Селектор класса: .btn-xl. Выбирает все элементы с указанным классом.

Селекторы атрибутов

  • Простой селектор атрибутов: [target]. Выбирает элементы, имеющие указанный атрибут.
  • [target=“_blank”] – селектор атрибутов и значений. Выбирает элементы, которые содержат заданный атрибут и значение.
  • Атрибут и одно из многих значений: [class~=“large”]. Выбирает элемент с заданным атрибутом, если его значение отвечает одному из значений, перечисленных в списке. Значения в списке разделяются пробелами.
  • Атрибут и начало значения: [target^=«_b»]. Выбирает элементы, значение атрибута которых начинается с заданной строки.
  • Атрибут и конец значения: [target$=“nk”]. Выбирает элементы, значение атрибута которых заканчивается указанной строкой.
  • Атрибут и часть значения: [target*=“lan”]. Выбирает элементы, значение атрибута которых содержит предоставленную подстроку.
  • [lang|=“zu”] – селектор атрибутов, который учитывает часть значения из списка значений, разделенных дефисом. Он выбирает те элементы, значение которых совпадает с левой частью списка.
  • Селектор потомков: h2 span. Выбирает элемент, представленный справа, если он является потомком элемента слева.
  • Селектор дочерних элементов: div > p. Выбирает элемент, объявленный справа, если он является прямым дочерним элементом элемента слева.
  • Селектор смежных элементов (братьев и сестер): div + p. Выбирает элемент справа, если элемент слева непосредственно предшествует ему.
  • Общий селектор родственных элементов: div ~ p. Выбирает элемент справа, если ему предшествует элемент слева.
  • Селектор отрицания: :not(.first-par). Выбирает элементы, которые не соответствуют простому селектору, указанному в скобках.

Псевдоэлементы

  • ::before. Пример: p::before. Сгенерированный контент перед элементом.
  • ::after. Пример: p::after. Сгенерированный контент после элемента.
  • ::first-letter. Пример: p::first-letter. Первая буква элемента.
  • ::first-line. Пример: p::first-line. Первая строка элемента.

Структурные псевдоклассы

  • nth-child(n). Пример: span:nth-child(5). Выбирает n-ый родственный элемент, если он отвечает заявленному типу.
  • nth-last-child(n). Пример: p:nth-last-child(4). Считая от последнего дочернего элемента, выбирает n-ый родственный элемент, если он отвечает заявленному типу.
  • nth-of-type(n). Пример: span:nth-of-type(2). Выбирает n-ый родственный элемент, учитывая только элементы того же типа.
  • nth-last-of-type(n): span:nth-last-of-type(3). Псевдокласс выбирает n-й родственный элемент, считая от последнего дочернего элемента и учитывая только указанный тип.
  • first-child. Пример: span:first-child. Выбирает первый дочерний элемент, тип которого соответствует требованиям.
  • last-child. Пример: span:last-child. Выбирает последний дочерний элемент, тип которого соответствует требованиям.
  • first-of-type. Пример: span:first-of-type. Выбирает первый элемент объявленного типа в родительском элементе.
  • last-of-type. Пример: span: last-of-type. Выбирает последний элемент объявленного типа в родительском элементе.
  • only-child. Пример: span:only-child. Выбирает элемент, если это единственный дочерний элемент заданного родителя.
  • only-of-type. Пример: span:only-of-type. Выбирает элемент, если это единственный элемент такого типа внутри родительского элемента.
  • empty. Пример: div:empty. Выбирает элементы без дочерних элементов.

Псевдоклассы ссылок

  • Ссылка: a:link. Ссылка, которую не посещали.
  • Посещенная ссылка: a:visited. Ссылка, которая была посещена.

Псевдоклассы действий

  • a:active. Выбирает активные элементы.
  • a:hover. Отслеживает наведение (когда указывающее устройство пользователя находится поверх элемента).
  • a:focus. Определяет фокус элемента (например, когда пользователь кликает внутри поля ввода, поле получает фокус).
  • Целевой псевдокласс: p:target. Используется, когда элемент слева является текущей целью, как определено URL-адресом.
  • lang. Например: :lang(en). Выбирает элемент(ы) с указанным атрибутом lang.

Псевдоклассы состояний пользовательского интерфейса

  • :enabled. Применяется к элементам, указанным слева, когда они включены.
  • :disabled. Применяется к элементам, указанным слева, когда они отключены.
  • :checked. Применяется к элементам интерфейса, таким как переключатели (checkbox) и флажки (radio), когда они включены.

Дополнительные рекомендации

Помните, что для выбора нескольких селекторов в одном объявлении CSS между селекторами нужно поставить запятую. В следующем примере выбираются все элементы <p>, у которых нет класса article-par, а также выбираются все элементы <h2>:

p:not(.article-par), h2 {
  font-weight: bold;
}

Кроме того, если вы хотите выбрать элемент, ориентируясь на комбинацию нескольких классов и/или идентификаторов, вы можете просто отметить несколько классов и/или идентификаторов, не ставя пробел между ними. Например, если вы хотите выбрать элемент с классами btn и btn-large, используйте:

.btn.btn-large {
  font-weight: bold;
}

Как мы видим в приведенном выше примере, мы не можем использовать селектор .btn .btn-large (с пробелом), потому что тогда он выбрал бы элементы .btn-large, которые являются потомками элементов .btn.

Теперь предположим, что элемент, который нам нужно выбрать, также имеет идентификатор #main-btn:

#main-btn.btn.btn-large {
  font-weight: bold;
}

Читайте также:

Tags: ,

Добавить комментарий