Псевдокласс :nth-last-of-type [8/20]
Наверняка, вы и сами уже прекрасно догадались, как будет работать :nth-last-of-type.
Элементы выбираются по их расположению, отсчет ведется от конца, учитывается тип элемента.
Пример записи:
ul:nth-last-of-type(2) { }
Когда набор элементов не очень большой, все эти псевдоклассы :nth-child, :nth-of-type,:nth-last-child, :nth-last-of-type можно легко заменить один другим.
На более сложных структурах зачастую бывает удобнее использовать только определённые из них. Например, когда нужно выделять второй элемент с конца, но количество элементов в списке изменяется.
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<title>Псевдокласс :nth-last-of-type</title>
<link rel="stylesheet" href="/assets/course57/course.css">
<style>
ul:nth-last-of-type(2) li {
background-color: #ff3300;
}
ul li:nth-last-of-type(2) {
background-color: #339933;
}
ul:nth-last-of-type(2) li:nth-last-of-type(2) {
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>
Испытание: первая раскладка [9/20]
Большая часть этого курса посвящена картам. Давайте разложим небольшой пасьянс
У вас уже было похожее испытание в предыдущем курсе про селекторы. Вам не надо менять HTML-код, все CSS-правила уже содержат правильные стили.
Единственное, что от вас требуется — всего лишь подобрать нужные селекторы для каждого CSS-правила.
Пустые дивы в коде не надо никак оформлять. Они специально добавлены, чтобы доставить неудобства при использовании некоторых более простых селекторов.
В задании используются цвета:
#0099ff
#ff3300
#339933
Все селекторы, выделяющие карты, можно записать одним правилом. Освежить в памяти знания по :nth-child можно в интерактивном туториале.
style2-9.html
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<title>Испытание: первая раскладка</title>
<link rel="stylesheet" href="/assets/course57/course.css">
<style>
html,
body {
margin: 0;
padding: 0;
font-family: "Arial", sans-serif;
}
body {
min-width: 550px;
min-height: 250px;
padding: 10px;
}
.cards {
width: 500px;
}
.cards li::before {
font-family: "Courier", monospace;
}
li:not(:nth-of-type(4)):not(:first-of-type)
{
margin-left:15px;
}
li:not(:nth-of-type(4))
{
width: 36px;
height: 54px;
}
ul li:nth-of-type(4) {
margin-right: 30px;
margin-left: 15px;
}
.diamond:nth-child(2n)
{
background-color: #0099ff;
}
ul:not(:nth-of-type(2)) li:nth-of-type(2)
{
background-color: #ff3300;
}
ul:nth-of-type(4) > li:nth-of-type(3n)
{
background-color: #339933;
}
</style>
</head>
<body>
<div></div>
<ul class="cards">
<div></div>
<li class="six heart"></li>
<li class="seven spade"></li>
<li class="eight club"></li>
<li class="nine diamond"></li>
<li class="ten spade"></li>
<li class="jack heart"></li>
<li class="queen club"></li>
<li class="king spade"></li>
<li class="ace diamond"></li>
<div></div>
</ul>
<ul class="cards">
<div></div>
<li class="six spade"></li>
<li class="seven club"></li>
<li class="eight diamond"></li>
<li class="nine heart"></li>
<li class="ten diamond"></li>
<li class="jack club"></li>
<li class="queen spade"></li>
<li class="king club"></li>
<li class="ace heart"></li>
<div></div>
</ul>
<ul class="cards">
<div></div>
<li class="six diamond"></li>
<li class="seven heart"></li>
<li class="eight spade"></li>
<li class="nine club"></li>
<li class="ten heart"></li>
<li class="jack spade"></li>
<li class="queen diamond"></li>
<li class="king heart"></li>
<li class="ace club"></li>
<div></div>
</ul>
<ul class="cards">
<div></div>
<li class="six club"></li>
<li class="seven diamond"></li>
<li class="eight heart"></li>
<li class="nine spade"></li>
<li class="ten club"></li>
<li class="jack diamond"></li>
<li class="queen heart"></li>
<li class="king diamond"></li>
<li class="ace spade"></li>
<div></div>
</ul>
<div></div>
</body>
</html>