Cелекторы в CSS

Last updated: 9 мая 2025 г.

До этого мы использовали только селектор конкретного тега ( например h1 {…} ) и селектор класса ( например some-class-name {…} ).

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

Очень важно рассмотреть некоторые другие селекторы помимо тех двух, что мы уже рассмотрели. Если не знать их, то можно насоздавать очень много лишних классов, а много лишнего кода – это всегда плохо. С помощью них можно выбирать потомков какого-либо html элемента по какому-либо признаку и присвоить им определенные свойства.

1/*На странице у нас будет два div блока.
2Создадим и применим к ним два разных класса
3чтобы продемонстрировать работу
4и пользу селекторов*/
5
6.divblock1 {
7    width:410px;
8    height:360px;
9    background:#f1f1f1;
10    float:left;
11    margin: 0 15px 15px 0;
12    text-align: center;
13    padding: 5px 15px 15px 5px;
14    box-shadow: 5px 10px #888888;
15}
16
17.divblock2 {
18    width:410px;
19    height:360px;
20    background:#f1f1f1;
21    float:left;
22    margin: 0 15px 15px 0;
23    text-align: center;
24    padding: 5px 15px 15px 5px;
25    box-shadow: 5px 10px #888888;
26}
27
28/* Ниже конекстный селектор. Здесь два html
29тега или класса (или и то и другое как в данном
30случае) пишутся через пробел.
31Здесь второй html тег это дочерний элемент
32первого. То есть если где-то на странице есть
33например div блоки к которым применен
34класс .divblock1 и в которых есть li теги то ко
35всем li тегам в этих div применяются свойства.
36Здесь у всех li в div с классом divblock1
37меняется цвет текста с помощью color. */
38
39.divblock1 li {
40    color:blue;
41}
42
43/*ниже из прошлых уроков*/
44.header {
45    padding: 10px;
46    background:#aaf6a1;
47}
48.nav {
49    margin: 10px;
50    padding: 10px;
51    background:#f1f1a1;
52}
53.mainSection {
54    float: left;
55    width: 75%;
56    height:600px;
57    background:#b99999;
58}
59.aside {
60    float: left;
61    width: 25%;
62    height:600px;
63    background:#c1fee1;
64}
65.footer {
66    clear: both;
67    background:#d11777;
68}
69
70
71.header {
72    padding: 10px;
73    background:#aaf6a1;
74}
75.nav {
76    margin: 10px;
77    padding: 10px;
78    background:#f1f1a1;
79}
80.section {
81    float: left;
82    width: 75%;
83    height:600px;
84    background:#b99999;
85}
86.aside {
87    float: left;
88    width: 25%;
89    height:600px;
90    background:#c1fee1;
91}
92.footer {
93    clear: both;
94    background:#d11777;
95}
96
97
98.divblock {
99    width:410px;
100    height:300px;
101    background:#f1f1f1;
102    float:left;
103    margin: 0 15px 15px 0;
104    text-align: center;
105    padding: 5px 15px 15px 5px;
106    box-shadow: 5px 10px #888888;
107}
108.imagePropsClass {
109    width: 400px;
110    height: 170px;
111}
112h1, h2 {
113    font-weight: 600;
114    font-family:’Brush Script MT’,cursive;
115}
116h3 {
117    font-weight: 600;
118    font-family: ‘Courier New’, monospace;
119}
120img {
121    border-style: dashed;
122    border-color: red;
123    border-radius: 15px;
124}

Вот и сама страница с div-ами к которым будут применены классы divblock1 и divblock2. К списку в блоке класса divblock1 будет применен контекстный селектор.

