Псевдокласс :nth-last-child [4/20]
В первом курсе про селекторы мы уже рассматривали псевдокласс :nth-child, сейчас посмотрим на :nth-last-child.
Псевдокласс :nth-last-child используется для добавления стиля к элементам на основе нумерации в дереве элементов. В отличие от псевдокласса :nth-child, отсчет ведется не от первого элемента, а от последнего. Вот и все различия.
Подробнее об :nth-child и синтаксисе выражений рассказано в пошаговой демонстрацииИспользование псевдокласса :nth-child
style2-4.html
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<title>Псевдокласс :nth-last-child</title>
<link rel="stylesheet" href="/assets/course57/course.css">
<style>
ul:nth-last-child(2) > li {
background: #ff3300;
}
.cards li:nth-last-child(2) {
background: #339933;
}
ul:nth-last-child(2) > li:nth-last-child(2) {
background: #0099ff;
}
</style>
</head>
<body>
<ul class="cards">
<li class="ace heart"></li>
<li class="king diamond"></li>
<li class="queen club"></li>
<li class="jack spade"></li>
<li class="king club"></li>
<li class="ace spade"></li>
<li class="jack heart"></li>
</ul>
<ul class="cards">
<li class="jack diamond"></li>
<li class="ace club"></li>
<li class="king spade"></li>
<li class="queen heart"></li>
<li class="queen spade"></li>
<li class="king heart"></li>
<li class="ace diamond"></li>
</ul>
<ul class="cards">
<li class="queen spade"></li>
<li class="king heart"></li>
<li class="king club"></li>
<li class="ace spade"></li>
<li class="jack heart"></li>
<li class="queen diamond"></li>
<li class="ace diamond"></li>
</ul>
<ul class="cards">
<li class="queen spade"></li>
<li class="ace spade"></li>
<li class="jack heart"></li>
<li class="ace spade"></li>
<li class="ace heart"></li>
<li class="queen diamond"></li>
<li class="ace diamond"></li>
</ul>
</body>
</html>
Псевдокласс :first-of-type [5/20]
Псевдокласс :first-of-typeочень похож на :first-child. Он выбирает первый дочерний элемент родителя, только с учетом типа элементов.
Например, в этом задании перед списками с картами есть блок с текстом. У списков и у блока с текстом общий родитель — body.
<body>
<div class="paper"> … </div>
<ul class="cards"> … </ul>
<ul class="cards"> … </ul>
</body>
Сравним две записи:
ul:first-child {
background: #ffffee;
}
ul:first-of-type {
background: #ffffee;
}
Верхний селектор выбирает первый дочерний элемент в родителе, причем этот элемент должен быть ul. В нашем случае не выберется ничего, потому что первым дочерним элементом bodyявляется div.
Нижний селектор выбирает первый ul среди всех дочерних ul в своем родителе. В нашем случае будет выбран первая строка с картами.
style2-5.html
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<title>Псевдокласс :first-of-type</title>
<link rel="stylesheet" href="/assets/course57/course.css">
<style>
ul li:first-child {
background-color: #ff3300;
}
ul:first-of-type li {
background-color: #339933;
}
ul:first-of-type li:first-of-type {
background-color: #0099ff;
}
</style>
</head>
<body>
<div class="paper">
<h1>Как раскладывать пасьянс?</h1>
<p>Как хотите, так и раскладывайте.</p>
</div>
<ul class="cards">
<li class="ace heart"></li>
<li class="king diamond"></li>
<li class="queen club"></li>
<li class="jack spade"></li>
<li class="king club"></li>
<li class="ace spade"></li>
<li class="jack heart"></li>
</ul>
<ul class="cards">
<li class="jack diamond"></li>
<li class="ace club"></li>
<li class="king spade"></li>
<li class="queen heart"></li>
<li class="queen spade"></li>
<li class="king heart"></li>
<li class="ace diamond"></li>
</ul>
<ul class="cards">
<li class="queen spade"></li>
<li class="king heart"></li>
<li class="king club"></li>
<li class="ace spade"></li>
<li class="jack heart"></li>
<li class="queen diamond"></li>
<li class="ace diamond"></li>
</ul>
<ul class="cards">
<li class="queen spade"></li>
<li class="ace spade"></li>
<li class="jack heart"></li>
<li class="ace spade"></li>
<li class="ace heart"></li>
<li class="queen diamond"></li>
<li class="ace diamond"></li>
</ul>
</body>
</html>