---
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>'&gt;'</code> в отличие от пробела выбирает только те элементы, которые являются дочерними непосредственно по отношению к указанному элементу.<br>
 <strong>Синтаксис:</strong> <code><var>A</var> &gt; <var>B</var></code><br>
 <strong>Пример: </strong>селектор<strong> </strong><code>ul &gt; 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>&gt;</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>