Вибірка по позиції і типу елементів у CSS

Вибірка по позиції і типу елементів у CSS

CSS має спеціальні псевдокласи, які дозволяють вибирати елементи не тільки за класами або id, а й за їх положенням серед однотипних елементів.

Основні псевдокласи

:first-of-type — вибирає перший елемент певного типу серед сусідів.

:last-of-type — вибирає останній елемент певного типу серед сусідів.

:nth-of-type(n) — вибирає елемент за номером серед елементів такого ж типу.

:nth-last-of-type(n) — вибирає елемент за номером з кінця.

HTML/CSS приклад

<div class="block">
  <p>Перший абзац</p>
  <p>Другий абзац</p>
  <h2>Заголовок</h2>
  <p>Третій абзац</p>
  <p>Четвертий абзац</p>
</div>

.block p:first-of-type {
  color: green;
}

.block p:last-of-type {
  color: red;
}

.block p:nth-of-type(2) {
  font-size: 30px;
}

.block p:nth-last-of-type(2) {
  text-decoration: underline;
}

Що вийде

Перший абзац стане зеленим, останній абзац стане червоним, другий абзац збільшиться, а передостанній отримає підкреслення.

Різниця між :nth-child і :nth-of-type

:nth-child рахує всі дочірні елементи незалежно від їх типу. :nth-of-type рахує тільки елементи такого ж типу.

<div>
  <h2>Title</h2>
  <p>1</p>
  <p>2</p>
  <p>3</p>
</div>

p:nth-of-type(2) {
  color: blue;
}

Практичне завдання

.block p:first-of-type {
  color: green;
}

.block p:last-of-type {
  color: red;
}

.block p:nth-of-type(3) {
  font-size: 25px;
}

.block p:nth-last-of-type(2) {
  text-decoration: underline;
}