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
|
---
title: CSS селектори
slug: Web/CSS/CSS_Selectors
translation_of: Web/CSS/CSS_Selectors
---
<div>{{CSSRef("Selectors")}}</div>
<p class="summary"><span class="seoSummary"><strong>CSS селектори </strong> означують елемнти до яких застосовується набір правил CSS. </span></p>
<h2 id="Прості_селектори">Прості селектори</h2>
<dl>
<dt><a href="/en-US/docs/Web/CSS/Type_selectors">Селектор за типом (Type selector)</a></dt>
<dd>Вибирає всі елементи, що відповідають вказаному імені вузла.<br>
<strong>Syntax:</strong> <code><var>eltname</var></code><br>
<strong>Example:</strong> <code>input</code> буде відповідати будь-якому елементу {{HTMLElement("input")}} .</dd>
<dt><a href="/en-US/docs/Web/CSS/Class_selectors">Селектор за класом (Class selector)</a></dt>
<dd>Вибирає всі елементи, що відповідають вказаному атрибуту <code>class</code>.<br>
<strong>Syntax:</strong> <code>.<var>classname</var></code><br>
<strong>Example:</strong> <code>.index</code> буде відповідати будь-якому елементу, що має клас "index".</dd>
<dt><a href="/en-US/docs/Web/CSS/ID_selectors">Селектор за ID (ID selector)</a></dt>
<dd>Вибирає елемент, відповідно до його значення атрибуту <code>id</code>. В документі повинен бути тільки один елемент з вказаним ID.<br>
<strong>Syntax:</strong> <code>#<var>idname</var></code><br>
<strong>Example:</strong> <code>#toc</code> буде відповідати елементу, що має ID зі значенням "toc".</dd>
<dt><a href="/en-US/docs/Web/CSS/Universal_selectors">Універсальний селектор (Universal selector)</a></dt>
<dd>Вибирає усі елементи. <span class="tlid-translation translation"><span title="">За бажанням, він може бути обмежений певним простором імен або всім простором імен.</span></span><br>
<strong>Syntax:</strong> <code>*</code> <code><var>ns</var>|*</code> <code>*|*</code><br>
<strong>Example:</strong> <code>*</code> буде відповідати усім елементам документу.</dd>
<dt><a href="/en-US/docs/Web/CSS/Attribute_selectors">Селектор за атрибутом (Attribute selector)</a></dt>
<dd>Вибирає елементи, відповідно до його значення вказаного атрибуту.<br>
<strong>Syntax:</strong> <code>[<var>attr</var>]</code> <code>[<var>attr</var>=<var>value</var>]</code> <code>[<var>attr</var>~=<var>value</var>]</code> <code>[<var>attr</var>|=<var>value</var>]</code> <code>[<var>attr</var>^=<var>value</var>]</code> <code>[<var>attr</var>$=<var>value</var>]</code> <code>[<var>attr</var>*=<var>value</var>]</code><br>
<strong>Example:</strong> <code>[autoplay]</code> буде відповідати всім елементам що мають виставлений атрибут <code>autoplay</code> (в будь яке значення).</dd>
</dl>
<h2 id="Комбінатори">Комбінатори</h2>
<dl>
<dt><a href="/uk/docs/Web/CSS/Adjacent_sibling_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>h2 + p</code> підпадуть усі випадки, у яких елемент {{HTMLElement("p")}} знаходиться безпосередньо після елемента {{HTMLElement("h2")}}.</dd>
<dt><a href="/uk/docs/Web/CSS/General_sibling_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>p ~ span</code> відповідатиме усім випадкам, коли елемент {{HTMLElement("span")}} слідує за елементом {{HTMLElement("p")}}.</dd>
<dt><a href="/uk/docs/Web/CSS/Child_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>ul > li</code> відповідатиме усім випадкам, коли елемент {{HTMLElement("li")}} буде вкладеним прямо в елемент {{HTMLElement("ul")}} (елемент {{HTMLElement("ul")}} складається з {{HTMLElement("li")}}, що значить, що {{HTMLElement("li")}} є його прямим нащадком.</dd>
<dt><a href="/uk/docs/Web/CSS/Descendant_combinator">Комбінатор за нащадками (Descendant combinator)</a></dt>
<dd>Комбінатор <code> </code> (space) обирає всі вузли, що є нащадками першого елемента.<br>
<strong>Синтаксис:</strong> <code style="white-space: nowrap;"><var>A</var> <var>B</var></code><br>
<strong>Приклад:</strong> <code>div span</code> обиратиме усі елементи {{HTMLElement("span")}}, що знаходяться всередині елемента {{HTMLElement("div")}}, хоча і необов'язково напряму (елемент {{HTMLElement("span")}} може бути всередині {{HTMLElement("table")}}, яка знаходиться в {{HTMLElement("div")}}).</dd>
<dt><a href="/uk/docs/Web/CSS/Column_combinator">Стовпчиковий комбінатор</a> {{Experimental_Inline}}</dt>
<dd>Комбінатор <code>||</code> вибирає усі вузли, що належать стовпчику.<br>
<strong>Синтаксис:</strong> <code style="white-space: nowrap;"><var>A</var> || <var>B</var></code><br>
<strong>Приклад:</strong> <code>col || td</code> застосовуватиметься до усіх елементів {{HTMLElement("td")}}, що потрапляють в зону застосування {{HTMLElement("col")}}.</dd>
</dl>
<h2 id="Псевдо-класи">Псевдо-класи</h2>
<dl>
<dt><a href="/uk/docs/Web/CSS/Pseudo-classes">Псевдо-класи</a> роблятть можливим вибір елементів, базуючись на інформаціїї, що не знаходиться в дереві елементів.</dt>
<dd><strong>Приклад:</strong> <code>a:visited</code> застосовуватиметься для усіх {{HTMLElement("a")}}, що були відвідані користувачем.</dd>
</dl>
<h2 id="Псевдо-елементи">Псевдо-елементи</h2>
<dl>
<dt><a href="/uk/docs/Web/CSS/Pseudo-elements">Псевдо-елементи</a> представляють собою об'єкти, що не включені до HTML.</dt>
<dd><strong>Приклад:</strong> <code>p::first-line</code> застосовуватиметься лише до першої стрічки елементів {{HTMLElement("p")}}.</dd>
</dl>
<h2 id="Specifications">Specifications</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Specification</th>
<th scope="col">Status</th>
<th scope="col">Comment</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName("CSS4 Selectors")}}</td>
<td>{{Spec2("CSS4 Selectors")}}</td>
<td>Added the <code>||</code> column combinator, grid structural selectors, logical combinators, location, time-demensional, resource state, linguistic and UI pseudo-classes</td>
</tr>
<tr>
<td>{{SpecName("CSS3 Selectors")}}</td>
<td>{{Spec2("CSS3 Selectors")}}</td>
<td>Added the <code>~</code> general sibling combinator and tree-structural pseudo-classes.<br>
Made pseudo-elements use a <code>::</code> double-colon prefix. Additional attribute selectors</td>
</tr>
<tr>
<td>{{SpecName("CSS2.1", "selector.html")}}</td>
<td>{{Spec2("CSS2.1")}}</td>
<td>Added the <code>></code> child and <code>+</code> adjacent sibling combinators.<br>
Added the <strong>universal</strong> and <strong>attribute</strong> selectors.</td>
</tr>
<tr>
<td>{{SpecName("CSS1")}}</td>
<td>{{Spec2("CSS1")}}</td>
<td>Initial definition.</td>
</tr>
</tbody>
</table>
<p>See the <a href="/en-US/docs/Web/CSS/Pseudo-classes#Specifications">pseudo-class</a> and <a href="/en-US/docs/Web/CSS/Pseudo-elements#Specifications">pseudo-element</a> specification tables for details on those.</p>
<h2 id="Див_також">Див також</h2>
<ul>
<li><a href="/en-US/docs/Web/CSS/Specificity">CSS Specificity</a></li>
</ul>
|
