Пост

Базовые селекторы в css

Типы базовых селекторов в css

Опубликовано Обновлено
Типы базовых селекторов в css
Типы базовых селекторов в css
Автор alex
24 мин. чтения
Базовые селекторы в css

Селектор - это такая структура, которая используется как условие определяющее каким элементам в дереве документа соответствует селектор.

Селекторы могут быть простыми или расширенными контекстными представлениями.

Универсальный селектор *

Универсальный селектор * применяется ко всем элементам на странице.

Пример 1. Размер шрифта для всего документа

1
2
3

* {
    font-size: 20px;
}

1
2
3

<p>Текст</p>
<b>Жирный текст</b>
<span>Просто текст</span>

В результате все элементы на странице будут размером 20px

Пример 2. Сброс отступов и полей для всех элементов

Сброс стилей по умолчанию используют для нормализации стилей браузера по умолчанию.

В примере элемент body и элементы p имеют отступы по умолчанию, данный стиль сбрасывает их в ноль.

1
2
3
4

* {
  margin: 0;
  padding: 0;
}

1
2
3

<p>Блок 1</p>
<p>Блок 2</p>
<p>Блок 3</p>

В итоге результат получается предсказуемым для дальнейшей стилизации.

Пример 3. box-sizing для всех элементов

Псевдоэлементы ::before и ::after не включают универсальный селектор, поэтому их нужно перечислять отдельно

Данный стиль меняет алгоритм расчета размеров элемента. Что в будущем упрощает управление размерами элемента, так как ширина элемента не будет увеличиваться.

Наглядно посмотрим на пример

Имеем несколько элементов p.

1
2
3
4
5
6
7
8
9
10
11

*,
*::before,
*::after {
  box-sizing: border-box;
}

p {
  padding: 20px;
  margin: 20px;
  width: 100px;
}

1
2
3

<p class="one">Блок 1</p>
<p class="two">Блок 2</p>
<p class="three">Блок 3</p>

С помощью javascript выведем размеры элемента.

Без box-sizing: border-box ширина элемента составляла 140px, а это padding с двух сторон. С применением этого стиля ширина будет четко заданной, это 100px.

1

console.log(document.querySelector('.one').getBoundingClientRect().width); // 100

В итоге, мы имеем четкий размер который указали.

Пример 4. Все элементы в рамках контекста

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

Первое правило, цвет для всего элемента p. А второе это цвет для всех элементов внутри p.

1
2
3
4
5
6

p {
  background-color: #0d6efd;
}
p * {
  background-color: #2bcc2b;
}

1
2
3
4
5

<p>
    <small>small 1</small>
    <small>small 2</small>
    <b>b 1</b>
</p>

Получаем результат, стиль применяется только к элементам внутри p, не включая сам p

Все элементы в рамках контекста Все элементы в рамках контекста

Пример 5. Применение стиля к каждому следующему элементу, кроме первого

Мы привыкли писать стили для каждого отступа или каждого блока, тут есть шанс что-то упустить. В случае с таким странным селектором отступ устанавливается в одну строку всем элементам в потоке, которые следуют за другим элементом в любых вариациях и в любом порядке.

1
2
3

* + * {
  margin-top: 100px;
}

1
2
3
4

<p>Первый</p>
<p>Второй</p>
<p>Третий</p>
<p>Четвертый</p>

Здесь в результате у нас только у каждого второго элемента в потоке будет верхний внешний отступ.

Универсальный селектор следует использовать с осторожностью в связи с широким охватом

Селектор элемента (тега) E

Селектор элемента соотносится с html элементам и находит их по имени тега.

Пример 1. Стиль для всех списков

В качестве примера рассмотрим списки ul.

1
2
3

ul {
  background-color: #77AAEE;
}

С такой разметкой

1
2
3
4
5
6
7
8
9
10
11
12
13

<ul>
    <li>Элемент списка 1</li>
</ul>
<div>
  Просто div
  <ul>
    <li>Элемент списка 2
      <ul>
        <li>Элемент списка 3</li>
      </ul>
    </li>
  </ul>
</div>

В результате стиль покрасили фон, применили ко всем элементам ul на странице.

Селектор элемента Селектор элемента

Пример 2. Применение стиля сразу для нескольких элементов

