Укажите цель, комбинируя селекторы

В этой статье мы поговорим о комбинировании селектора, чтобы сделать более конкретный выбор.

Исходный код:

https://www.udemy.com/course/a-complete-css-course/?couponCode=33A3ECA879D08B500198

Например, в следующем примере у нас есть html-страница с разными ‹p›

Некоторые ‹p› включают ‹a› с классом «важный». Некоторые ‹p› включают ‹span› с классами «очень» и «важно».

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<p>This is  <a class="important">important</a></p>
<p>This is just a paragraph</p>
<p>This is   <span class="very important">very important</span>
</p>
<span><div class="very">"very" that inside the span</div></span>
</body>
</html>

Если мы скажем

.important{
background-color: red;
}

Тогда независимо от того, какой тип элемента (‹span› или ‹a›), все с классом, равным важному, будут иметь красный цвет фона.

Объединение селектора

Если мы хотим выделить ‹промежуток› с классом, равным «важный». Мы можем сказать

span.important{
background-color: red;
}

Разница между наличием пространства и отсутствием пространства

Как видите, внутри html-страницы есть два ‹span›. Если мы хотим добавить оранжевую рамку к ‹span› с классом, равным ‹very›

Мы можем сказать

span.very{
border: 10px solid orange;
}

Помните, что между span и .very нет пробела.

Если между ними есть пробел, он нацелится на элемент с именем класса, равным «очень», которое находится внутри ‹span›. Например, если мы добавим пробел между

span .very{
border:10px solid green
}

‹div› с именем класса «very» будет обведен зеленой рамкой.

Объединение большего количества селекторов

Мы можем уточнить, если элементов ‹span› несколько.

<p>This is  <span class="important">important</span></p>
<p>This is just a paragraph</p>
<p>This is   <span class="very important">very important </span>
</p>
<span><span class="very">"very" that inside the span</span></span>

В файле CSS мы можем сказать

span.very.important{
border:10px solid orange;
color: white;
background-color: red;
}

Подписывайтесь на нас: YouTube, Medium, Udemy, Linkedin, Twitter.