Link Search Menu Expand Document
LexusAlex.ru
04 Января 2026 г.

Все css селекторы

Таблица селекторов

В данной таблице кратко перечислю селекторы css с их назначением. В столбце “дополнительно”, будут ссылки на примеры.

Селектор Назначение Описание Что попадает Дополнительно Поддержка Специфичность Скорость селектора
* Универсальный селектор Попадают все элементы на странице <body><div></div></body> 1 baseline 0,0,0 Медленно - Сопоставляется с абсолютно каждым элементом
div Селектор тега Все элементы div на странице <div></div><div></div> 1 baseline 0,0,1 Быстро - Быстро не не так эффективно как id и классы
#header Селектор по id Элемент с указанным id <div id="header"></div> 1 baseline 1,0,0 Очень быстро - Обращение идет сразу к элементу
.title Селектор по классу Все элементы с указанным классом <span class='title'></span> 1 baseline 0,1,0 Очень быстро - Браузеры индексируют классы при парсинге DOM
.red.blue Составной селектор Применим для классов и атрибутов, пишется слитно <div class='red blue'></div> 1 2 baseline 0,2,0  
[lang] Элементы с атрибутом Все элементы где есть атрибут <div lang="ru"></div> 1 baselne 0,1,0 Медленно - Атрибутные селекторы требуют полного обхода элементов
[lang="en"] Элементы со значением атрибута Все элементы, где у атрибута есть конкретное значение <div lang="en"></div> 1 baselne 0,1,0 Медленно - Сравниваются строки
[class*="red"] Значение атрибута как подстрока Все элементы, где есть значение атрибута в любом месте <div class="greenredyellow"></div> 1 baselne 0,1,0 Очень медленно - Производится анализ подстроки (Строка проверяется полностью)
[class~="red"] Значение атрибута есть в списке значений Все элементы, где значение есть в списке разделенным пробелами <div class="red blue black"></div> 1 baselne 0,1,0 Средне - Строка разбивается на массив. Поиск по массиву с точным совпадением.
[class^="red-"] Значение атрибута начинается со значения Все элементы, где значение атрибута начинается со значения <div class="red-color"></div> 1 baselne 0,1,0 Медленно - Производится анализ подстроки (Только в начале или конце).
[class$="red"] Значение атрибута заканчивается со значения Все элементы, где значение атрибута заканчивается со значения <div class="color-red"></div> 1 baselne 0,1,0 Медленно - Производится анализ подстроки (Только в начале или конце).
[class|=”red”] Значение атрибута либо точно равно либо равно+тире Все элементы, где значение атрибута либо точно равно либо равно+тире <div class="red-color"></div> 1 baselne 0,1,0  
[class="red" i] Значение атрибута без учета регистра Все элементы, где указано значение атрибута без учета регистра <div class="RED"></div> 1 baselne 0,1,0  
p span Селектор потомков Выбирает элементы ,которые являются потомками указанного элемента <p><span></span></p> 1 2 baselne 0,0,2 Медленно - Необходимо проверять большое кол-во узлов без ограничения по вложенности.
p > span Дочерний селектор Выбирает элементы которые прямые или дочерние укаазнного элемента <p><span></span></p> 1 baselne 0,0,2 Средне - Сопоставление происходит не по всему документу, а в ограниченной вложенности.
a ~ span Селектор соседних элементов Выбирает все соседние элементы которые следуют за указанным <a href="">ссылка</a><span></span> 1 baselne 0,0,2  
a + span Смежный селектор Выбирает элемент который идет текущего, но только один <a href="">ссылка</a><span></span> 1 baselne 0,0,2  
h1, h2, h3 Группировка селекторов Групирует селекторы для одних и тех же правил <h1></h1><h2></h2> 1 baselne 0,0,1  
:link Непосещенные ссылки Применяться для ссылок, которые пользователь не посещал          
:visited Посещенные ссылки пользователем Если по ссылке был переход       0,1,1  
:hover Наведение на элемент Применятся при наведении курсора на любой элемент       0,1,1  
:active В момент нажатия на элемент Применяется к элементам взаимодествие с которыми идет в текущий момент          
:focus Если элемент в фокусе Применяется к элементам в фокусе       0,1,1  
:focus-visible Если перешли на элемент с помощью TAB Если нужен focus, но только по клавише TAB          
:focus-within Выделение целого раздела Применятся к элементам дочерние элементы которого имеют :focus          
:not() Элементы которые не подходят под условие Применятся к элементам которые не соответвуют значению переданного в not         Очень медленно - требует дополнительной проверки
:is() Умное перечисление селекторов внутри is Применяется ко элементам перечисленных внутри селектора          
:where() Применение правил для всех селекторов внути where Применяется ко всем селекторам внутри, при этом не добавляя им веса          
:has() Возможность уточнить селектор Применяеться ко вложенным элементам          
:root() Применятся к корневому элементу Задание стилей для элемента html, применяют для указания переменных       0,1,0  
:target Управление ссылками на якорь Примененяется к ссылками на внутренние страницы          
:lang() Стили к элементу с языком Выбирает элементы с указанным языком          
:default Группа аналогичных элементов Выбирает элементы которые используются по умолчанию в группе аналогичных элементов          
:checked Отмеченные элементы формы Стилизует выбранны чекбокс,радиокнопку, или элементам option          
:disabled Неактивные элементы формы Применяется к деактивированным элементам формы          
:enabled Активные элементы формы Применятся к включенным элементам формы          
:required Поля с атрибутом required            
               
               
               
               
               
               