Чаще всего этот селектор используют в начале файла, когда переопределяют встроенные стили браузера

Применяем селектор тега сразу для нескольких элементов

1
2
3
4
5

h6, h5, h4, h3, h2, h1 {
  margin-top: 0;
  margin-bottom: 0.5rem;
  font-weight: 500;
}

1
2
3
4
5
6

<h1>Заголовок 1</h1>
<h2>Заголовок 2</h2>
<h3>Заголовок 3</h3>
<h4>Заголовок 4</h4>
<h5>Заголовок 5</h5>
<h6>Заголовок 6</h6>

В итоге задаем некие стили по умолчанию, для всех элементов h* на странице.

Пример 3. Последнее примененное правило

Представим у нас есть стили css для h1

1
2
3
4
5
6
7
8
9
10
11

h1 {
  color: #77AAEE;
}

h1 {
  color: #e0ff76
}

h1 {
  color: burlywood;
}

И разметка

1

<h1>Заголовок 1</h1>

Какой итоговый цвет h1 будет?

Итоговый цвет h1 будет burlywood, что это означает, что если для одного и того же элемента задано несколько правил, то применяется, то правило, которое указано последним.

Такой вот нюанс о котором нужно помнить.

Использовать с осторожностью, так как селектор элемента применим ко всем элементам вне зависимости от уровня вложенности.

Селектор по идентификатору (#)

Идентификатор - это уникальное имя элемента для всей страницы. Идентификатор в html указывается в атрибуте id.

Пример 1. Стиль для конкретного элемента

Базовый пример, стиль для конкретного элемента

1
2
3

#block {
  background-color: #2bcc2b;
}

1

<p id="block">123</p>

Результат очевиден, элемент будет найден по идентификатору и покрашен соответствующим цветом.

Пример 2. Специфичность и идентификаторы

Но что будет, если применять разный цвет к одному элементу используя разные идентификаторы.

Как браузер понимает какой цвет применять. Все дело в специфичности селекторов, где она выше, тот селектор и будет применен.

Рассмотрим пример. В комментариях указана специфичность селектора. Какая выше тот стиль и будет применен.

1
2
3
4
5
6
7
8
9
10
11

p#block { /*1.0.1*/
  background-color: #caac38;
}

#block { /*1.0.0*/
  background-color: #2bcc2b;
}

p { /*0.0.1*/
  background-color: #77AAEE;
}

1

<p id="block">123</p>

Результирующим цветом будет цвет селектора p#block, так как он имеет наивысшую специфичность.

Важно понимать, что идентификаторы чувствительны к регистру символов.

id элемента является глобальным свойством документа в javascript,через которое можно получить доступ к элементу.

Понимание специфичности, отдельная большая тема, которая рассматривается отдельно.

Селектор класса (.)

В отличие от идентификаторов классы у разных элементов могут повториться. Классы нужны преимущественно для стилизации элемента.

В html они задаются в атрибуте class.

Точка . - это то что отличает элемент от класса.

Пример 1. Базовое использование классов

Базовый пример типичного использования классов. Есть несколько разных элементов, нужно их стилизовать одним селектором.

1
2
3

.one {
  background-color: #0d6efd;
}

1
2
3

<header class="one">1</header>
<div class="one">2</div>
<small class="one">3</small>

В результате получаем что все элементы с классом one покрасятся в синий цвет.

Так же в сочетании с универсальным селектором получается такой же результат

1
2
3

*.one {
  background-color: #0d6efd;
}

Пример 2. Класс в сочетании с элементом.

В рамках элемента можно сузить поиск, только элементы с определенным классом

1
2
3

div.test {
  color: #2bcc2b;
}

1
2
3

<div class="test">1</div>
<div class="test2">1</div>
<div class="test3">1</div>

Только цвет текста первого div попадет под влияние правила.

Пример 3. Правило нескольких классов

Так как у элемента может быть несколько классов. В селекторе класса можно указать их несколько сразу.

Например

1
2
3

.test.test2 {
  color: #2bcc2b;
}

1
2
3

<div class="test test2">1</div>
<div class="test">2</div>
<div class="test2">3</div>

В данном случае селектор будет применение только к первому элементу div, так как только у него есть сразу два класса test test2.

Два соседних элемента никак не будет выбраны.

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

Пример 4. Вложенный класс

