- Теория
- Теория
Псевдокласс :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 в своем родителе. В нашем случае будет выбрана первая строка с картами.
Хотите всё и сразу? HTML, CSS, JavaScript, React, Node.js, оплачиваемая стажировка в Лиге А и гарантия трудоустройства. Записывайтесь на профессию «Фулстек-разработчик», которая стартует 20 мая 2024. Всего от 5520 ₽в месяц.
- index.html
Вы перешли на другую страницу
Кликните внутри мини-браузера, чтобы поставить фокус в это окно.
