CSS-селекторы

Селектор — это первая часть CSS-правила. Он говорит браузеру: «применить эти стили вот к этим элементам». Знание селекторов — основа CSS.

Селектор по тегу

Применяется ко всем элементам этого тега.

h1 {
  font-size: 2rem;
  color: #111827;
}

p {
  line-height: 1.6;
  color: #374151;
}

a {
  color: #2563eb;
  text-decoration: none;
}

Осторожно: правила для p применятся ко всем параграфам на странице.

Селектор по классу (.)

Самый используемый. Класс назначается через атрибут class.

<article class="post-card">
  <h2 class="post-title">FastAPI: быстрый старт</h2>
  <p class="post-meta">12 июня 2025</p>
</article>

.post-card {
  padding: 24px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
}

.post-title {
  font-size: 1.25rem;
  margin-bottom: 4px;
}

.post-meta {
  color: #6b7280;
  font-size: 0.875rem;
}

Один элемент может иметь несколько классов:

<p class="post-meta tag-python">Python · 5 мин</p>

.tag-python {
  color: #16a34a;
}

Селектор по ID (#)

ID уникален — на странице должен быть только один элемент с данным ID.

<header id="site-header">...</header>

#site-header {
  background: #1e293b;
  padding: 16px 24px;
}

В реальных проектах ID для стилизации используют редко — классы гибче. ID обычно нужны для якорей (<a href="#comments">) и JavaScript.

Комбинаторы

Потомок (пробел)

/* Любой <a> внутри .post-card — на любом уровне вложенности */
.post-card a {
  color: #2563eb;
}

Прямой потомок (>)

/* Только <li> — прямые дети .nav-list */
.nav-list > li {
  display: inline-block;
}

Соседний элемент (+)

/* <p> сразу после <h2> */
h2 + p {
  margin-top: 4px;
  color: #6b7280;
}

Все следующие (~)

/* Все <p> после <h2> на том же уровне */
h2 ~ p {
  text-indent: 1em;
}

Атрибутный селектор ([attr])

/* Все ссылки с target="_blank" */
a[target="_blank"] {
  padding-right: 16px;
}

/* Все input типа text */
input[type="text"] {
  border: 1px solid #d1d5db;
  border-radius: 4px;
  padding: 8px 12px;
}

/* href содержит подстроку */
a[href*="github.com"] {
  color: #6b7280;
}

Группировка: несколько селекторов сразу

/* Применить одни стили к h1, h2, h3 */
h1, h2, h3 {
  font-weight: 700;
  color: #111827;
  line-height: 1.25;
}

Специфичность: кто победит

Если несколько правил применяются к одному элементу, побеждает более специфичное.

Специфичности складываются:

.post-card h2 { color: red; }    /* 0,1,1 */
.post-title   { color: blue; }   /* 0,1,0 */

Здесь победит .post-card h2 — его специфичность выше. Подробнее — в статье про каскад.

DevBlog: навигация

<nav class="site-nav">
  <a href="/" class="nav-link nav-link--active">Главная</a>
  <a href="/articles/" class="nav-link">Статьи</a>
  <a href="/about/" class="nav-link">Обо мне</a>
</nav>

.site-nav {
  display: flex;
  gap: 24px;
}

.nav-link {
  color: #374151;
  text-decoration: none;
  font-weight: 500;
}

.nav-link:hover {
  color: #2563eb;
}

.nav-link--active {
  color: #2563eb;
  border-bottom: 2px solid #2563eb;
  padding-bottom: 2px;
}

Итог