Все css селекторы
Кратко и четко список css селекторов
Таблица селекторов
В данной таблице кратко перечислю селекторы css с их назначением. В столбце “дополнительно”, будут ссылки на примеры.
| Селектор | Назначение | Описание | Что попадает | Дополнительно | Поддержка | Специфичность |
|---|---|---|---|---|---|---|
* | Универсальный селектор | Попадают все элементы на странице | <body><div></div></body> | 1 | baseline | 0,0,0 |
div | Селектор тега | Все элементы div на странице | <div></div><div></div> | 1 | baseline | 0,0,1 |
#header | Селектор по id | Элемент с указанным id | <div id="header"></div> | 1 | baseline | 1,0,0 |
.title | Селектор по классу | Все элементы с указанным классом | <span class='title'></span> | 1 | baseline | 0,1,0 |
.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 |
1
1
Примеры к селекторам
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>
В данном случае будет выбран один дочерний элемент после ссылки.
Оптимизация бизнеса, создание сайтов, разработка парсеров или интеграций.
Бесплатно расчитаю время разработки, предложу решение вашей задачи.