Примеры к селекторам

universal-1

Применим ко всем элементам на странице

* {
    background-color: #2bcc2b;
}

<b>b</b>
<span>span</span>
<div>
  <div>
    <div>div</div>
  </div>
</div>

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

Применяется ко всем элементам к которым возможно применить стиль

tag-1

Применим ко всем тегам div на любом уровне вложенности

div {
  background-color: #2bcc2b;
}

<b>b</b>
<span>span</span>
<div>
  <div>
    <div>div1</div>
  </div>
</div>
<div>div2</div>

Селектор тега

В данном случае div1 и div2 попадают под селектор

id-1

На странице может быть только один селектор тега

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

<b>b</b>
<span>span</span>
<div>
  <div>
    <div id="header">header</div>
  </div>
</div>
<div>div2</div>
<div>div3</div>

Селектор по id

class-1

Все элементы с указанным классом

.title {
    color: #2bcc2b;
}

<b class="title">b</b>
<span>span</span>
<div>
  <div>
    <div class="title">title</div>
  </div>
</div>
<div>div2</div>
<div class="title">div3</div>

Селектор по классу

В данном случае будут выбраны все элементы у которых есть класс .title.

composite-1

Применяется для всех элементов, где есть два класса в любом порядке

.red.blue {
    background-color: #2bcc2b;
}

<div class="red blue">1</div>
<div class="blue red">2</div>
<div class="blue red yellow">3</div>
<div class="blue">4</div>
<div class="red">5</div>
<div>
  <div>
    <div>
      <span class="red blue">6</span>
    </div>
  </div>
</div>

Составной селектор

В данном случае два класса есть у элемента 1,2,3,6 они и будут выделены

composite-2

div с определенным атрибутом

div[title] {
    color: #2bcc2b;
}

<div title="1">1</div>
<div title="2">2</div>
<div title="">3</div>
<div>
  <div>
    <span title="2">4</span>
  </div>
</div>

Составной селектор

В данном случае под условие попадут только элементы div с любым атрибутом title

attr-1 

[title] {
    color: #2bcc2b;
}

<div title="1">1</div>
<div title="2">2</div>
<div>3</div>
<div>
  <div>
    <span title="3">4</span>
  </div>
</div>

Селектор атрибута

В данном случае попадают 2 первых div и вложенный span.

attr-2

Атрибут с определенным значением

[title="2"] {
  color: #2bcc2b;
}

<div title="1">1</div>
<div title="2">2</div>
<div title="">3</div>
<div>
  <div>
    <span title="2">4</span>
  </div>
</div>

Селектор атрибута

В данном примере только 2 и 4 элементы попадают под условие.

attr-3

Атрибут, где значение находиться в любом месте как подстрока.

[class*="red"] {
  background-color: #8250df;
}

<div class="red">1</div>
<div class="red blue">2</div>
<div class="red-123">3</div>
<div class="yellow-red">4</div>
<div class="yellow-red-blue">5</div>
<div class="yellow-rd-blue">6</div>
<div>
  <div>
    <span class="REDred">7</span>
  </div>
</div>

Селектор атрибута

Все элементы, кроме 6, попадают под условие.

attr-4

Значение атрибута есть в списке разделенном пробелами

[class~="red"] {
  background-color: #8250df;
}

<div class="red">1</div>
<div class="red blue">2</div>
<div class="blue red yellow">3</div>
<div class="yellow-red">4</div>
<div class="yellow-red-blue">5</div>
<div class="yellow-rd-blue">6</div>
<div>
  <div>
    <span class="REDred">7</span>
  </div>
</div>

Селектор атрибута

Только первые три div попадают, так как у них есть атрибут класс с несколькими классами

attr-5

Значение атрибута начинается со значения

[class^="red"] {
    background-color: #8250df;
}

<div class="redok">1</div>
<div class="medred blue">2</div>
<div class="blue red yellow">3</div>
<div class="yellow-red">4</div>
<div class="yellow-red-blue">5</div>
<div class="yellow-rd-blue">6</div>
<div>
  <div>
    <span class="red-color">7</span>
  </div>
</div>

Селектор атрибута

В данном случае попадет элемент 1 и 7

attr-6

