---
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>