Комбинированные селекторы
Селекторы бывают сложнее чем просто по классу, тегу или идентификатору. Перечисляем все доступные комбинированные селекторы.
Время чтения: меньше 5 мин
Открыть/закрыть навигацию по статье
- Кратко
- Группировка: .element1, .element2
- Пример
- Как пишется
- Как понять
- Пример
- Как пишется
- Как понять
- Пример
- Как пишется
- Как понять
- Пример
- Как пишется
- Как понять
- Подсказки
- Пример
- Как пишется
- Как понять
- Пример
- Как пишется
- Как понять
- Realetive советует
- Роман Баранников советует
Контрибьюторы:
Обновлено 10 октября 2022
Кратко
Скопировать ссылку «Кратко» Скопировано
Иногда при написании стилей мы хотим обратиться к селектору более точно, чем просто по имени класса или тега. Для этого можно использовать различные комбинации.
Группировка: .element1 , . element2
Скопировать ссылку «Группировка: .element1, .element2» Скопировано
Пример
Скопировать ссылку «Пример» Скопировано
Если нескольким селекторам нужно задать одно и то же правило, то можно написать длинно:
h1 font-weight: bold;> h2 font-weight: bold;> h3 font-weight: bold;>h1 font-weight: bold; > h2 font-weight: bold; > h3 font-weight: bold; >А можно перечислить все селекторы через запятую и написать всего одно CSS-правило:
h1, h2, h3 font-weight: bold;>h1, h2, h3 font-weight: bold; >Как пишется
Скопировать ссылку «Как пишется» Скопировано
Селекторы просто записываются в произвольном порядке через запятую:
.selector1,code,#id,[attr="value"] color: red;>.selector1, code, #id, [attr="value"] color: red; >Если вы перечисляете селекторы через запятую, то правила будут применяться к каждой из групп:
.heading span,.block,.wrapper color: red;>.heading span, .block, .wrapper color: red; >Как понять
Скопировать ссылку «Как понять» Скопировано
В примере свойство применится для трёх типов селекторов:
- Для всех внутри класса .heading (на любом уровне вложенности);
- для всех элементов с классом .block ;
- для всех элементов с классом .wrapper .
Объединение: .class1 . class2
Скопировать ссылку «Объединение: .class1.class2» Скопировано
Пример
Скопировать ссылку «Пример» Скопировано
.selector.selector_modificator color: red;>.selector.selector_modificator color: red; >Как пишется
Скопировать ссылку «Как пишется» Скопировано
Этот приём применим только для классов и атрибутов, потому что только их может быть больше одного. Селекторы записываются слитно. Стили будут применены только к тому элементу, который содержит все перечисленные селекторы.
Как понять
Скопировать ссылку «Как понять» Скопировано
Такое «склеивание» объединяет селекторы в одно правило.
Потомки: .element1 . element2
Скопировать ссылку «Потомки: .element1 .element2» Скопировано
Пример
Скопировать ссылку «Пример» Скопировано
article h3 color: red;>article h3 color: red; >Как пишется
Скопировать ссылку «Как пишется» Скопировано
Селекторы записываются последовательно через пробел.
Как понять
Скопировать ссылку «Как понять» Скопировано
Последовательность селекторов отражает вложенность — каждый следующий селектор должен обязательно находиться на каком-то уровне вложенности в предыдущий селектор.
Непосредственно вложенные: .element1 > . element2
Скопировать ссылку «Непосредственно вложенные: .element1 .element2» Скопировано
Пример
Скопировать ссылку «Пример» Скопировано
article > h3 color: red>article > h3 color: red >Как пишется
Скопировать ссылку «Как пишется» Скопировано
Селекторы разделяются знаком > .
Как понять
Скопировать ссылку «Как понять» Скопировано
Последовательность селекторов отражает непосредственную вложенность — селектор справа от оператора должен быть прямым потомком селектора из левой части:
article > h3 color: red;>article > h3 color: red; >К h3 . article _ _ heading стили для article > h3 не применятся, т. к. прямой потомок — div . article _ _ header , а не :
Заголовок
article class="article"> div class="article__header"> h3 class="article__heading">Заголовокh3> div> article>В этом примере стили к заголовку применятся, потому что является прямым потомком :
Заголовок
article class="article"> h3 class="article__heading">Заголовокh3> article>И тут тоже всё в порядке — по-прежнему является прямым потомком , потому что располагается на ближайшем уровне вложенности, хоть и следует после div . article _ _ header :
…Заголовок
article class="article"> div class="article__header">…div> h3 class="article__heading">Заголовокh3> article>Подсказки
Скопировать ссылку «Подсказки» Скопировано
�� Такая комбинация удобна, чтобы выбрать элемент, основываясь на его точном расположении в структуре документа.
Смежные: .element1 + . element2
Скопировать ссылку «Смежные: .element1 + .element2» Скопировано
Пример
Скопировать ссылку «Пример» Скопировано
label + input color: red;>label + input color: red; >Как пишется
Скопировать ссылку «Как пишется» Скопировано
Селекторы объединяются знаком + .
Как понять
Скопировать ссылку «Как понять» Скопировано
Элемент справа от + должен следовать в HTML сразу за элементом слева от + . Проще говоря, правый элемент должен быть соседом левого элемента, чтобы смежный селектор сработал.
Код из примера применится только к такому , который стоит сразу после :
label + input color: red;>label + input color: red; >К этому не применится, т. к. перед идёт :
…
label>label> p>…p> input>При такой разметке стиль применится только к первому , но не ко второму:
label>Лейблlabel> input> input>label>Лейблlabel> div> input> div>Последующие: .element1 ~ . element2
Скопировать ссылку "Последующие: .element1 ~ .element2" Скопировано
Пример
Скопировать ссылку "Пример" Скопировано
.star:hover ~ .star color: red;>.star:hover ~ .star color: red; >Как пишется
Скопировать ссылку "Как пишется" Скопировано
Селекторы объединяются с помощью символа ~ (тильда).
Как понять
Скопировать ссылку "Как понять" Скопировано
Правило применится ко всем блокам, подходящим под правый селектор, при учёте, что они являются соседями блоков из селектора слева от ~ . При этом оба селектора должны иметь одного родителя и находиться на одном уровне вложенности. В HTML правый селектор должен идти после левого селектора.
На практике
Скопировать ссылку "На практике" Скопировано
Realetive советует
Скопировать ссылку "Realetive советует" Скопировано
�� Лучше записывать селекторы по одному на строчку — так их легче читать и редактировать:
.selector1,code,#id,[attr="value"] color: red;>.selector1, code, #id, [attr="value"] color: red; >�� Объединение увеличивает специфичность правила, поэтому это может быть удобно для переопределения свойств без !important :
Код ниже нельзя редактировать по каким-то причинам:
.class1 color: red;>.class1 color: red; >Увеличим специфичность, чтобы переопределить правило, описанное в нередактируемой части и потому имеющее больший вес:
.class1.class2 color: green;> .class1 color: red;>.class1.class2 color: green; > .class1 color: red; >В итоге текст в блоке, имеющем сразу и класс .class1 и класс .class2 , будет зелёного цвета.
�� Получается, что даже невинный пробел уже имеет значение при выборе селектора на любом уровне вложенности.
Независимо от уровня вложенности селектор article h3 «найдёт» с текстом «Очень вложенный заголовок» и любые другие , которые располагаются внутри :
Очень вложенный заголовок
Заголовок
article> div> div> div> div> div> div> div> div> div> h3>Очень вложенный заголовокh3> div> div> div> h3>Заголовокh3> div> div> div> div> div> div> article>+ Развернуть
Роман Баранников советует
Скопировать ссылку "Роман Баранников советует" Скопировано
�� С помощью смежного комбинатора удобно выбирать группу одинаковых элементов по принципу «все, кроме первого» — например, чтобы задать отступ.
li + li margin-top: 1em;>li + li margin-top: 1em; >Классический пример — вёрстка «звёздного» рейтинга. Для начала опишем структуру:
div class="rating"> button>★button> button>★button> button>★button> button>★button> button>★button> div>button border: none; background-color: transparent; font-size: 5em;> button:hover,button:focus,button:hover ~ button,button:focus ~ button color: #F498AD;>button border: none; background-color: transparent; font-size: 5em; > button:hover, button:focus, button:hover ~ button, button:focus ~ button color: #F498AD; >Но сейчас при наведении курсора будут выделяться все элементы после (то есть справа).
Чтобы это исправить, мы изменим порядок следования элементов с помощью CSS-свойства direction : rtl .
Добавим это свойство родителю звёздочек .rating :
.rating direction: rtl;> button border: none; background-color: transparent; font-size: 5em;> button:hover,button:focus,button:hover ~ button,button:focus ~ button color: #F498AD;>.rating direction: rtl; > button border: none; background-color: transparent; font-size: 5em; > button:hover, button:focus, button:hover ~ button, button:focus ~ button color: #F498AD; >Группирование
При создании стиля для сайта, когда одновременно используется множество селекторов, возможно появление повторяющихся стилевых правил. Чтобы не повторять дважды одни и те же элементы, их можно сгруппировать для удобства представления и сокращения кода. В примере 17.1 показана обычная запись, здесь для каждого селектора приводится свой набор стилевых свойств.
Пример 17.1. Стиль для каждого селектора
H1 < font-family: Arial, Helvetica, sans-serif; font-size: 160%; color: #003; >H2 < font-family: Arial, Helvetica, sans-serif; font-size: 135%; color: #333; >H3 < font-family: Arial, Helvetica, sans-serif; font-size: 120%; color: #900; >P
Из данного примера видно, что стиль для тегов заголовков содержит одинаковое значение font-family . Группирование как раз и позволяет установить одно свойство сразу для нескольких селекторов, как показано в примере 17.2.
Пример 17.2. Сгруппированные селекторы
H1, H2, H3 < font-family: Arial, Helvetica, sans-serif; >H1 < font-size: 160%; color: #003; >H2 < font-size: 135%; color: #333; >H3
В данном примере font-family единое для всех селекторов применяется сразу к нескольким тегам, а индивидуальные свойства уже добавляются к каждому селектору отдельно.
Селекторы группируются в виде списка тегов, разделенных между собой запятыми. В группу могут входить не только селекторы тегов, но также идентификаторы и классы. Общий синтаксис следующий.
Селектор 1, Селектор 2, . Селектор N
При такой записи правила стиля применяются ко всем селекторам, перечисленным в одной группе.
Вопросы для проверки
1. Какой цвет фона будет у элемента с классом button при включении приведённого стиля?
.bgzapas, .button, h1 < font-size: 1.2em; padding: 10px; background-color: #fcfaed; >.bgzapas < background-color: #e7f2d7; >.button, h2 < width: 95px; font-size: 11px; color: #f3fced; background-color: #5ca22e; >.bgzapas, .button
- #fcfaed
- #e7f2d7
- #f3fced
- #5ca22e
- #d9d7f2
Вложенные селекторы
Если селекторы по тегам нужно использовать пореже, а по классам почаще, то придётся каждому тегу в разметке добавлять класс? Нет, это ненужное усложнение кода.
Зачем мы использовали классы? Чтобы ограничить количество тегов, к которым применится CSS-правило: не ко всем тегам, а к тегам с нужным классом. Но ограничивать область применения стилей можно и по-другому. Вот список внутри навигации:
Как применить стили только к этому списку? Первый способ: добавить ему класс и использовать селектор по этому классу. Второй способ: использовать специальный селектор, чтобы стили применялись к спискам внутри блока с классом blog-navigation .
Вы можете комбинировать любые типы селекторов через пробел. Такие селекторы называются вложенными или контекстными и читаются справа налево. Например:
nav a /* выберет теги a внутри тегов nav */ .menu ul /* теги ul внутри тегов с классом menu */ .post .title /* теги с классом title внутри тегов с классом post */Узнали селектор nav a из второго задания? Он помог сделать ссылки белыми только в навигации, в остальном тексте они остались синими.
Комбинировать можно любое количество селекторов, но лучше использовать двойную или максимум тройную вложенность. Вложенные селекторы спасают нас от необходимости придумывать имена классов и загромождать ими разметку.
Давайте изменим пару селекторов в стилях блога, а заодно улучшим оформление заголовков и элементов списка внутри навигации (уже используя правильные селекторы).
Перейти к заданию
- index.html Сплит-режим
- style.css Сплит-режим
Сайт начинающего верстальщика Сайт начинающего верстальщика
Всем привет! Добро пожаловать на мой первый сайт. Ещё недавно я понятия не имел, кто такой верстальщик, а теперь я нашёл тренажёры по HTML и CSS и поставил перед собой цель — стать им. У меня даже появился инструктор — Кекс, который не позволит мне расслабиться и будет следить за моими успехами.
Моё первое задание — вести дневник и честно писать обо всех своих свершениях.
Раздел про навыки С чем можно комбинировать html
Таблицы стилей состоят из набора правил(1). Каждое правило состоит из одного или нескольких селекторов(3) и блока определения(2), выделяющегося фигурными скобками.
Блок определения может содержать одно или несколько свойств(4) отделенных точкой с запятой (;) (после последнего свойства точка с запятой необязательна). Каждое свойство должно иметь значение(5) отделенное двоеточием (:).
Каждому тегу в HTML соответствует так называемый селектор CSS. К примеру, тегу <p>соответствует CSS селектор p, с помощью которого мы можем обратиться ко всем абзацам HTML страницы и, например, покрасить их всех одновременно в красный цвет. После селектора следует ставить фигурные скобки <>, внутри которых следует писать CSS свойства.
CSS свойства и задают цвет, размер шрифта и другие интересные вещи. Их следует писать в таком формате: имя свойства, потом двоеточие, потом значение этого свойства (например, свойство - это цвет, а "красный" - это значение). Потом нужно поставить точку с запятой и можно писать следующее свойство.
Давайте покрасим все абзацы в красный цвет:
Так код будет выглядеть в браузере:
А теперь давайте покрасим абзацы в зеленый цвети сделаем их большого размера:
Так код будет выглядеть в браузере:
Обратите внимание на оформление CSS кода: каждое новое свойство пишется с новой строки.
2.Селекторы CSS
С помощью селекторов Вы можете выбирать элементы на странице, которые хотите оформить.
В CSS существуют следующие виды селекторов:
Селекторы выбора
Вы можете выбирать элементы на странице для оформления по названию тэга.
Селектор id
Данный вид селекторов позволяет производить более точную выборку и используется, когда необходимо выбрать только один определенный элемент на странице, с предварительно заданным идентификатором.
Идентификатор для элемента задается с помощью атрибута id (<p >текст</p>).
Для того, чтобы затем оформить данный элемент необходимо обратиться к идентификатору в таблицах стилей добавив перед ним символ "#" (#идентификатор ).
#test1
color:green;
font-family:verdana;
font-size:1.2em;
>3.Селектор class
Данный вид селекторов позволяет выбирать для оформления не единственный элемент, а группу элементов.
С помощью атрибута class можно задать, что элемент относится к группе (<p >текст</p>).
Для того, чтобы затем оформить эту группу необходимо в таблицах стилей обратится к имени группы добавив перед ней символ "." (.имя_группы ).
.test1
<
color:green;
font-family:verdana;
font-size:1.2em;
>4.Комбинирование селекторов
Для более точного выбора элементов в CSS может использоваться комбинирование селекторов.
Например, Вы можете комбинировать селекторы тэгов с селекторами class:
h2.test1
<
color:green;
font-family:verdana;
font-size:1.2em;
>Свойства будут применены только к тем элементам с , которые являются заголовками.
Также Вы можете комбинировать селекторы тэгов:
div p
<
color:green;
font-family:verdana;
font-size:1.2em;
>Свойства будут применены только к тем элементам p, которые находятся внутри элементов div
Символ "+" позволяет выбирать элементы, которые идут сразу после указанного.
div+p
<
color:green;
font-family:verdana;
font-size:1.2em;
>Свойства будут применены только к тем элементам p, которые идут сразу после элементов div
Следующие задания предлагаю выполнить самостоятельно
Практическое задание 1
Оформите элементы согласно их описанию.
<h3>Покрасьте меня в розовый цвет (color:pink).</h3>
<p>Данный элемент должен остаться неоформленным.</p>
p >Покрасьте меня в серый цвет (color:grey).</p>
<div>Данный элемент должен остаться неоформленным.</div>
<div><p>Покрасьте меня в красный цвет (color:red).</p></div>
<h4>Данный элемент должен остаться неоформленным.</h4>
<p>Покрасьте меня в зеленый цвет (color:green).</p>
<p >Покрасьте меня в желтый цвет (color:yellow).</p>