Поиск элементов вложенных друг в друга можно находить по их классам

1
2
3

.test .test2 {
  color: #2bcc2b;
}

1
2
3
4
5
6

<div class="test">
  <div class="test2">1</div>
</div>
<div class="test2">
  <div class="test1">2</div>
</div>

В результате селектор будет применение к первому div с последовательностью классов .test .test2

Одну и туже задачу поиска элементов можно решить несколькими способами.

Селектор по атрибуту ([a])

Здесь важен вообще факт наличия атрибута, либо его значение.

Селекторы по атрибуту имеют различные вариации использования. И так же как и все остальные селекторы можно комбинировать.

[a] наличие атрибута

Просто выбираем все элементы где есть указанный атрибут

Пример 1. Выбрать все элементы с атрибутом

1
2
3

[translate] {
  background-color: darkcyan;
}

1
2

<header translate="yes">header</header>
<div translate="no">div</div>

В данном случае будут выбраны два элемента, вне зависимости от значения атрибута

Пример 2. элемент с атрибутом

А теперь выберем элемент с определенным атрибутом

1
2
3

header[translate] {
  background-color: darkcyan;
}

1
2

<header translate="yes">header</header>
<div translate="no">div</div>

Здесь под условие подходит только элемент header.

[a=v] [a="v"] точное значение атрибута

Селектор атрибута с точным его значением.

Пример 1. Базовое использование

1
2
3
4
5
6
7

[title=test] {
  background-color: #0d6efd;
}
/* Или, что равнозначно*/
[title="test"] {
  background-color: #89c567;
}

1
2

<header title="test">header</header>
<div title="test">div</div>

По сути эти два элемента имеют одно и то же значение тега, значит они подходят под условие

Пример 2. Тег с определенным значением атрибута

В этом примере, нам нужен только элемент p. Укажем его в селекторе

1
2
3

p[title="test"] {
  background-color: #89c567;
}

1
2
3

<header title="test">header</header>
<div title="test">div</div>
<p title="test">p</p>

В результате покрасится в цвет только элемент p.

Для консистентности значение лучше указывать в кавычках.

Пример 3. Значение стиля

Так же ничего не мешает выбрать элементы по определенным значениям стиля. К примеру

1
2
3

[style="display: block;"] {
  background-color: #89c567;
}

1
2
3

<header style="display: block;">header</header>
<div style="display: block;">div</div>
<p style="display: block;">p</p>

[a~=v] значение одного из слов

Здесь если в атрибуте несколько слов, то будет выбрано одно из значений.

Пример 1. Выбор класса

В примере мы выбрали только элементы, где в значение атрибута class, есть определенное значение.

1
2
3

[class ~= "one"] {
  background-color: #89c567;
}

1
2
3

<header class="one two">header</header>
<div class="two">div</div>
<p class="one two">p</p>

В данном случае будет выбран элемент haeder и p.

Можно сделать проще и просто выбрать класс one.

1
2
3

.one {
  background-color: #89c567;
}

Результат будет такой же.

[a |= v] значение = v либо = v-

Этот тип селектора атрибута выбирает значение равное выбранному или после него следует символ -.

Пример 1. Определенные элементы

1
2
3

[class |= "two"] {
  background-color: #89c567;
}

1
2
3

<header class="two-123">header</header>
<div class="two">div</div>
<p class="one two">p</p>

В примере только header и div попадают под селектор.

Значение должно быть только одно (в элементе p два класса).

[a ^= v] значение должно начинаться с v

Здесь значение атрибута должно начинаться v

Пример 1. Значение атрибута начинается с текста

1
2
3

[class ^= "tw"] {
  background-color: #89c567;
}

1
2
3

<header class="two123123123">header</header>
<div class="twosdfsfsfdsdf">div</div>
<p class="werwerwer">p</p>

В данном примере значение класса, чтобы попасть под селектор должно начинаться с tw, а это header и div.

[a $= v] значение должно оканчиваться на v

Обратная ситуация, значение атрибута должно заканчиваться текстом.

Пример 1. Значение атрибута должно заканчиваться текстом

1
2
3

[class $= "est"] {
  background-color: #89c567;
}

1
2
3

<header class="test">header</header>
<div class="mest">div</div>
<p class="kerapa">p</p>

