From c058fa0fb22dc40ef0225b21a97578cddd0aaffa Mon Sep 17 00:00:00 2001 From: Florian Merz Date: Thu, 11 Feb 2021 14:51:05 +0100 Subject: unslug ru: move --- files/ru/web/css/css_selectors/index.html | 122 +++++++++++++++++++++ .../index.html | 62 +++++++++++ 2 files changed, 184 insertions(+) create mode 100644 files/ru/web/css/css_selectors/index.html create mode 100644 files/ru/web/css/css_selectors/using_the__colon_target_pseudo-class_in_selectors/index.html (limited to 'files/ru/web/css/css_selectors') 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 +--- +
{{CSSRef}}
+ +

Селектор определяет, к какому элементу применять то или иное CSS-правило.

+ +

Обратите внимание - не существует селекторов, которые бы позволили выбрать родителя (содержащий контейнер) или соседа родителя или потомков соседа родителя.

+ +

Базовые селекторы

+ +
+
Универсальный селектор
+
Выбирает все элементы. По желанию, он может быть ограничен определенным пространством имен или относиться ко всему пространству имён.
+ Синтаксис: * ns|* *|*
+ Пример: * будет соответствовать всем элементам на странице.
+
+ +
+
Селекторы по типу элемента
+
Этот базовый селектор выбирает тип элементов, к которым будет применяться правило.
+ Синтаксис: элемент
+ Пример: селектор input выберет все элементы {{HTMLElement('input')}}.
+
Селекторы по классу
+
Этот базовый селектор выбирает элементы, основываясь на значении их атрибута class.
+ Синтаксис: .имяКласса
+ Пример: селектор .index выберет все элементы с соответствующим классом (который был определен в атрибуте class="index").
+
Селекторы по идентификатору
+
Этот базовый селектор выбирает элементы, основываясь на значении их id атрибута. Не забывайте, что идентификатор должен быть уникальным, т. е. использоваться только для одного элемента в HTML-документе. 
+ Синтаксис: #имяИдентификатора
+ Пример: селектор #toc выберет элемент с идентификатором toc (который был определен в атрибуте id="toc").
+
Селекторы по атрибуту
+
Этот селектор выбирает все элементы, имеющие данный атрибут или атрибут с определённым значением.
+ Синтаксис: [attr] [attr=value] [attr~=value] [attr|=value] [attr^=value] [attr$=value] [attr*=value]
+ Пример: селектор [autoplay] выберет все элементы, у которых есть  атрибут autoplay (независимо от его значения).
+ Ещё пример: a[href$=".jpg"] выберет все ссылки, у которых адрес заканчивается на ".jpg".
+ Ещё пример: a[href^="https"] выберет все ссылки, у которых адрес начинается на "https".
+
+ +

Комбинаторы

+ +
+
Комбинатор запятая
+
Комбинатор , это способ группировки, он выбирает все совпадающие узлы.
+ Синтаксис: A, B
+ Пример: div, span выберет оба элемента - и {{HTMLElement("div")}} и {{HTMLElement("span")}}.
+
Комбинатор потомков
+
Комбинатор ' ' (пробел) выбирает элементы, которые находятся внутри указанного элемента (вне зависимости от уровня вложенности).
+ Синтаксис: A B
+ Пример: селектор div span выберет все элементы {{HTMLElement('span')}}, которые находятся внутри элемента {{HTMLElement('div')}}.
+
Дочерние селекторы
+
Комбинатор '>' в отличие от пробела выбирает только те элементы, которые являются дочерними непосредственно по отношению к указанному элементу.
+ Синтаксис: A > B
+ Пример: селектор ul > li выберет только дочерние элементы {{HTMLElement('li')}}, которые находятся внутри, на первом уровне вложенности по отношению к элементу {{HTMLElement('ul')}}.
+
Комбинатор всех соседних элементов
+
Комбинатор '~' выбирает элементы, которые находятся на этом же уровне вложенности, после указанного элемента, с тем же родителем.
+ Синтаксис: A ~ B
+ Пример: p ~ span выберет все элементы {{HTMLElement('span')}}, которые находятся после элемента {{HTMLElement('p')}} внутри одного родителя.
+
Комбинатор следующего соседнего элемента
+
Комбинатор '+' выбирает элемент, который находится непосредственно после указанного элемента, если у них общий родитель.
+ Синтаксис: A + B
+ Пример: селектор ul + li выберет любой {{HTMLElement('li')}} элемент, который  находится непосредственно после элемента {{HTMLElement('ul')}}.
+
+ +

