Селекторы, часть 2
Рассмотрим продвинутые селекторы, такие как :nth-last-of-type или:only-child. Также научимся использовать псевдоэлементы, такие как::before и ::after.
Начать
Объединение селекторов [1/20]
Иногда может потребоваться выбрать элементы, которые одновременно удовлетворяют сразу нескольким условиям.
В CSS есть запись, которая фактически выполняет операцию логического умножения, «И». Селекторы, применяемые к одному элементу, в этом случае пишутся без пробелов:
.class1.class2 { }
Стили будут применяться ко всем элементам, которые одновременно имеют класс class1 и class2. Ведь это же не новость для вас, что HTML-элементы могут одновременно иметь несколько классов. Например:
<div class="class1 class2">Блок с двумя классами</div>
По такому же принципу можно объединять любое количество абсолютно разных селекторов. И чем больше селекторов вы объединяете, тем больше условий должно совпасть для применения стилей.
В программировании похожую операцию часто обозначают как &&. Например:
if (firstSelector && secondSelector) { ... }
style-2-1.html
<!DOCTYPE html>
<html lang="ru'">
<head>
<meta charset="utf-8">
<title>Объединение селекторов</title>
<link rel="stylesheet" href=" https://htmlacademy.ru /assets/course57/course.css">
<style>
.spade.queen {
background-color: #ff3300;
}
.heart:nth-child(1) {
background-color: #339933;
}
.diamond.ace:nth-child(7) {
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="ace diamond"></li>
<li class="queen diamond"></li>
</ul>
<ul class="cards">
<li class="jack heart"></li>
<li class="queen spade"></li>
<li class="ace diamond"></li>
<li class="ace spade"></li>
<li class="ace heart"></li>
<li class="queen diamond"></li>
<li class="ace diamond"></li>
</ul>
</body>
</html>
