Комбинированные селекторы
Мы подошли с Вами к комбинированным селекторам CSS, это будет предпоследний селектор, который мы изучим, хотя это не все существующие селекторы. Однако если вы будете знать эти 5 селекторов, вы сможете сверстать абсолютно любой сайт.
Вспомним с Вами, какие селекторы мы изучили:
Селектор тегов
Селектор ID
Селектор class
Ведь не просто так, я решил Вам напомнить, что мы уже с Вами знаем. Комбинированные селекторы - это некая комбинация из уже нами изученных селекторов.
Рассмотрим пример:
<html>
<head>
<title>Комбинированные селекторы</title>
<link rel="stylesheet" href="css/styles.css" type="text/css" />
</head>
<body>
<div id="css_id">
<p class="css_class">Абзац текста с классом css_class.</p>
<h1>Обычный заголовок текста.</h1>
<p>Абзац текста с тегом <span>span</span> внутри.</p>
</div>
</body>
</html>
В файле css напишем следующее:
#css_id .css_class {
color: red;
}
#css_id h1 {
font-size: 15px;
}
#css_id p span {
font-size: 30px;
}
Результат выполнения кода:
Как видите, мы просто использовали наши знания, скомбинировав нужные нам селекторы, друг с другом.
В первом случае мы вложили в селектор ID, селектор class.
Во втором и третьем случае вложили в селектор ID, селектор тегов, т.е. скомбинировав их вместе.
Таким образом, мы можем выстраивать приоритет тегов, по степени их важности. Т.е. приоритетней будет в селекторе ID находящийся тег <h1>, чем мы просто напишем h1. Стили применятся именно к нашему комбинированному селектору, а селектор тега <h1> будет проигнорирован.
Если вы не поняли про приоритет тегов, то в скором будет написана статья об этом, где подробно разберем приоритет каждого селектора CSS.
