1 files changed, 116 insertions, 0 deletions
diff --git a/files/uk/web/css/css_selectors/index.html b/files/uk/web/css/css_selectors/index.html
new file mode 100644
index 0000000000..20f89ab44f
--- /dev/null
+++ b/files/uk/web/css/css_selectors/index.html
@@ -0,0 +1,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>&gt;</code> обирає усі вузли (теги одного класу), які є прямими нащадками елемента, вказзаного першим.<br>
+ <strong>Синтаксис:</strong> <code style="white-space: nowrap;"><var>A</var> &gt; <var>B</var></code><br>
+ <strong>Приклад:</strong> <code>ul &gt; 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>&gt;</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>