Укажите цель, комбинируя селекторы
В этой статье мы поговорим о комбинировании селектора, чтобы сделать более конкретный выбор.
Исходный код:
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.