1<!DOCTYPE HTML>
2<html>
3<head>
4    <title>Page tab text</title>
5    <link rel="stylesheet" href="C:\HTML\style.css">
6</head>
7<body>
8    <!-- 
9        Добавим два div блока, применим к ним разные классы 
10        и добавим списки в блоки. На списках будем демонстрировать 
11        некоторые селекторы. 
12    -->
13    <div class="divblock1">
14        <img decoding="async" class="imagePropsClass" src="C:\HTML\PatrickLearnsHtml.png">
15        <h3>Патрик учит div и CSS</h3>
16        <ul> <!-- ul это тег списка -->
17            <li> List Item 1</li> <!-- li пункты списка -->
18            <li> List Item 2</li>
19            <li> List Item 3</li>
20        </ul>
21        <p>
22            Какой-то текст в теге p. Какой-то текст в теге p. 
23            Какой-то текст в теге p. Какой-то текст в теге p. 
24            Какой-то текст в теге p. Какой-то текст в теге p. 
25            Какой-то текст в теге p.
26        </p>
27    </div>
28    <div class="divblock2">
29        <img decoding="async" class="imagePropsClass" src="C:\HTML\PatrickLearnsHtml.png">
30        <h3>Патрик учит div и CSS</h3>
31        <ul>
32            <li> List Item </li>
33            <li> List Item </li>
34            <li> List Item </li>
35        </ul>
36        <p>
37            Какой-то текст в теге p. Какой-то текст в теге p. 
38            Какой-то текст в теге p. Какой-то текст в теге p. 
39            Какой-то текст в теге p. Какой-то текст в теге p. 
40            Какой-то текст в теге p.
41        </p>
42    </div>
43</body>
44</html>

Если открыть страницу, то можно увидеть, что все li в div с классом divblock1 окрасились в синий.

То есть контекстный селектор сработал.

Если бы мы не знали о контекстном селекторе, то не очень понятно как бы можно было бы применить какие-то свойства к li только в блоке класса divblock1, то есть, чтобы, например, элементов li в блоке класса divblock2 это не касалось.

Разве что создать отдельный класс для этих li и ко всем ним применить эти свойства через него, что ясное дело очень плохое решение по сравнению с этим.

Также обратите внимание, что li не прямой потомок div, a li прямой потомок ul.

То есть контекстный селектор работает для любых потомков прямых или не прямых.

Это пожалуй самый часто используемый селектор помимо двух ранее рассмотренных простейших селекторов.

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

В отличие от предыдущего контекстного селектора селектор ">" выбирает только прямых потомков html элемента.

Контекстный селектор выбирал вообще все li, которые есть в блоке div класса divblock1 и применял к ним синий цвет. Этот же селектор применяет свойства только к ПРЯМОМУ потомку html элемента.

1/*На странице у нас будет два div блока.
2создадим и применим к ним два разных класса 
3чтобы продемонстрировать работу
4и пользу селекторов*/
5
6.divblock1 {
7    width:410px;
8    height:430px;
9    background:#f1f1f1;
10    float:left;
11    margin: 0 15px 15px 0;
12    text-align: center;
13    padding: 5px 15px 15px 5px;
14    box-shadow: 5px 10px #888888;
15}
16
17.divblock2 {
18    width:410px;
19    height:430px;
20    background:#f1f1f1;
21    float:left;
22    margin: 0 15px 15px 0;
23    text-align: center;
24    padding: 5px 15px 15px 5px;
25    box-shadow: 5px 10px #888888;
26}
27
28/* Очевидно что li в любом случае не может быть прямым потомком div блока, поскольку
29li очевидно всегда является прямым потомком только тега ul.
30Поэтому не получится окрасить
31в синий цвет li сделав например так
32
33.divblock1 > li {
34    color:blue;
35}
36
37поскольку li не прямой потомок .divblock1.
38Вместо этого нужно указывать цепочку прямых 
39потомков чтобы добраться к li вот так:
40*/
41
42.divblock1 > ul > li {
43    color:blue;
44}
45
46/*Селектор выше применяет синий цвет ко всем li,
47которые являются прямыми потомками ul, при этом ul должен
48являться прямым потомком .divblock1.*/
49
50/*ниже из прошлых уроков*/
51.header {
52    padding: 10px;
53    background:#aaf6a1;
54}
55.nav {
56    margin: 10px;
57    padding: 10px;
58    background:#f1f1a1;
59}
60.mainSection {
61    float: left;
62    width: 75%;
63    height:600px;
64    background:#b99999;
65}
66.aside {
67    float: left;
68    width: 25%;
69    height:600px;
70    background:#c1fee1;
71}
72.footer {
73    clear: both;
74    background:#d11777;
75}
76
77
78.header {
79    padding: 10px;
80    background:#aaf6a1;
81}
82.nav {
83    margin: 10px;
84    padding: 10px;
85    background:#f1f1a1;
86}
87.section {
88    float: left;
89    width: 75%;
90    height:600px;
91    background:#b99999;
92}
93.aside {
94    float: left;
95    width: 25%;
96    height:600px;
97    background:#c1fee1;
98}
99.footer {
100    clear: both;
101    background:#d11777;
102}
103
104
105.divblock {
106    width:410px;
107    height:300px;
108    background:#f1f1f1;
109    float:left;
110    margin: 0 15px 15px 0;
111    text-align: center;
112    padding: 5px 15px 15px 5px;
113    box-shadow: 5px 10px #888888;
114}
115.imagePropsClass {
116    width: 400px;
117    height: 170px;
118}
119h1, h2 {
120    font-weight: 600;
121    font-family:’Brush Script MT’,cursive;
122}
123h3 {
124    font-weight: 600;
125    font-family: ‘Courier New’, monospace;
126}
127img {
128    border-style: dashed;
129    border-color: red;
130    border-radius: 15px;
131}

