CSS-селекторы: классы, потомки и псевдоклассы

Селектор решает, к кому применяется правило. В реальных проектах основу составляют классы: они предсказуемы и не привязаны жёстко к тегу.

Базовые виды

  • По классу — .button
  • Потомки — .card p
  • Дочерние — .menu > li
  • Псевдоклассы — a:hover, :focus-visible

Специфичность без боли

Избегайте длинных цепочек и стилизации по id без нужды. Если правило «не бьётся», сначала упростите селекторы, а не повышайте давление.

Доступность состояний

Не убирайте outline у focus без замены. Клавиатура должна видеть, где фокус. Дальше по раскладке — Flexbox.

HTML

<nav class="menu">
  <a class="menu__link" href="/programming/css">CSS</a>
  <a class="menu__link is-active" href="/programming/css/selektory">Селекторы</a>
</nav>

CSS

.menu {
  display: flex;
  gap: 1rem;
}
.menu__link {
  color: #124;
  text-decoration: none;
  padding: 0.35rem 0.5rem;
}
.menu__link:hover,
.menu__link:focus-visible {
  text-decoration: underline;
}
.menu__link.is-active {
  font-weight: 700;
  border-bottom: 2px solid #124;
}

Практическое задание

Задание: стилизуйте навигацию классами и псевдоклассами.

  • Базовый стиль ссылок через класс
  • Отдельное состояние активной ссылки
  • Есть :hover и видимый :focus-visible
  • Нет селекторов по id и !important