Css перечисление нескольких классов

Комбинированные селекторы

Селекторы бывают сложнее чем просто по классу, тегу или идентификатору. Перечисляем все доступные комбинированные селекторы.

Время чтения: меньше 5 мин

1. Кратко
2. Группировка: .element1, .element2
   1. Пример
   2. Как пишется
   3. Как понять
   1. Пример
   2. Как пишется
   3. Как понять
   1. Пример
   2. Как пишется
   3. Как понять
   1. Пример
   2. Как пишется
   3. Как понять
   4. Подсказки
   1. Пример
   2. Как пишется
   3. Как понять
   1. Пример
   2. Как пишется
   3. Как понять
   1. Realetive советует
   2. Роман Баранников советует

   Обновлено 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

   

   

   23.10.2014

   

   10136

   

   Введение в мультиклассы.

   В данной статье мы познакомимся с так называемыми сложными селекторами, особенностями их применения. Для более простого восприятия материала рекомендуем просмотреть пятый видео урок из курса HTML & CSS.

   Для начала вспомним, что таблицы стилей собираются из наборов правил, которые содержат один или несколько селекторов и конечно же содержат блок определений. Блок определений ограничен фигурными скобками и содержит в себе перечень свойств и выбранных для них значений.

   Селектором может быть любой элемент или HTML-тег, для которого возможно задание неких правил форматирования. Принцип определения селекторов довольно простой и имеет следующий синтаксис: Name < Style _ rules >.

   Здесь Name – это имя любого элемента на вашей странице, а Style_rules – описание правил стиля, которые вы собираетесь применить к элементу.

   Отдельно обратим ваше внимание на универсальный селектор, который используют, когда требуется установить стиль абсолютно для всех элементов, присутствующих в веб-документе. Он имеет следующий синтаксис:

   

   

   /*Используем универсальный селектор, который обозначается "*" */

   Источник

   Читайте также:  Укажите правильный порядок значений при одновременном задании css атрибутов рамки