Псевдо

+ +
+
Псевдоклассы
+
Знак : позволяет выбрать элементы, основываясь на информации, которой нет в дереве элементов.
+ Пример: a:visited соответствует всем элементам {{HTMLElement("a")}} которые имеют статус "посещённые".
+ Ещё пример: div:hover соответствует элементу, над которым проходит указатель мыши.
+ Ещё пример: input:focus соответствует полю ввода, которое получило фокус.
+
Псевдоэлементы
+
Знак :: позволяет выбрать вещи, которых нет в HTML.
+ Пример: p::first-line соответствует первой линии абзаца {{HTMLElement("p")}}.
+
+ +

Версии CSS

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
СпецификацияСтатусКомментарии
{{SpecName('CSS4 Selectors')}}{{Spec2('CSS4 Selectors')}}Добавление комбинатора колонок || , селекторов структуры сеточной разметки (CSS grid selector), логических комбинаторов, местоположения, временных, состояния ресурсов, лингвистических и UI псевдоклассов, модификаторов для ASCII регистрозависимых и регистронезависимых атрибутов со значениями и без них.
{{SpecName('CSS3 Selectors')}}{{Spec2('CSS3 Selectors')}}Добавлен комбинатор ~ и древовидные структурные псевдоклассы.
+ Сделаны псевдоэлементы, использующие префик :: двойное двоеточие. Селекторы дополнительных атрибутов.
{{SpecName('CSS2.1', 'selector.html')}}{{Spec2('CSS2.1')}}Добавлен комбинатор потомков > и комбинатор следующего соседа + .
+ Добавлен универсальный (*)  комбинатор и селектор атрибутов.
{{SpecName('CSS1')}}{{Spec2('CSS1')}}Первоначальное определение.
+ +

См. также

+ +

CSS специфичность

diff --git a/files/ru/web/css/css_selectors/using_the__colon_target_pseudo-class_in_selectors/index.html b/files/ru/web/css/css_selectors/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_selectors/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' +--- +
{{CSSRef}}
+ +

Иногда пользователям трудно заметить, что URL указывает на определённую часть документа.  Узнайте, как можно использовать простое CSS правило, чтобы привлечь внимание пользователей к цели указания URL и улучшить их впечатления.

+ +

Выбор целевых элементов

+ +

Псевдокласс {{cssxref(":target")}} используется для стилизации целевого элемента URL, содержащего идентификатор фрагмента. Например, URL http://developer.mozilla.org/en/docs/Using_the_:target_selector#example содержит идентификатор фрагмента #example. В HTML, идентификаторы определяются значениями атрибутов  id или name, т.к. эти аттрибуты разделяют одно пространство имён. Таким образом,  в вышеприведённом примере URL указывает на первый элемент "example" в документе.

+ +

Пердположим, вы хотите стилизовать любой элемент h2, который является целью URL, но не хотите, чтобы другие элементы получили стиль цели. Сделать это довольно просто:

+ +
h2:target { font-weight: bold; }
+ +

Также возможно создать стили, специфичные для определённого фрагмента документа. Это достигается использованием такого же идентификационного значения, как в URI. Таким образом, чтобы добавить рамку к фрагменту #example , напишем:

+ +
#example:target { border: 1px solid black; }
+ +

Отметка всех элементов, как целевых

+ +

Если вы намерены создать общий стиль, который будет применяться ко всем целевым элементам, то вам пригодится следующий универсальный селектор:

+ +
:target { color: red; }
+
+ +

Пример

+ +

В данном примере имеются пять ссылок, которые ссылаются на элементы одного и того же документа. Выбор ссылки "First" , например, приведёт к тому, что  <h1 id="one"> станет целевым элементом.  Заметьте, что при прокутке документа целевые элементы располагаются вверху окна браузера, если это возможно.

+ +
+
<h4 id="one">...</h4> <p id="two">...</p>
+<div id="three">...</div> <a id="four">...</a> <em id="five">...</em>
+
+<a href="#one">First</a>
+<a href="#two">Second</a>
+<a href="#three">Third</a>
+<a href="#four">Fourth</a>
+<a href="#five">Fifth</a>
+
+ +

Вывод

+ +

В некоторых случаях, когда идентификатор фрагмента указывает на часть документа, читатели могут запутаться в том, какую именно часть документа они читают. Стилизуя целевой элемент URI, такую путаницу читателей можно уменьшить или убрать вообще.

+ + + + + +
+

Original Document Information

+ + +
-- cgit v1.2.3-54-g00ecf