1 files changed, 122 insertions, 0 deletions
diff --git a/files/ru/web/css/css_selectors/index.html b/files/ru/web/css/css_selectors/index.html
new file mode 100644
index 0000000000..8745681718
--- /dev/null
+++ b/files/ru/web/css/css_selectors/index.html
@@ -0,0 +1,122 @@
+---
+title: CSS-селекторы
+slug: Web/CSS/CSS_Селекторы
+tags:
+  - CSS
+  - Обзор
+  - Селекторы
+translation_of: Web/CSS/CSS_Selectors
+---
+<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>