Добавим еще один ul обернутый в чистый div блок в div блок класса divblock1.

1<!DOCTYPE HTML>
2<html>
3<head>
4    <title>Page tab text</title>
5    <link rel="stylesheet" href="C:\HTML\style.css" />
6</head>
7<body>
8    <div class="divblock1">
9        <img decoding="async" class="imagePropsClass" src="C:\HTML\PatrickLearnsHtml.png">
10        <h3>Патрик учит div и CSS</h3>
11        <ul>
12            <li> List Item </li>
13            <li> List Item </li>
14            <li> List Item </li>
15        </ul>
16        <!-- Как видим, мы здесь добавили еще один список 
17         в блоке div для демонстрации пользы селектора -->
18        <div>
19            <ul>
20                <li> List Item </li>
21                <li> List Item </li>
22                <li> List Item </li>
23            </ul>
24        </div>
25        <p>Какой-то текст в теге p. Какой-то текст в теге p. 
26        Какой-то текст в теге p. Какой-то текст в теге p. 
27        Какой-то текст в теге p. Какой-то текст в теге p.</p>
28    </div>
29    <div class="divblock2">
30        <img decoding="async" class="imagePropsClass" src="C:\HTML\PatrickLearnsHtml.png">
31        <h3>Патрик учит div и CSS</h3>
32        <ul>
33            <li> List Item </li>
34            <li> List Item </li>
35            <li> List Item </li>
36        </ul>
37        <div>
38            <ul>
39                <li> List Item </li>
40                <li> List Item </li>
41                <li> List Item </li>
42            </ul>
43        </div>
44        <p>Какой-то текст в теге p. Какой-то текст в теге p. 
45        Какой-то текст в теге p. Какой-то текст в теге p. 
46        Какой-то текст в теге p. Какой-то текст в теге p.</p>
47    </div>
48</body>
49</html>

Если откроем страницу, то можем увидеть что дочерний селектор > сработал и все прямые li потомки элемента ul, которые являются прямыми потомками блока с классом divblock1 окрасились в синий.

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

То есть синий цвет применился ко всем li, которые являются конечным элементом цепочки .divblock1 > ul > li, но он не был применен к li, которые являются конечным элементом .divblock1 > div > ul > li, поскольку такой цепочки в css файле мы не определяли.

Псевдокласс отрицания

С помощью псевдокласса отрицания not можно отключить применение свойств селектора к конкретным html элементам.