Значение атрибута заканчивается значением

[class$="red"] {
   background-color: #8250df;
}

<div class="redok">1</div>
<div class="medred blue">2</div>
<div class="blue red yellow">3</div>
<div class="yellow-red">4</div>
<div class="yellow-red-blue">5</div>
<div class="yellow-rd-blue">6</div>
<div>
  <div>
    <span class="red-color-Rred">7</span>
  </div>
</div>

Селектор атрибута

Тут попадет элемент 4 и 7

attr-7

Значение атрибута либо равно, либо равно+тире

[class|="red"] {
  background-color: #8250df;
}

<div class="red">1</div>
<div class="med red blue">2</div>
<div class="blue red yellow">3</div>
<div class="yellow-red">4</div>
<div class="yellow-red-blue">5</div>
<div class="yellow-rd-blue">6</div>
<div>
  <div>
    <span class="red-color">7</span>
  </div>
</div>

Селектор атрибута

В данном случае попадает 1 и 7 элемент, в первом точное совпадение, а в 7 идет тире после названия

attr-8 

[class="red" i] {
    background-color: #8250df;
}

<div class="red">1</div>
<div class="Red">2</div>
<div class="RED">3</div>
<div>
  <div>
    <span class="black">4</span>
  </div>
</div>

Селектор атрибута

Здесь под действие селектора попадают 3 первых элемента div.

descendant-1

Селектор потомков. Выбирает всех потомков элемента на любом уровне вложенности от дочерних элементов и ниже.

div span {
    background-color: #fa0202;
}

<div>
  <span>1</span>
</div>
<div>
  <div>
    <section>
      <span>2</span>
    </section>
  </div>
</div>
<section>
  <section>
    <span>3</span>
  </section>
</section>
<section>
  <section>
    <div>
      <section>
        <section>
          <article>
            <span>4</span>
          </article>
        </section>
      </section>
    </div>
  </section>
</section>

Селектор потомков

В данном примере селектор потомков выбирает 1,2,4 так как они являются дочерними элементами

descendant-2

Так же важно в селекторе потомков понимать, что селектор может быть сложным, в идеале такого надо избегать.

.one .two .three .four .five {
    background-color: #0d6efd;
}

<div class="one">
  <div class="two">
    <div class="three">
      <div class="four">
        <section>
          <div class="five">1</div>
        </section>
      </div>
    </div>
</div>

Селектор потомков

Элемент с классом five попадает под условие, но такой код уже становится сложно читать.

child-1

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

div > span {
    background-color: #fa0202;
}

<div>
  <span>1</span>
</div>
<div>
  <div>
    <section>
      <span>2</span>
    </section>
  </div>
</div>
<section>
  <section>
    <span>3</span>
  </section>
</section>
<section>
  <section>
    <div>
      <section>
        <section>
          <article>
            <span>4</span>
          </article>
        </section>
      </section>
    </div>
  </section>
</section>

Дочерний селектор

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

neighboring-1 

a ~ span {
    background-color: #fa0202;
}

<a href="https://ya.ru">ссылка</a>
<span>1</span>
<span>2</span>
<span>3</span>
<section>
  <span>4</span>
  <div>
    <a href="https://ya.ru">ссылка</a>
    <span>5</span>
    <section>
      <a href="https://ya.ru">ссылка</a>
      <span>6</span>
    </section>
  </div>
</section>

Селектор соседних элементов

Тут выбираются соседние элементы которые идут после ссылки a, в данном случае все кроме элемента 4 подходят под условие.

adjacent-1

Смежный селектор выбирает один элемент после текущего

a + span {
    background-color: #fa0202;
}

<a href="https://ya.ru">ссылка</a>
<span>1</span>
<span>2</span>
<span>3</span>
<section>
  <span>4</span>
  <div>
    <a href="https://ya.ru">ссылка</a>
    <span>5</span>
    <section>
      <a href="https://ya.ru">ссылка</a>
      <span>6</span>
      <span>7</span>
    </section>
  </div>
</section>

Смежный селектор

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

group-1

Группировка селекторов

h1,
h2,
h6
{
  background-color: #fa0202;
}

<div id="root">
  <h1>1</h1>
  <h2>2</h2>
  <h3>3</h3>
  <h4>4</h4>
  <h5>5</h5>
  <h6>6</h6>
</div>

Группировка селекторов

Скорость селекторов

Важно помнить, чем больше элементов подходит под стиль, тем больше времени браузер потратит на расчет стилей.

Браузер обрабатывает стили справа - налево, то есть селектор div span, будут найден все span, и только потом будет проверка, что элементы в div

  • Избегайте избыточной вложенности
  • Замените сложные селекторы на классы
  • Опасайтесь тяжёлых конструкций
Возник вопрос или предложение пиши на почту alexsey_89@bk.ru или в Телеграмм канал
Дата публикации: 04 Января 2026 г.