- Комбинированные селекторы
- Кратко
- Группировка: .element1 , . element2
- Пример
- Как пишется
- Как понять
- Объединение: .class1 . class2
- Пример
- Как пишется
- Как понять
- Потомки: .element1 . element2
- Пример
- Как пишется
- Как понять
- Непосредственно вложенные: .element1 > . element2
- Пример
- Как пишется
- Как понять
- Подсказки
- Смежные: .element1 + . element2
- Пример
- Как пишется
- Как понять
- Последующие: .element1 ~ . element2
- Пример
- Как пишется
- Как понять
- На практике
- Realetive советует
- Роман Баранников советует
- Селекторы CSS
- Базовые селекторы тегов
- Классы
- Идентификаторы
Комбинированные селекторы
Селекторы бывают сложнее чем просто по классу, тегу или идентификатору. Перечисляем все доступные комбинированные селекторы.
Время чтения: меньше 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; >
Как понять
Скопировать ссылку «Как понять» Скопировано
В примере свойство применится для трёх типов селекторов:
Объединение: .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; >
Селекторы CSS
Поскольку мы не хотим стилизовать все наши элементы HTML одновременно, нам требуется возможность выбрать подмножество этих элементов.
Селекторы CSS определяют, к каким элементам мы хотим применить стиль.
Базовые селекторы тегов
Нацелиться на базовые теги HTML легко: просто используйте имя тега.
Есть прямая связь между именем тега HTML и используемым селектором CSS.
Классы
Учитывая, что мы, вероятно, не желаем стилизовать все абзацы или все заголовки одинаково, нам надо их различать.
Из всех атрибутов HTML атрибут class является наиболее важным для CSS. Он позволяет определить группу элементов HTML, на которые мы можем точно нацелиться. Просто поставьте точку перед именем класса который вы хотите использовать:
С другой стороны есть атрибут HTML class со значением date . Он должен совпадать с именем класса CSS.
Вы можете использовать любое имя для вашего класса, но оно не должно начинаться с цифры.
Селектор класса .date будет нацелен на все элементы HTML с атрибутом class="date" . Таким образом, следующие элементы HTML все будут стилизованы:
Мероприятие произойдёт в Имейте в виду, что имя тега не важно, учитывается только атрибут class .
Идентификаторы
Можно также использовать атрибут id в вашем HTML и определить его в вашем CSS с помощью решётки:
Идентификаторы похожи на классы, так как они тоже основаны на атрибуте HTML.