Загрузка...

Комбинаторы CSS

Вы уже умеете выбирать элементы селекторами типа, class и id. Следующий навык: стилизовать элемент из‑за его положения относительно другого — внутри раздела, только как прямого потомка или сразу после заголовка.

Что такое комбинаторы CSS?

Комбинатор CSS — это символ (или пробел) между двумя селекторами. Он говорит браузеру, как эти две части должны быть связаны в дереве HTML. Слева — ориентир; справа — то, что реально получает стили.

Четыре комбинатора кратко

Сначала выучите символы, затем потренируйте каждый на коротком примере.

📊 Комбинаторы CSS

Комбинатор Символ Что выбирает Пример
Потомок (пробел) Любое вложенное совпадение внутри предка article p
Дочерний > Только прямой потомок ul > li
Соседний сосед + Следующий сосед сразу после h2 + p
Общий сосед ~ Любой более поздний сосед на том же уровне h2 ~ p

Комбинатор потомка (пробел)

Пробел между селекторами значит: «найди второй селектор где угодно внутри первого». Глубина не важна — внуки и более глубокие уровни тоже подходят.

Потомок — абзацы внутри article

css
CSS Code 
article p {
color: #334155;
line-height: 1.6;
}

Когда полезен потомок

Используйте комбинатор потомка для общего вида внутри области: все абзацы в article, все ссылки в nav. Если нужны только прямые дети, а глубокие совпадения слишком широки, переходите к дочернему комбинатору.

Дочерний комбинатор (>)

> выбирает только прямых детей. Элемент, вложенный глубже одного уровня, не подходит.

Дочерний — только прямые пункты списка

css
CSS Code 
.menu > li {
list-style: none;
padding: 0.5rem 1rem;
}

Пробел против > на одной картинке

Если HTML такой: <ul class="menu"><li>One<ul><li>Nested</li></ul></li></ul>, то .menu > li стилизует только внешний li. Потомок .menu li стилизует и внешний, и вложенный.

Комбинатор соседнего соседа (+)

+ выбирает элемент, который идёт сразу после соседней ссылки — тот же родитель, соседняя дверь, без элемента между ними.

Соседний сосед — первый абзац после h2

css
CSS Code 
h2 + p {
font-size: 1.125rem;
color: #0f766e;
}

Частый приём

Многие макеты хотят, чтобы первый абзац после заголовка выглядел чуть иначе (лид). h2 + p целится в этого соседа, не давая каждому абзацу отдельный class.

Комбинатор общего соседа (~)

~ выбирает каждого более позднего соседа, подходящего под второй селектор — не только ближайшего следующего. Родитель по‑прежнему должен быть общим.

Общий сосед — абзацы после h2

css
CSS Code 
h2 ~ p {
max-width: 40rem;
}

+ против ~

  • h2 + p — только абзац сразу после h2
  • h2 ~ p — каждый соседний p после этого h2 (первый, второй, третий…)
    Если между h2 и p стоит div, h2 + p для этого p не сработает, а h2 ~ p всё ещё может выбрать более поздние соседние абзацы.

Какой комбинатор выбрать

  • Потомок — «всё такого типа внутри этой области»
  • Дочерний — когда вложенность иначе затронет списки или виджеты, которые вы не имели в виду
  • Соседний сосед — для одношагового соседа (заголовок → первый абзац)
  • Общий сосед — когда несколько сверстников после маркера должны делить один вид
    Пока учитесь, держите цепочки короткими. Длинные цепочки сильны — и легко ломаются при смене HTML.

Попробуйте сами

  1. Соберите короткую страницу с <article>, внутри — <h2>, <p>, <div> с вложенным <p>, затем ещё один <p> после div.
  2. Добавьте article p { color: #334155; } и убедитесь, что оба абзаца в статье меняются (потомок).
  3. Смените на article > p { color: #0f766e; } и обновите — этот цвет должны сохранить только прямые дочерние абзацы; вложенный p в div — нет.
  4. Добавьте h2 + p { font-weight: bold; } — жирным станет только абзац сразу после заголовка.
  5. По желанию: h2 ~ p { max-width: 36rem; } — каждый соседний абзац после заголовка получит max-width.

Частые ошибки

  • Потомок вместо дочернего — вложенные виджеты получают стили, нужные только верхнему уровню
  • Ожидание, что h2 + p перепрыгнет элемент между заголовком и абзацем — соседний значит сразу
  • Чтение комбинатора наоборот — стили идут на селектор справа, не на левую ссылку
  • Запятая вместо комбинатора (h2, p группирует; это не «p после h2»)
  • Предположение, что ~ требует вплотную — общий сосед хочет лишь «более позднего соседа»

Кратко

  • Комбинаторы связывают селекторы отношением HTML: внутри, прямой потомок, следующий сосед или более поздние соседи
  • Пробел = потомок (любая глубина); > = только прямой потомок
  • + = ближайший следующий сосед; ~ = любой подходящий более поздний сосед
  • Стили применяются к селектору справа от комбинатора
  • Выбирайте самый узкий комбинатор, который ещё выражает вашу цель
  • Практикуйтесь, меняя пробел на > и сравнивая + с ~ на одной странице

🧠 Проверьте Свои Знания

Готов к Началу

Проверьте Свои Знания

Бросьте себе вызов с помощью этой интерактивной викторины и узнайте, насколько хорошо вы понимаете тему

❓
7
Вопросы
🎯
70%
Для Прохождения
♾️
∞
Время
🔄
∞
Попытки

📝 Инструкции

  • Внимательно прочитайте каждый вопрос
  • Выберите лучший ответ на каждый вопрос
  • Вы можете пересдавать тест столько раз, сколько захотите
  • Ваш прогресс будет показан вверху
Тема 1 из 1
Css Урок