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
|
---
title: CSS-селекторы
slug: Web/CSS/CSS_Selectors
tags:
- CSS
- Обзор
- Селекторы
translation_of: Web/CSS/CSS_Selectors
original_slug: Web/CSS/CSS_Селекторы
---
<div>{{CSSRef}}</div>
<p><strong>Селектор </strong>определяет, к какому элементу применять то или иное CSS-правило.</p>
<p>Обратите внимание - не существует селекторов, которые бы позволили выбрать родителя (содержащий контейнер) или соседа родителя или потомков соседа родителя.</p>
<h2 id="Базовые_селекторы">Базовые селекторы</h2>
<dl>
<dt><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Universal_selectors">Универсальный селектор</a></dt>
<dd>Выбирает все элементы. По желанию, он может быть ограничен определенным пространством имен или относиться ко всему пространству имён.<br>
<strong>Синтаксис:</strong> <code>*</code> <code><var>ns</var>|*</code> <code>*|*</code><br>
<strong>Пример:</strong> <code>*</code> будет соответствовать всем элементам на странице.</dd>
</dl>
<dl>
<dt><a href="/en-US/docs/Web/CSS/Type_selectors">Селекторы по типу элемента</a></dt>
<dd>Этот базовый селектор выбирает тип элементов, к которым будет применяться правило.<br>
<strong>Синтаксис: </strong> <code><var>элемент</var></code><br>
<strong>Пример: </strong>селектор<strong> </strong><code>input</code> выберет все элементы {{HTMLElement('input')}}.</dd>
<dt><a href="/en-US/docs/Web/CSS/Class_selectors">Селекторы по классу</a></dt>
<dd>Этот базовый селектор выбирает элементы, основываясь на значении их атрибута <code>class</code>.<br>
<strong>Синтаксис: </strong> <code>.<em>имяКласса</em></code><br>
<strong>Пример: </strong>селектор<strong> </strong><code>.index</code> выберет все элементы с соответствующим классом (который был определен в атрибуте <code>class="index"</code>).</dd>
<dt><a href="/en-US/docs/Web/CSS/ID_selectors">Селекторы по идентификатору</a></dt>
<dd>Этот базовый селектор выбирает элементы, основываясь на значении их <code>id</code> атрибута. Не забывайте, что идентификатор должен быть уникальным, т. е. использоваться только для одного элемента в HTML-документе. <br>
<strong>Синтаксис: </strong> <code>#имяИдентификатора</code><br>
<strong>Пример: </strong>селектор <code>#toc</code> выберет элемент с идентификатором toc (который был определен в атрибуте <code>id="toc"</code>).</dd>
<dt><a href="/en-US/docs/Web/CSS/Attribute_selectors">Селекторы по атрибуту</a></dt>
<dd>Этот селектор выбирает все элементы, имеющие данный атрибут или атрибут с определённым значением.<br>
<strong>Синтаксис:</strong> <code>[attr] [attr=value] [attr~=value] [attr|=value] [attr^=value] [attr$=value] [attr*=value]</code><br>
<strong>Пример: </strong>селектор <code>[autoplay]</code> выберет все элементы, у которых есть атрибут <code>autoplay</code> (независимо от его значения).<br>
<strong>Ещё пример</strong>: a[href$=".jpg"] выберет все ссылки, у которых адрес заканчивается на ".jpg".<br>
<strong>Ещё пример</strong>: a[href^="https"] выберет все ссылки, у которых адрес начинается на "https".</dd>
</dl>
<h2 id="Комбинаторы">Комбинаторы</h2>
<dl>
<dt><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Comma_combinator">Комбинатор запятая</a></dt>
<dd>Комбинатор <code>,</code> это способ группировки, он выбирает все совпадающие узлы.<br>
<strong>Синтаксис:</strong> <code style="white-space: nowrap;"><var>A</var>, <var>B</var></code><br>
<strong>Пример:</strong> <code>div, span</code> выберет оба элемента - и {{HTMLElement("div")}} и {{HTMLElement("span")}}.</dd>
<dt><a href="/en-US/docs/Web/CSS/Descendant_selectors">Комбинатор потомков</a></dt>
<dd>Комбинатор <code>' '</code> (пробел) выбирает элементы, которые находятся внутри указанного элемента (вне зависимости от уровня вложенности).<br>
<strong>Синтаксис:</strong> <code>A B</code><br>
<strong>Пример: </strong>селектор <code>div span</code> выберет все элементы {{HTMLElement('span')}}, которые находятся внутри элемента {{HTMLElement('div')}}.</dd>
<dt><a href="/en-US/docs/Web/CSS/Child_selectors">Дочерние селекторы</a></dt>
<dd>Комбинатор <code>'>'</code> в отличие от пробела выбирает только те элементы, которые являются дочерними непосредственно по отношению к указанному элементу.<br>
<strong>Синтаксис:</strong> <code><var>A</var> > <var>B</var></code><br>
<strong>Пример: </strong>селектор<strong> </strong><code>ul > li</code> выберет только дочерние элементы {{HTMLElement('li')}}, которые находятся внутри, на первом уровне вложенности по отношению к элементу {{HTMLElement('ul')}}.</dd>
<dt><a href="/en-US/docs/Web/CSS/General_sibling_selectors">Комбинатор всех соседних элементов</a></dt>
<dd>Комбинатор <code>'~'</code> выбирает элементы, которые находятся на этом же уровне вложенности, после указанного элемента, с тем же родителем.<br>
<strong>Синтаксис:</strong> <code><var>A</var> ~ <var>B</var></code><br>
<strong>Пример:</strong> <code>p ~ span</code> выберет все элементы {{HTMLElement('span')}}, которые находятся после элемента {{HTMLElement('p')}} внутри одного родителя.</dd>
<dt><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Adjacent_sibling_selectors">Комбинатор следующего соседнего элемента</a></dt>
<dd>Комбинатор <code>'+'</code> выбирает элемент, который находится непосредственно после указанного элемента, если у них общий родитель.<br>
<strong>Синтаксис:</strong> <code><var>A</var> + <var>B</var></code><br>
<strong>Пример: </strong>селектор <code>ul + li</code> выберет любой {{HTMLElement('li')}} элемент, который находится непосредственно после элемента {{HTMLElement('ul')}}.</dd>
</dl>
<h2 id="Псевдо">Псевдо</h2>
<dl>
<dt><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes">Псевдоклассы</a></dt>
<dd>Знак <code>:</code> позволяет выбрать элементы, основываясь на информации, которой нет в дереве элементов.<br>
<strong>Пример: </strong><code>a:visited</code> соответствует всем элементам {{HTMLElement("a")}} которые имеют статус "посещённые".<br>
<strong>Ещё пример</strong>: <code>div:hover</code> соответствует элементу, над которым проходит указатель мыши.<br>
<strong>Ещё пример</strong>: <code>input:focus</code> соответствует полю ввода, которое получило фокус.</dd>
<dt><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements">Псевдоэлементы</a></dt>
<dd>Знак <code>::</code> позволяет выбрать вещи, которых нет в HTML.<br>
<strong>Пример:</strong> <code>p::first-line</code> соответствует первой линии абзаца {{HTMLElement("p")}}.</dd>
</dl>
<h2 id="Версии_CSS">Версии CSS</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Спецификация</th>
<th scope="col">Статус</th>
<th scope="col">Комментарии</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName('CSS4 Selectors')}}</td>
<td>{{Spec2('CSS4 Selectors')}}</td>
<td>Добавление комбинатора колонок <code>||</code> , селекторов структуры сеточной разметки (CSS grid selector), логических комбинаторов, местоположения, временных, состояния ресурсов, лингвистических и UI псевдоклассов, модификаторов для ASCII регистрозависимых и регистронезависимых атрибутов со значениями и без них.</td>
</tr>
<tr>
<td>{{SpecName('CSS3 Selectors')}}</td>
<td>{{Spec2('CSS3 Selectors')}}</td>
<td>Добавлен комбинатор <code>~</code> и древовидные структурные псевдоклассы.<br>
Сделаны псевдоэлементы, использующие префик <code>::</code> двойное двоеточие. Селекторы дополнительных атрибутов.</td>
</tr>
<tr>
<td>{{SpecName('CSS2.1', 'selector.html')}}</td>
<td>{{Spec2('CSS2.1')}}</td>
<td>Добавлен комбинатор потомков <code>></code> и комбинатор следующего соседа <code>+</code> .<br>
Добавлен <strong>универсальный (*) </strong> комбинатор и <strong>селектор атрибутов.</strong></td>
</tr>
<tr>
<td>{{SpecName('CSS1')}}</td>
<td>{{Spec2('CSS1')}}</td>
<td>Первоначальное определение.</td>
</tr>
</tbody>
</table>
<h2 id="См._также">См. также</h2>
<p><a href="https://developer.mozilla.org/ru/docs/Web/CSS/Specificity">CSS специфичность</a></p>
|