1/*На странице у нас будет два div блока.
2Создадим и применим к ним два разных класса,
3чтобы продемонстрировать работу
4и пользу селекторов*/
5
6.divblock1{
7    width:490px;
8    height:925px;
9    background:#f1f1f1;
10    float:left;
11    margin: 0 15px 15px 0;
12    text-align: center;
13    padding: 5px 15px 15px 5px;
14    box-shadow: 5px 10px 5px #888888;
15}
16
17.divblock2{
18    width:490px;
19    height:930px;
20    background:#f1f1f1;
21    float:left;
22    margin: 0 15px 15px 0;
23    text-align: center;
24    padding: 5px 15px 15px 5px;
25    box-shadow: 5px 10px 5px #888888;
26}
27
28/*В данном случае с помощью not можно
29сделать так чтобы свойства применялись
30ко всем дочерним img блока div
31с классом divblock1 КРОМЕ тех img которые
32с классом imagePropsClass.*/
33.divblock1 img:not(.imagePropsClass){
34    border: 1.5px solid #d7d7d7;
35}
36
37/*ниже из прошлых уроков*/
38.header {
39    padding: 10px;
40    background:#aaf6a1;
41}
42.nav {
43    margin: 10px;
44    padding: 10px;
45    background:#f1f1a1;
46}
47.mainSection {
48    float: left;
49    width: 75%;
50    height:600px;
51    background:#b99999;
52}
53.aside {
54    float: left;
55    width: 25%;
56    height:600px;
57    background:#c1fee1;
58}
59.footer {
60    clear: both;
61    background:#d11777;
62}
63
64
65.header {
66    padding: 10px;
67    background:#aaf6a1;
68}
69.nav {
70    margin: 10px;
71    padding: 10px;
72    background:#f1f1a1;
73}
74.section {
75    float: left;
76    width: 75%;
77    height:600px;
78    background:#b99999;
79}
80.aside {
81    float: left;
82    width: 25%;
83    height:600px;
84    background:#c1fee1;
85}
86.footer {
87    clear: both;
88    background:#d11777;
89}
90
91
92.divblock {
93    width:410px;
94    height:300px;
95    background:#f1f1f1;
96    float:left;
97    margin: 0 15px 15px 0;
98    text-align: center;
99    padding: 5px 15px 15px 5px;
100    box-shadow: 5px 10px #888888;
101}
102.imagePropsClass {
103    width: 400px;
104    height: 170px;
105}
106h1, h2 {
107    font-weight: 600;
108    font-family:’Brush Script MT’,cursive;
109}
110h3 {
111    font-weight: 600;
112    font-family: ‘Courier New’, monospace;
113}
114img {
115    border-style: dashed;
116    border-color: red;
117    border-radius: 15px;
118}

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

1<!DOCTYPE HTML>
2<html>
3<head>
4    <title>Page tab text</title>
5    <link rel="stylesheet" href="C:\HTML\style.css" />
6</head>
7<body>
8    <!-- Добавим еще пару картинок в div-ы. -->
9    <div class="divblock1">
10        <img decoding="async" class="imagePropsClass" src="C:\HTML\PatrickLearnsHtml.png"/>
11        <img decoding="async" src="C:\HTML\PatrickLearnsHtml.png"/>
12        <img decoding="async" src="C:\HTML\PatrickLearnsHtml.png"/>
13        <h3>Патрик учит div и CSS</h3>
14        <ul>
15            <li> List Item </li>
16            <li> List Item </li>
17            <li> List Item </li>
18            <li> List Item </li>
19        </ul>
20        <ul>
21            <li> List Item </li>
22            <li> List Item </li>
23            <li> List Item </li>
24            <li> List Item </li>
25        </ul>
26        <p>Какой-то текст в теге p.Какой-то текст в теге p.Какой-то текст в теге p.
27        Какой-то текст в теге p.Какой-то текст в теге p.Какой-то текст в теге p.
28        Какой-то текст в теге p.Какой-то текст в теге p.</p>
29    </div>
30    <div class="divblock2">
31        <img decoding="async" class="imagePropsClass" src="C:\HTML\PatrickLearnsHtml.png"/>
32        <img decoding="async" src="C:\HTML\PatrickLearnsHtml.png"/>
33        <img decoding="async" src="C:\HTML\PatrickLearnsHtml.png"/>
34        <h3>Патрик учит div и CSS</h3>
35        <ul>
36            <li> List Item </li>
37            <li> List Item </li>
38            <li> List Item </li>
39            <li> List Item </li>
40        </ul>
41        <ul>
42            <li> List Item </li>
43            <li> List Item </li>
44            <li> List Item </li>
45            <li> List Item </li>
46        </ul>
47        <p>Какой-то текст в теге p.Какой-то текст в теге p.Какой-то текст в теге p.
48        Какой-то текст в теге p.Какой-то текст в теге p.Какой-то текст в теге p.
49        Какой-то текст в теге p.Какой-то текст в теге p.</p>
50    </div>
51</body>
52</html>

Если откроем страницу, то можем увидеть, что свойства селектора (рамка фиолетового цвета) были применены ко всем картинкам div блока с классом divblock1 кроме картинки с классом imagePropsClass