Селекторы, часть 2 / Объединение селекторов [1/20]
×

Объединение селекторов [1/20]

Иногда может потребоваться выбрать элементы, которые одновременно удовлетворяют сразу нескольким условиям.

В CSS есть запись, которая фактически выполняет операцию логического умножения, «И». Селекторы, применяемые к одному элементу, в этом случае пишутся без пробелов:

.class1.class2 { }

Стили будут применяться ко всем элементам, которые одновременно имеют класс class1 и class2. Ведь это же не новость для вас, что HTML-элементы могут одновременно иметь несколько классов. Например:

<div class="class1 class2">Блок с двумя классами</div>

По такому же принципу можно объединять любое количество абсолютно разных селекторов. И чем больше селекторов вы объединяете, тем больше условий должно совпасть для применения стилей.

В программировании похожую операцию часто обозначают как &&. Например:

if (firstSelector && secondSelector) { ... }

Выполнить задание
HTML
<!DOCTYPE html> <html lang="ru'"> <head> <meta charset="utf-8"> <title>Объединение селекторов</title> <link rel="stylesheet" href="/assets/course57/course.css"> </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>
CSS
HTML Academy
  1. Задайте фон #ff3300 пиковым .spade дамам .queen.
  2. Задайте фон #339933 червям .heart, которые стоят на первом месте в своей строке.
  3. Задайте фон #0099ff бубновым .diamond тузам .ace, которые стоят на последнем месте в своей строке.
Теория Проверить Следующее задание
Идёт запись на курс Базовый HTML и CSS #16, который стартует 16 января.

Обсуждение и комментарии

Если у вас возникли сложности при прохождении задания, то вы можете обратиться за помощью на наш форум. Мы отслеживаем сообщения и постараемся ответить максимально быстро.

Пожалуйста, не пишите решение задач. Такие сообщения будут удаляться.

Перейти на форум или открыть комментарии.