Псевдокласс :only-of-type [13/20]
Псевдокласс :only-of-type работает почти так же, как и :only-child. Отличие состоит в том, что он учитывает тип элемента.
Пример:
p:only-of-type {
...
}
В данном случае стили будут применены к элементу p, если это единственный p внутри своего родителя.
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<title>Псевдокласс :only-of-type</title>
<link rel="stylesheet" href="/assets/course57/course.css">
<style>
ul:only-of-type {
padding: 10px;
border: 2px dashed #55bb99;
}
.paper p:only-of-type {
color: #339966;
}
</style>
</head>
<body>
<div class="group">
<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 class="paper">
<h1>Как раскладывать пасьянс?</h1>
<p>Как хотите, так и раскладывайте.</p>
</div>
<div class="paper">
<h1>Как выигрывать в покер?</h1>
<p>Блефуйте!</p>
<p>Блефуйте!</p>
<p>Блефуйте!</p>
</div>
</div>
</body>
</html>
Псевдоэлемент ::before [14/20]
Псевдоэлемент before позволяет с помощью CSS добавить псевдотег внутрь другого элемента и оформить его. Cодержимое псевдотега задаётся с помощью свойства content.
Например, у нас есть такой HTML:
<div class="queen heart">
<em>Дама</em>
</div>
Добавим CSS-правило с необычным селектором с двойным двоеточием:
.heart::before { content: "Черви"; }
И HTML изменится вот так:
<div class="queen heart">
<before>Черви</before>
<em>Дама</em>
</div>
Но! Исходный HTML-код не изменится, тег <before> не попадёт в код страницы, а будет «виртуально» существовать где-то в браузере. Поэтому мы и используем приставку псевдо.
Ведёт себя псевдотег так же, как обычный <span> с текстом. Ему можно задавать дополнительные стили, например:
.heart::before {
content: "Черви";
color: red;
}
Чтобы псевдоэлемент появился, ему необходимо задать свойство content. Достаточно даже пустой строки в значении свойства — content: "";.