Псевдокласс :last-of-type [6/20]
В предыдущем задании мы рассмотрели псевдокласс :first-of-type.
Псевдокласс :last-of-type работает аналогично, только выбирает последний дочерний элемент родителя с учетом типа.
Пример записи:
ul:last-of-type {
...
}
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<title>Псевдокласс :last-of-type</title>
<link rel="stylesheet" href="/assets/course57/course.css">
<style>
ul li:last-child {
background-color: #ff3300;
}
ul:last-of-type li {
background-color: #339933;
}
ul:last-of-type li:last-of-type {
background-color: #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>
<div class="paper">
<h1>Как раскладывать пасьянс?</h1>
<p>Как хотите, так и раскладывайте.</p>
</div>
</body>
</html>
Псевдокласс :nth-of-type [7/20]
Псевдокласс :nth-of-type работает почти так же, как и :nth-child. Разница заключается в том, что он учитывает тип элемента.
Вы можете обратиться к разбору примера в пятом задании, чтобы разобраться в отличиях этих селекторов.
Еще пример. Если в текущем задании мы используем такие селекторы:
ul:nth-child(2) { }
ul:nth-of-type(2) { }
То верхний cелектор выберет второй по счёту дочерний элемент и этот элемент должен быть ul. В нашем случае выберется первая строка карт.
А нижний селектор выберет второй по счету ul среди дочерних ul. В нашем случае выберетсявторая строка карт.
Информация о синтаксисе :nth-child описана в задании Псевдокласс :nth-child курса «Селекторы, часть 1». Вот неплохая дополнительная статья о различиях :nth-child и :nth-of-type и еёперевод на Хабре.
style2-7.html
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<title>Псевдокласс :nth-of-type</title>
<link rel="stylesheet" href="/assets/course57/course.css">
<style>
ul:nth-of-type(even) li {
background-color: #ff3300;
}
ul:nth-of-type(3) li:nth-of-type(3) {
background-color: #339933;
}
ul:nth-of-type(1) li:nth-of-type(odd) {
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>