Урок 11. Примеры: Селекторы CSS

Рабочие примеры

В превью жёлтым выделены элементы, которые выбирает селектор (подсветка имитирует действие правила). Серым — те, что селектор пропускает.

1. Селектор по классу .card

Класс можно дать многим элементам. Селектор .card ловит все три блока с этим классом, а блок без класса — нет.

<div class="card">…</div>
<div class="card">…</div>
<div>…</div>

.card {
  background: #fef08a;
  border: 2px solid #ca8a04;
}

2. Селектор по id #promo

Id уникален: правило применяется к единственному элементу с этим id, даже если рядом есть похожие блоки.

<div>…</div>
<div id="promo">…</div>

#promo {
  background: #fef08a;
  border: 2px solid #ca8a04;
}

3. Потомки .card p vs дочерние .card > p

Пробел выбирает p на любой глубине. Знак > — только прямых детей. Слева подсвечены оба p, справа — только верхний.

/* любой p внутри .card, на любой глубине */
.card p { background: #fef08a; }

/* только p — прямой ребёнок .card */
.card > p { background: #fef08a; }

4. Псевдокласс :hover

:hover выбирает элемент, пока на нём указатель мыши. Наведите на кнопку ниже — она сменит цвет (это и есть селектор по состоянию).

.btn {
  background: #0f766e;
  color: #fff;
}

.btn:hover {
  background: #fef08a;
  color: #854d0e;
}

5. По позиции li:nth-child(odd)

:nth-child выбирает элементы по номеру. odd — нечётные (1, 3, 5…). Подсвечены 1-я, 3-я и 5-я строки — «зебра» для таблиц и списков.

li:nth-child(odd) {
  background: #fef08a;
}