Псевдокласс :empty [11/20]
Псевдокласс :empty, выбирает только те теги, у которых нет дочерних элементов (в том числе текстовых узлов). Учтите, что даже переход на новую строку считается текстовым узлом, помните об этом в процессе проектирования структуры страницы.
Пример:
ul:empty {
...
}
В данном случае выберутся все пустые элементы ul.
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<title>Псевдокласс :empty</title>
<link rel="stylesheet" href="/assets/course57/course.css">
<style>
ul:empty {
height: 70px;
border: 2px dashed #55bb99;
}
li:not(:empty) {
width: 60px;
height: 90px;
}
li:not(:empty) span {
display: block;
}
</style>
</head>
<body>
<ul class="cards"></ul>
<ul class="cards">
<li class="queen heart"></li>
</ul>
<ul class="cards">
<li class="king club"></li>
<li class="ace spade"><span>A</span></li>
<li class="jack heart"></li>
</ul>
<ul class="cards">
<li class="ace spade"></li>
<li class="jack heart"></li>
<li class="ace spade"></li>
<li class="ace heart"></li>
<li class="queen diamond"><span>Q</span></li>
</ul>
</body>
</html>
Псевдокласс :only-child [12/20]
Псевдокласс :only-child пригодится, когда нужно прописать индивидуальные стили для элемента, который является единственным дочерним элементом внутри родительского контейнера.
Пример:
li:only-child {
...
}
Сработает, когда этот <li> в списке единственный.
Cелектор :only-child эквивалентен селектору elem:last-child:first-child.
Выполнить задание
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<title>Псевдокласс :only-child</title>
<link rel="stylesheet" href="/assets/course57/course.css">
<style>
li:only-child {
width: 60px;
height: 90px;
}
ul:only-child {
padding: 10px;
border: 2px dashed #55bb99;
}
</style>
</head>
<body>
<div class="group">
<ul class="cards">
<li class="queen heart"></li>
</ul>
<ul class="cards">
<li class="king club"></li>
<li class="ace spade"></li>
<li class="jack heart"></li>
</ul>
</div>
<div class="group">
<ul class="cards">
<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>
</ul>
</div>
</body>
</html>