Под значение попадают элементы header и div, так как название их класса заканчивается на est.

[a *= v] атрибут содержит в себе значение v

Пример 1. Значение атрибута содержится в тексте

1
2
3

[title *= "success"] {
  background-color: #89c567;
}

1
2
3

<div title="1success1">1</div>
<div title="uccess">2</div>
<div title="no-desigsuccesses">3</div>

В данном случае попадают только первый и третий div, так как они содержут в атрибуте title текст success.

Пример 2. Игнорирование регистра символов

Иногда бывает полезно, вообще игнорировать регистр. Для этого в конце селектора нужно добавить i.

1
2
3

[title *= "success" i] {
  background-color: #89c567;
}

1
2
3

<div title="success">1</div>
<div title="Success">2</div>
<div title="no-desigSuCcEsses">3</div>

В данном случае подходят все три элемента.

Вложенный (потомков) селектор (E E)

Вложенный селектор или селектор потомков управляет вложенными элементами друг в друга. Правая часть селектора это родительские элементы, а последующие вложенные в них.

Пример 1. Базовый пример вложенного селектора

1
2
3

p span {
  background-color: #2bcc2b;
}

1
2
3
4

<p>
  <span>span</span>
  <span>span</span>
</p>

Здесь понятно, элемент span должен быть сложен в p. В итоге попадают два элемента span.

Тут важно понимать, что элемент span может быть в p на любом уровне вложенности. Например

1
2
3
4
5
6
7
8
9
10
11
12
13
14

<div>
  <div>
    <main>
      <header>
        <div>
          <p>
            <span>span</span>
            <span>span</span>
          </p>
        </div>
      </header>
    </main>
  </div>
</div>

Такая разметка тоже подходит.

Пример 2. Большой уровень вложенности

Так же может быть сколь угодно большой уровень сложности селекторов

1
2
3

div .one #main .my-div p .span {
  background-color: #818e81;
}

1
2
3
4
5
6
7
8
9
10
11
12

<div>
  <div class="one two">
    <main id="main">
      <div class="my-div">
        <p>
          <span class="span">span</span>
        </p>
      </div>
      <div class="no-div"></div>
    </main>
  </div>
</div>

Например, под действие селектора попадает элемент span который мы и нашли по цепочке вложенных селекторов.

Пример 3. Предок-потомок

1
2
3

div p {
    color: red;
}

1
2
3
4
5
6
7

<div>
  <p>Это дочерний элемент div.</p>
  <section>
    <p>Это вложенный элемент, но не прямой потомок div.</p>
  </section>
</div>
<p>Это элемент вне div.</p>

Подойдут первый p и вложенный p в section, так как они находятся на любом уровне вложенности от div.

Соседний (смежный) селектор (E + E)

Если нужно управлять соседними элементами используется символ +. То есть элемент, который идет непосредственно за текущим.

Пример 1. Простой пример смежных селекторов

В качестве простого примера, посмотрим на смежный селектор p.

1
2
3

p + p {
  color: #f4bf75;
}

1
2
3
4
5

<p>p1</p>
<small>small 1</small>
<p>p2</p>
<p>p3</p>
<p>p4</p>

В данном случае нам подойдут элементы p3 и p4 так как только они идут непосредственно за элементом p.

Дочерний селектор (E > E)

Выбирает только те элементы которые являются непосредственно потомками указанного элемента.

Пример 1. Пример дочернего селектора

1
2
3

p > span {
  color: #f4bf75;
}

1
2
3
4

<p>
  <span>span</span>
</p>
<span>span</span>

Здесь первый элемент span подходит только потому, что он является непосредственным потомком p.

Пример 2. Родитель - ребенок

1
2
3

div > p {
    color: red;
}

1
2
3
4
5
6
7

<div>
  <p>Это дочерний элемент div.</p>
  <section>
    <p>Это вложенный элемент, но не прямой потомок div.</p>
  </section>
</div>
<p>Это элемент вне div.</p>

Под наше условие попадает только первый p вложенный в div, именно он непосредственный ребенок div.

Пример 3. Прямой потомок

1
2
3
4

.test > * {
  border-bottom: 1px double red;
  margin-bottom: 5px;
}

1
2
3
4
5
6
7
8
9
10
11

