initial commit

2 files changed, 184 insertions, 0 deletions

diff --git a/files/ru/web/css/css_селекторы/index.html b/files/ru/web/css/css_селекторы/index.html
new file mode 100644
index 0000000000..8745681718
--- /dev/null
+++ b/files/ru/web/css/css_селекторы/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>
diff --git a/files/ru/web/css/css_селекторы/using_the__colon_target_pseudo-class_in_selectors/index.html b/files/ru/web/css/css_селекторы/using_the__colon_target_pseudo-class_in_selectors/index.html
new file mode 100644
index 0000000000..f737d2cb6d
--- /dev/null
+++ b/files/ru/web/css/css_селекторы/using_the__colon_target_pseudo-class_in_selectors/index.html
@@ -0,0 +1,62 @@
+---
+title: 'Использование псевдокласса :target в селекторах'
+slug: 'Web/CSS/CSS_Селекторы/Using_the_:target_pseudo-class_in_selectors'
+translation_of: 'Web/CSS/CSS_Selectors/Using_the_:target_pseudo-class_in_selectors'
+---
+<div>{{CSSRef}}</div>
+
+<p>Иногда пользователям трудно заметить, что URL указывает на определённую часть документа.  Узнайте, как можно использовать простое CSS правило, чтобы привлечь внимание пользователей к цели указания URL и улучшить их впечатления.</p>
+
+<h2 id="Picking_a_Target" name="Picking_a_Target">Выбор целевых элементов</h2>
+
+<p>Псевдокласс {{cssxref(":target")}} используется для стилизации целевого элемента URL, содержащего идентификатор фрагмента. Например, URL <code><span class="nowiki">http://developer.mozilla.org/en/docs/Using_the_:target_selector#example</span></code> содержит идентификатор фрагмента <code>#example</code>. В HTML, идентификаторы определяются значениями атрибутов  <code>id</code> или <code>name</code>, т.к. эти аттрибуты разделяют одно пространство имён. Таким образом,  в вышеприведённом примере URL указывает на первый элемент "example" в документе.</p>
+
+<p>Пердположим, вы хотите стилизовать любой элемент <code>h2</code>, который является целью URL, но не хотите, чтобы другие элементы получили стиль цели. Сделать это довольно просто:</p>
+
+<pre class="brush: css">h2:target { font-weight: bold; }</pre>
+
+<p>Также возможно создать стили, специфичные для определённого фрагмента документа. Это достигается использованием такого же идентификационного значения, как в URI. Таким образом, чтобы добавить рамку к фрагменту<code> #example</code> , напишем:</p>
+
+<pre class="brush: css">#example:target { border: 1px solid black; }</pre>
+
+<h2 id="Targeting_the_Root_Element" name="Targeting_the_Root_Element">Отметка всех элементов, как целевых</h2>
+
+<p>Если вы намерены создать общий стиль, который будет применяться ко всем целевым элементам, то вам пригодится следующий универсальный селектор:</p>
+
+<pre class="brush: css">:target { color: red; }
+</pre>
+
+<h2 id="Example" name="Example">Пример</h2>
+
+<p>В данном примере имеются пять ссылок, которые ссылаются на элементы одного и того же документа. Выбор ссылки "First" , например, приведёт к тому, что  <code>&lt;h1 id="one"&gt;</code> станет целевым элементом.  Заметьте, что при прокутке документа целевые элементы располагаются вверху окна браузера, если это возможно.</p>
+
+<div id="example">
+<pre class="brush: html">&lt;h4 id="one"&gt;...&lt;/h4&gt; &lt;p id="two"&gt;...&lt;/p&gt;
+&lt;div id="three"&gt;...&lt;/div&gt; &lt;a id="four"&gt;...&lt;/a&gt; &lt;em id="five"&gt;...&lt;/em&gt;
+
+&lt;a href="#one"&gt;First&lt;/a&gt;
+&lt;a href="#two"&gt;Second&lt;/a&gt;
+&lt;a href="#three"&gt;Third&lt;/a&gt;
+&lt;a href="#four"&gt;Fourth&lt;/a&gt;
+&lt;a href="#five"&gt;Fifth&lt;/a&gt;</pre>
+</div>
+
+<h2 id="Conclusion" name="Conclusion">Вывод</h2>
+
+<p>В некоторых случаях, когда идентификатор фрагмента указывает на часть документа, читатели могут запутаться в том, какую именно часть документа они читают. Стилизуя целевой элемент URI, такую путаницу читателей можно уменьшить или убрать вообще.</p>
+
+<h2 id="Related_Links" name="Related_Links">Смотрите также</h2>
+
+<ul>
+ <li>{{cssxref(":target")}}</li>
+</ul>
+
+<div class="originaldocinfo">
+<h3 id="Original_Document_Information" name="Original_Document_Information">Original Document Information</h3>
+
+<ul>
+ <li>Author(s): Eric Meyer, Standards Evangelist, Netscape Communications</li>
+ <li>Original Copyright Information: Copyright © 2001-2003 Netscape. All rights reserved.</li>
+ <li>Note: This reprinted article was originally part of the DevEdge site.</li>
+</ul>
+</div>