Как комбинировать селекторы?

Комбинирование селекторов в CSS

Селекторы — это способ выбрать элементы на странице для применения стилей. Комбинирование селекторов позволяет выбирать элементы более точно.

Базовые типы селекторов

p { color: blue; }
.highlight { background: yellow; }
#main-title { font-size: 24px; }
[type="text"] { padding: 5px; }
* { margin: 0; }

Способ 1: Селектор потомков (Descendant)

Пробел между селекторами означает, что выбираются все потомки:

.container span {
  color: red;
}

Выбирает все <span> внутри любого .container, независимо от глубины.

Способ 2: Селектор дочерних элементов (Child)

Комбинатор > выбирает только прямых детей:

ul > li {
  list-style: square;
}

Выбирает только <li> которые являются прямыми детьми <ul>.

Способ 3: Соседний селектор (Adjacent Sibling)

Комбинатор + выбирает элемент, который идёт сразу после другого:

h1 + h2 {
  margin-top: 0;
}

Выбирает h2 только если он идёт сразу после h1.

Способ 4: Общий селектор соседей (General Sibling)

Комбинатор ~ выбирает все элементы-соседи:

h1 ~ p {
  margin-left: 20px;
}

Выбирает все p которые идут после h1.

Способ 5: Множественные селекторы (Group)

Запятая позволяет применить одни стили к разным селекторам:

h1, h2, h3, .title {
  font-weight: bold;
  color: #333;
}

Способ 6: Комбинирование классов

Выбирает элемент, который имеет оба класса:

.button.primary {
  background: blue;
}

Способ 7: Селектор по псевдоклассам

Селектор : используется для состояния элемента:

a:link { color: blue; }
a:visited { color: purple; }
a:hover { text-decoration: underline; }
input:focus { border: 2px solid blue; }
li:first-child { font-weight: bold; }
li:last-child { margin-bottom: 0; }
li:nth-child(2) { background: yellow; }
li:nth-child(odd) { background: #f5f5f5; }

Способ 8: Селектор по псевдоэлементам

Селектор :: используется для создания виртуальных элементов:

p::before { content: 'Примечание: '; }
p::after { content: ' (конец)'; }
p::first-letter { font-size: 2em; color: red; }
p::first-line { font-weight: bold; }
p::selection { background: yellow; color: black; }

Способ 9: Комплексные комбинации

Комбинируй несколько селекторов для точного выбора:

.nav > a.active {
  color: white;
  background: blue;
}

.section h1 + p {
  margin-top: 0;
}

#myform input[type="text"] {
  border: 1px solid gray;
}

li:not(:first-child) {
  margin-top: 10px;
}

Способ 10: Специфичность селекторов

Селекторы имеют разный приоритет (специфичность):

p { color: blue; }
.highlight { color: red; }
#main { color: green; }
p { color: black !important; }

Приоритет возрастает: элемент < класс < ID < !important.

Ключевые моменты

• Потомки (пробел) — выбирает все потомки
• Прямые дети (>) — выбирает только детей
• Соседи (+, ~) — выбирают элементы до/после
• Группировка (,) — применяет один стиль к разным селекторам
• Псевдоклассы (:) — состояние элемента
• Псевдоэлементы (::) — виртуальные элементы
• Специфичность — более специфичные селекторы побеждают менее специфичные

Правильное комбинирование селекторов — это основа эффективного CSS.