• Теория
  • Теория

Псевдокласс :first-of-type

Псевдокласс :first-of-type очень похож на :first-child. Он выбирает первый дочерний элемент родителя, только с учетом типа, то есть тега, элементов.

Например, в этом задании перед списками с картами есть блок с текстом. У списков и у блока с текстом общий родитель — body.

<body>
  <div class="paper"> … </div>
  <ul class="cards"> … </ul>
  <ul class="cards"> … </ul>
</body>

Сравним две записи:

ul:first-child {
  background-color: #ffffee;
}

ul:first-of-type {
  background-color: #ffffee;
}

Верхний селектор выбирает первый дочерний элемент в родителе, причем этот элемент должен быть ul. В нашем случае не выберется ничего, потому что первым дочерним элементом body является div.

Нижний селектор выбирает первый ul среди всех дочерних ul в своем родителе. В нашем случае будет выбрана первая строка с картами.

Минимальный вид табов
  • index.html
HTML
HTML

Вы перешли на другую страницу

Кликните внутри мини-браузера, чтобы поставить фокус в это окно.

100%
Бабушка Кекс

Притормози, дружище

Проходить вызовы части «Селекторы. Погружение» тренажёра «Погружение в селекторы» можно после регистрации и оформления подписки.

Зарегистрироваться