<div class="test">
  <p>Прямой потомок 1</p>
  <div>Прямой потомок 2</div>
  <ul>
    <li>Не прямой потомок (внутри UL)</li>
    <li>Не прямой потомок (внутри UL)</li>
    <li>Не прямой потомок (внутри UL)</li>
    <li>Не прямой потомок (внутри UL)</li>
    <li>Не прямой потомок (внутри UL)</li>
  </ul>
</div>

Если внимательно посмотреть на разметку, можно увидеть закономерность, стиль применятся только к прямым потомкам ко всем элементам, а это p, div, ul, то что внутри ul, элементы li под правило не подходят.

Прямой потомок Прямой потомок

Отличие дочернего (E > E) и смежного (E E) селектора

  • Дочерний селектор (E > E) - это непосредственный потомок только одного уровня вложенности.
  • Смежный селектор (E E) - это селектор любого потомка любого уровня вложенности.

Пример 1. Показываем отличие на примере абзацев

1
2
3
4
5
6
7

article > p {
  font-weight: bold;
}

article p {
  color: green;
}

1
2
3
4
5
6

<article>
  <p>Этот абзац находится внутри article.</p>
  <div>
    <p>Этот абзац находится внутри div, который находится внутри article.</p>
  </div>
</article>

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

Родственный селектор (E ~ E)

Выбирает элементы, которые являются общими потомками одного родителя и следуют за ним.

Пример 1. Использование селектора

1
2
3

.test ~ div {
  background-color: #90a959;
}

1
2
3
4
5
6
7

<div class="test">
  <div>test 1</div>
  <div>test 5</div>
</div>
<div>test 2</div>
<div>test 3</div>
<div>test 4</div>

В текущей расладке, под действие селектора попадают div элементы test2, test3, test4, так как эти элементы являются потомками одного родителя.

Пример 2. Скрытие и показ элементов

Еще пример, на котором видно как можно это использовать.

1
2
3
4
5
6

div,p {
  display: none;
}
#switch:checked ~ div {
  display: block;
}

1
2
3
4
5
6
7
8
9
10

<form>
  <input type="checkbox" id="switch">
  <label for="switch">Показать</label>
  <p>p1</p>
  <p>p2</p>
  <p>p3</p>
  <div>div 1</div>
  <div>div 2</div>
  <div>div 3</div>
</form>

В примере форма, где все ее дочерние блоки по умолчанию скрыты, имеют dispay:none, но при клике на чекбокс, показываются только элементы div, несмотря на то, что в разметке так же есть элементы p.

Пример того, что даже без javascript можно делать базовые манипуляции с элементами.

Группировка селекторов (selector1,selector2)

Если есть селекторы, которым нужно задать одни и те-же правила, можно перечислить через запятую

1
2
3

h1, h2, h3, h4, h5, h6 {
  background-color: #0a3069;
}

Селекторы могут быть любого типа и никак не связанными между собой.

Рекомендуется переносить каждый селектор на новую строку

Объединение селекторов (selector.selector[selector])

Атрибуты и классы которые содержат все правила сразу

1
2
3

div.p.h[title="title"]{
  color: red;
}

1
2
3
4

<div class="p h" title="title">div 1</div>
<div class="p g" title="title">div 2</div>
<div class="p h" title="title1">div 3</div>
<div class="p h" title="title">div 4</div>

В данном примере попадет div1 и div4 так как селектор полностью совпадает.

Стили будут применены только к элементам где будут все перечисленные селекторы.

Кратко

