Все css селекторы
Кратко и четко список 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
Применим ко всем элементам на странице
1
2
3
* {
background-color: #2bcc2b;
}
1
2
3
4
5
6
7
<b>b</b>
<span>span</span>
<div>
<div>
<div>div</div>
</div>
</div>
Применяется ко всем элементам к которым возможно применить стиль
tag-1
Применим ко всем тегам div на любом уровне вложенности
1
2
3
div {
background-color: #2bcc2b;
}
1
2
3
4
5
6
7
8
<b>b</b>
<span>span</span>
<div>
<div>
<div>div1</div>
</div>
</div>
<div>div2</div>
В данном случае div1 и div2 попадают под селектор
id-1
На странице может быть только один селектор тега
1
2
3
#header {
background-color: #2bcc2b;
}
1
2
3
4
5
6
7
8
9
<b>b</b>
<span>span</span>
<div>
<div>
<div id="header">header</div>
</div>
</div>
<div>div2</div>
<div>div3</div>
class-1
Все элементы с указанным классом
1
2
3
.title {
color: #2bcc2b;
}
1
2
3
4
5
6
7
8
9
<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
Применяется для всех элементов, где есть два класса в любом порядке
1
2
3
.red.blue {
background-color: #2bcc2b;
}
1
2
3
4
5
6
7
8
9
10
11
12
<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 с определенным атрибутом
1
2
3
div[title] {
color: #2bcc2b;
}
1
2
3
4
5
6
7
8
<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
1
2
3
[title] {
color: #2bcc2b;
}
1
2
3
4
5
6
7
8
<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
Атрибут с определенным значением
1
2
3
[title="2"] {
color: #2bcc2b;
}
1
2
3
4
5
6
7
8
<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
Атрибут, где значение находиться в любом месте как подстрока.
1
2
3
[class*="red"] {
background-color: #8250df;
}
1
2
3
4
5
6
7
8
9
10
11
<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
Значение атрибута есть в списке разделенном пробелами
1
2
3
[class~="red"] {
background-color: #8250df;
}
1
2
3
4
5
6
7
8
9
10
11
<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
Значение атрибута начинается со значения
1
2
3
[class^="red"] {
background-color: #8250df;
}
1
2
3
4
5
6
7
8
9
10
11
<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
Значение атрибута заканчивается значением
1
2
3
[class$="red"] {
background-color: #8250df;
}
1
2
3
4
5
6
7
8
9
10
11
<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
Значение атрибута либо равно, либо равно+тире
1
2
3
[class|="red"] {
background-color: #8250df;
}
1
2
3
4
5
6
7
8
9
10
11
<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
1
2
3
[class="red" i] {
background-color: #8250df;
}
1
2
3
4
5
6
7
8
<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
Селектор потомков. Выбирает всех потомков элемента на любом уровне вложенности от дочерних элементов и ниже.
1
2
3
div span {
background-color: #fa0202;
}
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
<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
Так же важно в селекторе потомков понимать, что селектор может быть сложным, в идеале такого надо избегать.
1
2
3
.one .two .three .four .five {
background-color: #0d6efd;
}
1
2
3
4
5
6
7
8
9
10
<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
Дочерний селектор выбирает только прямые потомки текущего элемента
1
2
3
div > span {
background-color: #fa0202;
}
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
<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
1
2
3
a ~ span {
background-color: #fa0202;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<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
Смежный селектор выбирает один элемент после текущего
1
2
3
a + span {
background-color: #fa0202;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<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
Группировка селекторов
1
2
3
4
5
6
h1,
h2,
h6
{
background-color: #fa0202;
}
1
2
3
4
5
6
7
8
<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
- Избегайте избыточной вложенности
- Замените сложные селекторы на классы
- Опасайтесь тяжёлых конструкций
Оптимизация бизнеса, создание сайтов, разработка парсеров или интеграций.
Бесплатно расчитаю время разработки, предложу решение вашей задачи.