andb.online

Селекторы и каскад CSS

Properties2
descriptionСпецифичность, каскад, :last-child vs :last-of-type, pointer-events
tagsinterview, frontend, css, selectors, specificity, cascade

2 min read

Селекторы и каскад CSS

Как работает специфичность CSS-селекторов?

Специфичность вычисляется как три числа (a, b, c):

  • a — количество ID-селекторов.
  • b — количество классов, атрибутов, псевдоклассов.
  • c — количество элементов и псевдоэлементов.

Примеры:

#header .nav a:hover    → (1, 2, 1)
.nav a                  → (0, 1, 1)
a                       → (0, 0, 1)
style=""                → выше любого селектора
!important              → выше всего

При равной специфичности побеждает правило, объявленное позже в CSS.

Как коротко объяснить CSS-каскад?

Браузер определяет применяемый стиль по origin и важности (от высшего к низшему):

  1. !important браузера (user-agent).
  2. !important пользователя (user stylesheet).
  3. !important автора страницы.
  4. CSS-анимации.
  5. Обычные стили автора.
  6. Обычные стили пользователя.
  7. Обычные стили браузера (user-agent).
  8. CSS-transitions (переопределяют всё на время перехода).

Внутри одного уровня применяется специфичность, затем порядок объявления.

Цель: последний <a> внутри .menu, у которого нет атрибута tabindex.

/* Если все дети — ссылки */
.menu a:last-child:not([tabindex]) { }
 
/* Если нужен последний среди именно a-элементов */
.menu a:last-of-type:not([tabindex]) { }

Подвох: :last-child проверяет позицию среди всех дочерних элементов. Если после ссылки стоит <span>, селектор не сработает.

В чём подвох :last-child vs :last-of-type?

<nav>
  <a href="#">Link 1</a>
  <a href="#">Link 2</a>
  <span>icon</span>   <!-- последний child -->
</nav>
  • a:last-child — не сработает: последний child — это <span>.
  • a:last-of-type — сработает: ищет последний <a> среди элементов типа a.

Что такое pointer-events в CSS?

pointer-events: none;   /* клики проходят сквозь элемент */
pointer-events: auto;   /* стандартное поведение */

Применение:

  • Отключить кнопку визуально без disabled.
  • Разрешить клики на элемент под оверлеем.
  • Анимационные слои, которые не должны блокировать взаимодействие.

См. также

  • css-advanced — позиционирование и стилизация

Graph View

Backlinks