Краткая справка по базовым селекторам:

  1. Универсальный селектор * - выбирает все селекторы на странице
    1. + Легко выбрать все элементы.
    2. + Стили применяются сразу ко всем элементам.
    3. - Скорость работы селектора может быть ниже.
    4. - Может применятся стили к элементам к которым не должны применятся из-за “могущества” селектора
    5. * {color: #2bcc2b;}
  2. Селектор тега selector - позволяет выбрать все элементы с указанным тегом.
    1. + Стиль применятся ко всем элементам указанного типа на странице.
    2. - Стиль может быть применен глобально ко всем элементам, возможно это не то что нужно.
    3. ? Селектор применим ко всем элементам на странице все зависимости от уровня вложенности.
    4. ? Можно использовать в качестве отправной точки для стилизации элементов данного типа
    5. div { color: #bcbecc;}
  3. Идентификатор #selector - выбор одного элемента на основе его атрибута id
    1. + Быстродействие, элемент по id будет найден быстро.
    2. - На странице может быть только один элемент с указанным id.
    3. ? Возможны проблемы с переопределением селектора, рассмотрите другие варианты селектора.
    4. #block { background-color: #caac38;}.
  4. Селектор класса .selector - выбор всех элементов с определенным классом
    1. ? В основном используется для стилизации элементов, считается очень гибким элементом стилизации
    2. + Один и тот же класс можно применять сразу к нескольким элементам.
    3. .class {background-color: #0d6efd;}
  5. Селектор с указанным атрибутом [selector]
    1. [lang] { color: #000000;} Просто содержит указанный атрибут
  6. Селектор с указанным атрибутом и его значением [selector="value"]
    1. [lang="ru"] { color: rgba(55, 153, 189, 0.74);}
  7. Селектор с указанным атрибутом содержащий определенное значение разделенных пробелами [selector~="value"]
    1. [class~="o"] { color: rgba(244, 6, 6, 0.74);}
  8. Селектор выбирает элементы с атрибутом, начинающимся со значения, за которым идет символ - - [selector|="value"]
    1. [lang |="en"] { color: rgba(179, 213, 156, 0.74);}
  9. Селектор атрибута который выбирает все элементы, значение атрибутов которых, начинается со значения [selector^="value"]
    1. [href^="https://"] { background-color: #2e2f31;}
  10. Атрибут, значение которого заканчивается определенным символом [selector$="value"].
    1. [href$="1"],[class$="1"] { background-color: #7e9335;} В примере мы сгруппировали селекторы, чтобы добиться нужный результат
  11. Выбирает все элементы с указанным атрибутом, значение которого содержит указанное значение где-либо внутри. [selector*="value"].
    1. [title*="title"] { background-color: #8250df;}. В данном случае попадают элементы с title h2-title-h2 и title-h4
  12. Селектор потомка selector selector selector или “пробельный селектор”
    1. ? Выбирает элементы которые находятся внутри другого элемента все зависимости от уровня вложенности
    2. ? Можно использовать любые селекторы используемые выше
    3. - Селектор div div div div div {background-color: #e8bb0b;} может замедлить редеринг страницы
    4. + Селектор работает на любом уровне вложенности
    5. ? Используется когда нужно применить стиль ко всем элементам определённого типа внутри контейнера, независимо от глубины вложенности.
    6. article h1 { color: blue;}
    7. ul .one { color: saddlebrown;}
  13. Непосредственно вложенный селектор selector > selector
    1. ? Выбирает только прямые потомки, игнорируя вложенность элементов на более глубоких уровнях, применяется только к тем элементам которые находятся напрямую внутри родителя
    2. ul > .a-123 { background-color: rgba(55, 153, 189, 0.74);}
    3. ul > ul > li { background-color: #f08a8b;} множественная вложенность
    4. ? Работает только с элементами на первом уровне вложенности
    5. + Дочерний селектор работает быстрее чем селектор потомка ‘пробел’, так как не проверяет все уровни вложенности используйте селекторы с умом
    6. div p выбирает все элементы, а div > p только прямые, на первом уровне вложенности
    7. ? Использовать можно для стилизации элементов верхнего уровня и для контроля четкой структуры документа
    8. .menu > ul > li > a { color: white; background: #333;}
    9. .submenu a { color: black; background: #f0f0f0;}
  14. Объединение двух и более селекторов .selector.selector
    1. ? Выбирает элементы в которых присвоены все указанные классы одновременно, можно в разном порядке, но совместное присутствие обязательно
    2. .btn.primary.large { padding: 15px 30px;}
    3. .a.b.c { color: teal;}
    4. ? Можно использовать не только классы, но и элементы с классами p.d.f { background-color: #717070;}
    5. Например, вот такой сложный селектор .t b.m.fg.ht > span { background-color: #ef0909;} элемент с классом t внутри которого b с классами m.fg.ht и непосредственный ребенок span
    6. ? Стиль не применяется если хотя бы один класс отсутствует
    7. .b .c Выбор всех .c внутри .b на любом уровне вложенности. .b.c Выбор всех элементов с обоими классами на любом уровне вложенности p.tag1 > b.t1.t2 Выбор p.tag1 внутри непосредственный ребенок b.t1.t2
    8. .tag1.tag2 { background-color: #7eca63;}
    9. Используется для модификации компонентов, добавление другого стиля к основному и для создания модульных компонентов.
    10. Когда нужно применять стили к определенному набору классов, и точно их выбрать.
    11. + Чаще такие селекторы работают быстрее чем вложенные.
    12. - Желательно избегать больших комбинаций селекторов - это усложняет поддержку кода
  15. Смежные селекторы selector + selector
    1. ? Выбирает элемент который, идет за элементом на одном уровне вложенности
    2. ? Работает только для соседних элементов имеющих общего родителя и идущих друг за другом
    3. div.r1 + div.r2 { background-color: #f08a8b;}
    4. li.item + li { color: yellow;}
    5. ? Выбираемый элемент должен идти сразу после указанного элемента. Если между ними есть другой элемент стиль не применяется
    6. ? У обоих элементов должен быть общий родитель, то есть элементы должны быть сестринскими
    7. e1 + e2 - Ищем элемент e1 после которого должен идти элемент e2. e1 e2 - Ищем элемент e1 внутри которого должны быть элементы e2 на любом уровне вложенности. e1 > e2 - Ищем элемент e1 внутри которого должен быть элемент e2
    8. h2 + p { margin-top: 0;} удаление лишних отступов
    9. .menu-item + .menu-item {} стилизация навигации, кроме первого пункта меню
    10. ? Здесь очень важен порядок элементов идущих в селекторе
    11. + Такие селекторы работают быстро, так как браузеры проверяют только следующий элемент
    12. - Нельзя выбрать предыдущий элемент или элементы на разных уровнях вложенности
    13. ? Используйте селектор, когда нужно применить стиль только к непосредственно следующему элементу.
  16. Последующие селекторы selector ~ selector.
    1. Выбирает все элементы которые являются сестринскими по отношению к указанному элементу
    2. li.header ~ .box { background-color: #4865ae;}
    3. li.header ~ li { border-top: 1px solid #fa0202;} Стилизация всех пунктов меню кроме первого
    4. ? Селектор ~ выбирает каждый элемент2, который идет после элемента1 на одном уровне вложенности, независимо от того, есть ли между ними другие элементы.
    5. ? Так же элементы должны иметь одного родителя
    6. - Селектор работает медленнее чем другие селекторы, так как проверяет все элементы
    7. ? Селектор чувствителен к порядку элементов
    8. - Не выбирает элементы идущие до element ~ element
  17. Перечисление селекторов selector,selector
    1. ? Группировка селекторов позволяет применять одинаковые стили к разным элементам, это позволяет убрать дублирование кода
    2. h1, h2, h3 { color: #333; font-family: Arial, sans-serif;}
    3. ? Каждый селектор в списке работает независимо
    4. ? Рекомендуется использовать когда есть общие стили для разных элементов, стили состояний, классы хелперы.
    5. ? Группировка селекторов не влияет на производительность. Браузер обрабатывает каждый селектор отдельно.
    6. h5 { color: #8250df; } h4,h5 {color: #bfb16a;} Если правила повторяются отдельно, то применено будет последнее правило
    7. ? В итоге группировка помогает уменьшить дублирование кода, создать единое оформление и упростить поддержку кода.
    8. ? Рекомендуется переносить селектор на следующую строку.

Комплексный пример

Примеры рассмотренные выше.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128

/* Универсальный */
* {
  color: #2bcc2b;
}

/* Тега */
div {
  color: #bcbecc;
}

/*Идентификатор*/
#id {
  color: #e0ff76;
}

/*Класс*/
.class {
  color: #cf4e26;
}

/*Атрибут*/
[lang] {
  color: #000000;
}

/*Конкретный атрибут*/
[lang="ru"] {
  color: rgba(55, 153, 189, 0.74);
}

/*Одно из значений атрибута*/
[class~="o"] {
  color: rgba(244, 6, 6, 0.74);
}

/*Значение атрибута за которым идет - */
[lang |="en"] {
  color: rgba(179, 213, 156, 0.74);
}

/*Значение атрибута начинается с*/
[href^="https://"] {
  background-color: #2e2f31;
}

/*Значение атрибута заканчивается значением*/
[href$="1"],[class$="1"] {
  background-color: #7e9335;
}

/*Значение атрибута может быть в любом месте атрибута*/
[title*="title"] {
  background-color: #8250df;
}

/*Селектор потомка*/
article h1 {
  color: blue;
}

/*Селектор потомка*/
div div div div div  {
  background-color: #e8bb0b;
}

/*Селектор потомка*/
ul .one {
  color: saddlebrown;
}

/*Непосредственно вложенный селектор*/
ul > .a-123 {
  background-color: rgba(55, 153, 189, 0.74);
}

/*Непосредственно вложенный селектор*/
ul > ul > li {
  background-color: #f08a8b;
}

/* Объединение селекторов*/
.a.b.c {
  color: teal;
}

/* Объединение селекторов*/
.t b.m.fg.ht > span {
  background-color: #ef0909;
}

/* Объединение селекторов*/
.tag1.tag2 {
  background-color: #7eca63;
}

/* Объединение селекторов*/
p.tag1 > b.t1.t2 {
  color: #ef0909;
}

/* Смежный селектор*/
div.r1 + div.r2 {
  background-color: #f08a8b;
}

/* Смежный селектор*/
li.item + li {
  color: yellow;
}

/* последующий селектор*/
li.header ~ .box {
  background-color: #4865ae;
}
/* последующий селектор*/
li.header ~ li {
  border-top: 1px solid #fa0202;
}

/*Группировка селекторов*/
h5 {
  color: #8250df;
}

/*Группировка селекторов*/
h4,h5 {
  color: #bfb16a;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132

<article>
  <div class="o y u">
    <div class="class o" lang="en">
      <div id="id" lang="en-GB">12
        <div lang="ru">
          <a href="https://123.1.1.1">123</a>
          <a href="https://123.1.1.1">456</a>
          <a href="http://123.1.1.1">890</a>
          <span class="werwfsfd1">890</span>
          <h1>article h1</h1>
          <h2 title="h2-title-h2">h2</h2>
          <h3>h3</h3>
          <h4 title="title-h4">h4</h4>
          <h1>article h1</h1>
          <div>
            <div>
              <div>
                <div>
                  <h1>article h1</h1>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</article>

<ul>
  <li class="one">1</li>
  <li>2</li>
</ul>

<div>
  <ul>
    <li class="one">1</li>
    <li>2</li>
  </ul>
</div>

<p>
  <p>
    <p>
      <div>
        <ul>
          <li class="one">1</li>
          <li>2</li>
        </ul>
      </div>
    </p>
  </p>
</p>


<ul>
  <li class="a-123">1</li>
  <li>2</li>
  <ul>
    <li>
      <ul>
        <li>inner li</li>
      </ul>
    </li>
  </ul>
</ul>

<div>
  <ul>
    <li class="a-123">1</li>
    <li>2</li>
    <ul>
      <li>
        <ul>
          <li>inner li</li>
        </ul>
      </li>
    </ul>
  </ul>
</div>

<div class="a b c">teal</div>
<div class="c b a">teal</div>
<div class="c b a h">teal</div>

<p class="d f">re</p>

<p class="t">
  <b class="m fg ht">
    <span>123</span>
  </b>
  <b class="m fg">
    <span>5647</span>
  </b>
</p>

<div class="tag1 tag2">t</div>

<div>
  <div>
    <div class="tag2 tag1">t</div>
  </div>
</div>

<p class="tag1">
  <b class="t2">p</b>
  <b class="t1 t2">p</b>
</p>

<div class="r1">1</div>
<div class="r2">2</div>
<div class="r3">3</div>
<div class="r2">4</div>

<ul class="rt">
  <li class="item">1</li>
  <li class="item">2</li>
  <li class="item">3</li>
</ul>


<ul>
  <li class="header">1</li>
  <li class="box">2</li>
  <li class="box1">3</li>
  <li class="box">4</li>
  <li class="box2">5</li>
  <li class="box2">6</li>
  <li class="box">7</li>
</ul>

<h5>h5</h5>
Css
Авторский пост защищен лицензией CC BY 4.0 .

Хотите оптимизировать свой бизнес, нужен сервис, сайт или интеграция.

Бесплатно расчитаю время разработки, предложу решение вашей задачи.