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 --- .../css/building_blocks/cascade_tasks/index.html | 51 +++ .../fundamental_css_comprehension/index.html | 123 ++++++ .../selectors/attribute_selectors/index.html | 160 ++++++++ .../selectors/combinators/index.html | 113 ++++++ .../learn/css/building_blocks/selectors/index.html | 235 ++++++++++++ .../pseudo-classes_and_pseudo-elements/index.html | 415 +++++++++++++++++++++ .../selectors/selectors_tasks/index.html | 137 +++++++ .../type_class_and_id_selectors/index.html | 130 +++++++ .../index.html" | 51 --- .../attribute_selectors/index.html" | 160 -------- .../combinators/index.html" | 113 ------ .../index.html" | 235 ------------ .../pseudo-classes_and_pseudo-elements/index.html" | 415 --------------------- .../type_class_and_id_selectors/index.html" | 130 ------- .../index.html" | 137 ------- 15 files changed, 1364 insertions(+), 1241 deletions(-) create mode 100644 files/ru/learn/css/building_blocks/cascade_tasks/index.html create mode 100644 files/ru/learn/css/building_blocks/fundamental_css_comprehension/index.html create mode 100644 files/ru/learn/css/building_blocks/selectors/attribute_selectors/index.html create mode 100644 files/ru/learn/css/building_blocks/selectors/combinators/index.html create mode 100644 files/ru/learn/css/building_blocks/selectors/index.html create mode 100644 files/ru/learn/css/building_blocks/selectors/pseudo-classes_and_pseudo-elements/index.html create mode 100644 files/ru/learn/css/building_blocks/selectors/selectors_tasks/index.html create mode 100644 files/ru/learn/css/building_blocks/selectors/type_class_and_id_selectors/index.html delete mode 100644 "files/ru/learn/css/building_blocks/\320\272\320\260\321\201\320\272\320\260\320\264_\320\267\320\260\320\264\320\260\321\207\320\270/index.html" delete mode 100644 "files/ru/learn/css/building_blocks/\321\201\320\265\320\273\320\265\320\272\321\202\320\276\321\200\321\213/attribute_selectors/index.html" delete mode 100644 "files/ru/learn/css/building_blocks/\321\201\320\265\320\273\320\265\320\272\321\202\320\276\321\200\321\213/combinators/index.html" delete mode 100644 "files/ru/learn/css/building_blocks/\321\201\320\265\320\273\320\265\320\272\321\202\320\276\321\200\321\213/index.html" delete mode 100644 "files/ru/learn/css/building_blocks/\321\201\320\265\320\273\320\265\320\272\321\202\320\276\321\200\321\213/pseudo-classes_and_pseudo-elements/index.html" delete mode 100644 "files/ru/learn/css/building_blocks/\321\201\320\265\320\273\320\265\320\272\321\202\320\276\321\200\321\213/type_class_and_id_selectors/index.html" delete mode 100644 "files/ru/learn/css/building_blocks/\321\201\320\265\320\273\320\265\320\272\321\202\320\276\321\200\321\213/\321\201\320\265\320\273\320\265\320\272\321\202\320\276\321\200\321\213_\320\267\320\260\320\264\320\260\321\207\320\270/index.html" (limited to 'files/ru/learn/css/building_blocks') diff --git a/files/ru/learn/css/building_blocks/cascade_tasks/index.html b/files/ru/learn/css/building_blocks/cascade_tasks/index.html new file mode 100644 index 0000000000..b6524f9ed3 --- /dev/null +++ b/files/ru/learn/css/building_blocks/cascade_tasks/index.html @@ -0,0 +1,51 @@ +--- +title: 'Проверьте ваши навыки: Каскад' +slug: Learn/CSS/Building_blocks/Каскад_задачи +tags: + - CSS + - Начинающий +translation_of: Learn/CSS/Building_blocks/Cascade_tasks +--- +
{{LearnSidebar}}
+ +
+ +

Цель этого задания — помочь вам проверить ваше понимание некоторых значений и элементов, которые мы рассмотрели в уроке Каскад и наследование.

+ +
+

Примечание: Вы можете проверять решения в интерактивном редакторе, расположенном ниже, но, возможно, вам будут полезны онлайн-инструменты, такие как  CodePen, jsFiddle или Glitch, которые можно использовать для работы над заданием, предварительно загрузив в них код.
+
+ Если вы зашли в тупик, обратитесь к нам за помощью — смотрите раздел {{anch("Оценка или дальнейшая помощь")}} внизу этой страницы.

+
+ +

Задание 1

+ +

В этом задании вам надо использовать одно из специальных значений, рассмотренных нами в разделе Контроль наследования,  чтобы написать в новом правиле объявление, которое восстановит белый цвет фона без использования фактического значения цвета.

+ +

Barely visible yellow links on a white background.

+ +

Посмотрите, сможете ли вы повторить эту картинку в примере ниже.

+ +

{{EmbedGHLiveSample("css-examples/learn/tasks/cascade/cascade.html", '100%', 700)}}

+ +
+

Для получения оценки или для дальнейшей работы загрузите исходный код для этого задания в ваш собственный редактор или в онлайн-редактор.

+
+ +

Оценка или дальнейшая помощь

+ +

Вы можете упражняться на этих примерах в интерактивных редакторах, упомянутых выше.

+ +

Если вы хотите, чтобы вашу работу оценили, или вы зашли в тупик и хотите попросить о помощи:

+ +
    +
  1. Поместите вашу работу в онлайн-редактор с возможностью совместного редактирования, например, CodePen, jsFiddle или Glitch. Вы можете сами написать код или использвать файлы с исходным кодом, расположенные по ссылке в предыдущем разделе.
    2. +
  2. Напишите сообщение с просьбой оценить и/или помочь на форуме в категории "Обучение": MDN Discourse forum Learning category. Ваше сообщение должно включать: +
      +
    • Описательный заголовок, например, "Необходима оценка для теста 1 Каскад" ("Assessment wanted for Cascade skill test 1").
      • +
    • Подробности того, что вы уже попытались сделать, и чего бы вы хотели от нас, т.е. или вы в тупике и нуждаетесь в помощи, или хотите оценки.
      • +
    • Ссылка на пример, который вы просите оценить или который вызвал затруднения, в онлайн-редакторе с возможностью совместного редактирования (как указано в шаге 1 выше). Это принятая практика погружения в вопрос — очень трудно помочь кому-либо решить проблему кодирования, если вы не видите его код.
      • +
    • Ссылка на страницу с заданием, чтобы мы могли найти вопрос, на который вы затрудняетесь ответить.
      • +
    +
    3. +
diff --git a/files/ru/learn/css/building_blocks/fundamental_css_comprehension/index.html b/files/ru/learn/css/building_blocks/fundamental_css_comprehension/index.html new file mode 100644 index 0000000000..9009c684d8 --- /dev/null +++ b/files/ru/learn/css/building_blocks/fundamental_css_comprehension/index.html @@ -0,0 +1,123 @@ +--- +title: Понимание основ CSS +slug: Learn/CSS/Introduction_to_CSS/Ponimanie_osnov_CSS +translation_of: Learn/CSS/Building_blocks/Fundamental_CSS_comprehension +--- +
{{LearnSidebar}}
+ +
{{PreviousMenu("Learn/CSS/Introduction_to_CSS/Debugging_CSS", "Learn/CSS/Introduction_to_CSS")}}
+ +

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

+ + + + + + + + + + + + +
Предварительно:Перед попыткой пройти проверку вы должны проработать все статьи в этом модуля.
Цель:Проверка понимания основной теории, синтаксиса и техник CSS.
+ +

Отправной пункт

+ +

Чтобы начать проверку, вы должны:

+ + + +
+

Примечание: Вместо этого вы можете использовать для проверки такие сайты как  JSBin или Thimble. Вы можете скопировать HTML и заполнить CSS в одном из этих онлайн редакторов и использовать этот URL чтобы указать элементу <img> файл изображения. Если используемый онлайн-редактор не имеет отдельной панели для CSS, вы можете поместить его в элемент <style> в заголовке документа.

+
+ +

Краткое описание проекта

+ +

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

+ +

Первоначальные настройки:

+ + + +

Позаботимся о селекторах и наборах правил, предоставленных в файле CSS:

+ + + +

Какие новые наборы правил надо написать:

+ + + +
+

Примечание: Имейте в виду, что второй набор правил устанавливает font-size: 10px; для элемента<html> — это означает, что для любых потомков <html> em будет равен 10px, а не 16px, как это задано по умолчанию. (Это, конечно, при условии, что у потомков, о которых идет речь, нет предков, находящихся в иерархии между ними и <html>, на которых установлен другой размер шрифта. Это может повлиять на необходимые значения, хотя в этом простом примере это не проблема).

+
+ +

Другие вещи для размышления:

+ + + +

Советы и подсказки

+ + + +

Образец

+ +

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

+ +

A view of the finished business card, show a reader header and footer, and a darker center panel containing the main details and image.

+ +

Проверка

+ +

Если вы проходите эту проверку в рамках организованного курса, у вас должна быть возможность отдать свою работу своему учителю/наставнику для оценки. Если вы самообучаетесь, то вы можете получить руководство по оценке достаточно простым путем: спросив в теме обсуждения об этом упражнении, или в канале #mdn IRC на Mozilla IRC. Но сначала попробуйте выполнить упражнение — вы ничего не выиграете путем обмана!

+ +

{{PreviousMenu("Learn/CSS/Introduction_to_CSS/Debugging_CSS", "Learn/CSS/Introduction_to_CSS")}}

+ +

В этом модуле

+ + diff --git a/files/ru/learn/css/building_blocks/selectors/attribute_selectors/index.html b/files/ru/learn/css/building_blocks/selectors/attribute_selectors/index.html new file mode 100644 index 0000000000..9a6a2c4c07 --- /dev/null +++ b/files/ru/learn/css/building_blocks/selectors/attribute_selectors/index.html @@ -0,0 +1,160 @@ +--- +title: Селекторы атрибута +slug: Learn/CSS/Building_blocks/Селекторы/Attribute_selectors +tags: + - CSS + - Атрибут + - Начинающий + - Обучение + - Селекторы +translation_of: Learn/CSS/Building_blocks/Selectors/Attribute_selectors +--- +

{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors", "Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements", "Learn/CSS/Building_blocks")}}

+ +

Как вы знаете из курса о HTML, элементы могут иметь атрибуты, которые дают дополнительную информацию о размечаемом элементе. В CSS вы можете использовать селекторы атрибута для стилизации элементов с определенными атрибутами. Этот урок покажет вам, как использовать эти очень полезные селекторы.

+ + + + + + + + + + + + +
Необходимые условия:Базовая компьютерная грамотность, установка базового ПО, базовые знания о работе с файлами, основы HTML (изучите Введение в HTML) и понимание работы CSS (изучите Введение в CSS.)
Задача:Узнать, что такое селекторы атрибута и как их использовать.
+ +

Селекторы наличия и значения

+ +

Эти селекторы делают возможным выбор элемента, основанный только на наличии атрибута (например, href) или на всевозможных разного рода сочетаниях со значением атрибута.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
СелекторПримерОписание
[attr]a[title]Выбирает элементы с атрибутом attr (имя которого — это значение в квадратных скобках).
[attr=value]a[href="https://example.com"]Выбирает элементы с атрибутом attr, значение которого в точности равно value — строке внутри кавычек.
[attr~=value]p[class~="special"] +

Выбирает элементы с атрибутом attr, значение которого в точности равно value или содержит value в своём (разделённом пробелами) списке значений.

+
[attr|=value]div[lang|="zh"]Выбирает элементы с атрибутом attr, значение которого в точности равно value или начинается с value, за которым сразу следует дефис.
+ +

В приведённом ниже примере вы можете увидеть использование этих селекторов.

+ + + +

{{EmbedGHLiveSample("css-examples/learn/selectors/attribute.html", '100%', 800)}}

+ +

Селекторы вхождения подстроки

+ +

Эти селекторы предоставляют более широкие возможности для выявления вхождения подстроки в значение атрибута. Например, если у вас есть классы box-warning и box-error и вы хотите выбрать всё, что начинается со стороки "box-", вы можете использовать [class^="box-"], чтобы выбрать оба класса (или [class|="box"] как описано в предыдущем разделе).

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
СелекторПримерОписание
[attr^=value]li[class^="box-"]Выбирает элементы с атрибутом attr (его имя — это значение в квадратных скобках), значение которого начинается с value.
[attr$=value]li[class$="-box"]Выбирает элементы с атрибутом attr, значение которого заканчивается на value.
[attr*= ]li[class*="box"]Выбирает элементы с атрибутом attr, значение которого содержит value, независимо от его положения внутри строки.
+ +

(Отступление: возможно, будет полезным заметить, что ^ и $ давно используются как якоря в так называемых регулярных выражениях и обозначают начинается с и заканчивается на.)

+ +

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

+ + + +

{{EmbedGHLiveSample("css-examples/learn/selectors/attribute-substring.html", '100%', 800)}}

+ +

Чувствительность к регистру

+ +

Если вы хотите выбрать значения атрибута без учета регистра, вы можете использовать значение i перед закрывающей скобкой. Этот признак говорит браузеру, что символы ASCII должны сопоставляться без учета регистра. Без этого признака значения будут сопоставлены в соответствии с чувствительностью к регистру языка документа — в случае HTML такая чувствительность присутствует.

+ +

В примере ниже первый селектор выберет значение, начинающееся с a — это соответствует только первому элементу списка, потому что два других элемента списка начинаются с заглавной буквы A. Второй селектор использует признак нечувствительности к регистру и поэтому выберет все элементы списка.

+ +

{{EmbedGHLiveSample("css-examples/learn/selectors/attribute-case.html", '100%', 800)}}

+ +
+

Примечание: Существует также более новое значение s, которое вызывает сопоставление с учетом регистра в контекстах, где сопоставление обычно не учитывает регистр, однако это не так хорошо поддерживается в браузерах и не очень полезно в контексте HTML.

+
+ +

Следующие шаги

+ +

Итак, мы рассмотрели селекторы атрибута, и вы можете перейти к следующей статье, в которой рассказывается о псевдоклассах и псевдоэлементах.

+ +

{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors", "Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements", "Learn/CSS/Building_blocks")}}

+ +

В этом модуле

+ +
    +
  1. Каскад и наследование
    2. +
  2. Селекторы CSS + +
    3. +
  3. Модель коробки (The box model)
    4. +
  4. Фон и границы
    5. +
  5. Обработка разных направлений текста
    6. +
  6. Переполнение содержимого
    7. +
  7. Значения и единицы измерения
    8. +
  8. Изменение размеров в CSS
    9. +
  9. Элементы изображений, форм и медиа-элементы
    10. +
  10. Стилизация таблиц
    11. +
  11. Отладка CSS
    12. +
  12. Организация вашей CSS
    13. +
diff --git a/files/ru/learn/css/building_blocks/selectors/combinators/index.html b/files/ru/learn/css/building_blocks/selectors/combinators/index.html new file mode 100644 index 0000000000..7a076e05a8 --- /dev/null +++ b/files/ru/learn/css/building_blocks/selectors/combinators/index.html @@ -0,0 +1,113 @@ +--- +title: Комбинаторы +slug: Learn/CSS/Building_blocks/Селекторы/Combinators +tags: + - CSS + - Селекторы + - комбинаторы +translation_of: Learn/CSS/Building_blocks/Selectors/Combinators +--- +

{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements", "Learn/CSS/Building_blocks/The_box_model", "Learn/CSS/Building_blocks")}}

+ +

Наконец мы рассмотрим селекторы, которые называются комбинаторами, поскольку они соединяют другие селекторы, создавая полезную связь селекторов друг с другом и расположением содержимого в документе.

+ + + + + + + + + + + + +
Необходимые условия:Базовая компьютерная грамотность, установленное базовое программное обеспечение, базовые знания о работе с файлами, основы HTML (изучите Введение в HTML) и понимание работы CSS (изучите Введение в CSS.)
Цель:Узнать о различных комбинаторных селекторах, которые могут быть использованы в CSS.
+ +

Комбинатор потомка

+ +

Селектор потомка — обычно представляется символом пробела ( ) — соединяет два селектора так, что элементы, соответствующие второму селектору, выбираются, если они имеют предка (родителя, родителя родителя, родителя родителя родителя и т.д.), соответствующего первому селектору. Селекторы, которые используют комбинатор потомка, называются селекторами потомка.

+ +
body article p
+ +

В приведенном ниже примере выбирается только тот элемент <p>, который находится внутри элемента с классом.box.

+ +

{{EmbedGHLiveSample("css-examples/learn/selectors/descendant.html", '100%', 500)}}

+ +

Дочерний комбинатор

+ +

Дочерний комбинатор (>) помещается между двумя селекорами CSS. При этом будут выбраны только те элементы, соответствующие второму селектору, которые являются прямыми потомками элементов, соответствующих первому селектору. Все элементы-потомки на более низких уровнях иерархии будут пропущены. Например, чтобы выбрать только те элементы <p>, которые являются дочерними элементами <article>, селетор пишется так:

+ +
article > p
+ +

Другой пример. Имеется неупорядоченный список, заключающий в себе другой, упорядоченный список. Дочерний комбинатор используется для того, чтобы выбрать только те элементы <li>, которые являются прямыми потомками <ul>, и присвоить им верхнюю границу красного цвета.

+ +

Если вы уберёте символ >, указывающий на то, что это селектор с дочерним комбинатором, селетор превратится в селектор всех потомков (комбинатор - пробел) и все элементы <li> получат верхнюю границу красного цвета.

+ +

{{EmbedGHLiveSample("css-examples/learn/selectors/child.html", '100%', 600)}}

+ +

Соседний родственный комбинатор

+ +

Соседний родственный селектор (+) используется для выбора элемента, который непосредственно следует за другим элементом и находится на одном с ним уровне иерархии. Например, чтобы выбрать все элементы <img> , которые идут сразу после элементов <p> :

+ +
p + img
+ +

Распространенный вариант использования — сделать что-то с абзацем, который следует за заголовком, как в примере ниже. Здесь мы ищем абзац, который непосредственно примыкает к <h1>, и стилизуем его.

+ +

Если вы вставите какой-то другой элемент, например <h2> между <h1> и <p>, вы обнаружите, что абзац больше не соответствует селектору и поэтому не получает цвет фона и переднего плана, применяемый, когда элемент является соседним.

+ +

{{EmbedGHLiveSample("css-examples/learn/selectors/adjacent.html", '100%', 800)}}

+ +

Общий родственный комбинатор

+ +

Если вы хотите выбрать родственные элементы, даже если они не являются непосредственными соседями, то вы можете использовать общий родственный комбинатор (~). Чтобы выбрать все элементы <img>, которые находятся в любом месте после элементов <p>, надо указать так:

+ +
p ~ img
+ +

В приведенном ниже примере мы выбираем все элементы <p>, которые идут после <h1>, и хотя в документе есть также <div>, тем не менее <p>, который идет после него, будет выбран.

+ +

{{EmbedGHLiveSample("css-examples/learn/selectors/general.html", '100%', 600)}}

+ +

Использование комбинаторов

+ +

Вы можете соединять с помощью комбинаторов любые селекторы, которые мы изучали в предыдущих уроках, чтобы выбрать часть вашего документа. Например, если мы хотим выбрать пункты списка с классом "a", которые являются прямыми потомками <ul>, можно использовать следующую комбинацию:

+ +
ul > li[class="a"]  {  }
+ +

Однако будьте осторожны при создании больших списков селекторов, которые выделяют очень конкретные части вашего документа. Будет трудно повторно использовать правила CSS, так как вы сделали селектор очень специфичным для определения местоположения этого элемента в разметке.

+ +

Часто бывает лучше создать простой класс и применить его к рассматриваемому элементу. Тем не менее, ваши знания о комбинаторах будут очень полезны, если вам нужно добраться до чего-то в вашем документе и вы не можете получить доступ к HTML, возможно, из-за того, что он генерируется CMS.

+ +

Проверьте ваши навыки!

+ +

Мы охватили много тем в этой статье. А вы можете вспомнить наиболее важную информацию? Можете пройти несколько дополнительных тестов для того чтобы убедиться в том, что вы усвоили эту информацию, прежде чем пойдёте дальше — смотрите Проверьте ваши навыки: Селекторы.

+ +

Двигаемся дальше

+ +

Это последний раздел в наших уроках по селекторам. Далее мы перейдем к другой важной части CSS — CSS модель коробки.

+ +

{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements", "Learn/CSS/Building_blocks/The_box_model", "Learn/CSS/Building_blocks")}}

+ +

В этом модуле

+ +
    +
  1. Каскад и наследование
    2. +
  2. Селекторы CSS + +
    3. +
  3. Модель коробки
    4. +
  4. Фон и границы
    5. +
  5. Обработка разных направлений текста
    6. +
  6. Переполнение содержимого
    7. +
  7. Значения и единицы измерения
    8. +
  8. Изменение размеров в CSS
    9. +
  9. Элементы изображений, форм и медиа-элементы
    10. +
  10. Стилизация таблиц
    11. +
  11. Отладка CSS
    12. +
  12. Организация вашей CSS
    13. +
diff --git a/files/ru/learn/css/building_blocks/selectors/index.html b/files/ru/learn/css/building_blocks/selectors/index.html new file mode 100644 index 0000000000..3819af4207 --- /dev/null +++ b/files/ru/learn/css/building_blocks/selectors/index.html @@ -0,0 +1,235 @@ +--- +title: Селекторы CSS +slug: Learn/CSS/Building_blocks/Селекторы +tags: + - Attribute + - Beginner + - CSS + - Learn + - Pseudo-class + - Pseudo-element + - id + - Обучение + - Псевдоэлемент + - псевдокласс + - селектор +translation_of: Learn/CSS/Building_blocks/Selectors +--- +
{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Cascade_and_inheritance", "Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors", "Learn/CSS/Building_blocks")}}
+ +

В {{Glossary("CSS")}}-селекторы используются для стилизации {{glossary("HTML")}} элементов на веб-странице. Существует широкий выбор CSS-селекторов, позволяющий максимально точно отбирать элементы для стилизации. В этой статье и её подстатьях мы в мельчайших подробностях рассмотрим разные их типы и увидим, как они работают.

+ + + + + + + + + + + + +
Необходимые знания:Базовая компьютерная грамотность, основное программное обеспечение, понимание работы с файлами, базовые знания HTML (смотрите Введение в HTML), и представление о том, как работает CSS (смотрите Введение в CSS).
Цель:Узнать, как работают CSS-селекторы.
+ +

Что такое селекторы?

+ +

Вы уже встерчались с селекторами. Это выражения, которые говорят браузеру, к какому элементу HTML нужно применить те или иные свойства CSS, определённые внутри блока объявления стиля.

+ +

Some code with the h1 highlighted.

+ +

Ранее Вы встречали несколько разных селекторов и узнали, что существуют селекторы, которые по-разному относятся к документу, — например используя элемент h1 или класс .special.

+ +

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

+ +

Несколько селекторов

+ +

Несколько селекторов, использующих одни и те же таблицы стилей, можно объединить в лист селекторов: правило будет добавлено к каждому селектору. К примеру, у меня есть одинаковые правила для заголовка h1 и класса .special; я могу написать их так:

+ +
h1 {
+  color: blue;
+}
+
+.special {
+  color: blue;
+}
+ +

А могу написать короче — просто отделив селекторы запятыми:

+ +
h1, .special {
+  color: blue;
+}
+ +

Пробел можно вставлять до или после запятой. Ещё удобнее писать каждый селектор с новой строки:

+ +
h1,
+.special {
+  color: blue;
+}
+ +

В упражнении ниже объедините два селектора в одном правиле. Результат должен остаться таким же.

+ +

{{EmbedGHLiveSample("css-examples/learn/selectors/selector-list.html", '100%', 1000)}} 

+ +

При объединении селекторов таким образом, при условии если хоть один селектор будет недействительным, всё правило будет пропущено.

+ +

В примере ниже правило для селектора класса не будет работать, в то время как h1 будет стилизован.

+ +
h1 {
+  color: blue;
+}
+
+..special {
+  color: blue;
+}
+ +

Но если мы объединим селекторы, правило не применится ни к h1, ни к классу: оно считается недействительным.

+ +
h1, ..special {
+  color: blue;
+}
+ +

Типы селекторов

+ +

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

+ +

Селекторы тегов, классов и идентификаторов

+ +

К этой группе относятся селекторы HTML-элементов, таких как <h1>.

+ +
h1 { }
+ +

К группе относятся и селекторы классов:

+ +
.box { }
+ +

или селекторы идентификаторов (ID):

+ +
#unique { }
+ +

Селекторы атрибутов

+ +

Эта группа селекторов позволяет выбирать селекторы, основываясь на наличии у них конкретного атрибута элемента:

+ +
a[title] { }
+ +

или основываясь на значении атрибута:

+ +
a[href="https://example.com"] { }
+ +

Псевдоклассы, псевдоэлементы

+ +

К этой группе относятся псевдоклассы, которые стилизуют определённое состояние элемента. Псевдокласс :hover, например, применяет правило, только если на элемент наведён курсор мыши

+ +
a:hover { }
+ +

К группе ещё относятся псевдоэлементы, которые выбирают определённую часть элемента (вместо целого элемента). Например, ::first-line всегда выбирает первую строку внутри элемента (абзаца <p> в нашем случае), действуя, как если бы тег <span> оборачивал первую строку, а затем был стилизован.

+ +
p::first-line { }
+ +

Комбинаторы

+ +

И последняя группа селекторов: она позволяет объединять селекторы, чтобы было легче находить конкретные элементы внутри документа. В следующем примере мы отыскали дочерний элемент <article> с помощью комбинатора дочерних элементов (>):

+ +
article > p { }
+ +

Продолжение

+ +

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

+ +

{{PreviousMenuNext("Learn/CSS/Building_blocks/Cascade_and_inheritance", "Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors", "Learn/CSS/Building_blocks")}}

+ +

Справка о селекторах

+ +

В таблице ниже — доступные сейчас селекторы, а также ссылки к страницам, где рассказывается, как использовать каждый из них. Я также добавил ссылки на страницы MDN для каждого селектора, чтобы вы могли проверить, поддерживаются ли они браузерами.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
СелекторПримерРуководство
Селектор по типуh1 {  }Селектор по типу
Универсальный селектор* {  }Универсальный селектор
Селектор класса.box {  }Селекторы классов
Селектор ID#unique { }Селекторы по ID
Селектор атрибутов a[title] {  }Селекторы атрибутов
Селектор псевдоклассовp:first-child { }Псевдоклассы
Селектор псевдоэлементовp::first-line { }Псевдоэлементы
Селектор потомковarticle pСелектор потомков
Селектор дочерних элементовarticle > pСелектор дочерних элементов
Смежные селекторыh1 + pСмежные селекторы
Селектор братских элементовh1 ~ pСелектор братских элементов
+ +

В этом модуле

+ +
    +
  1. Каскад и наследование
    2. +
  2. CSS-селекторы + +
    3. +
  3. Блоки в CSS
    4. +
  4. Фон и границы
    5. +
  5. Изменение направления текста
    6. +
  6. Перекрытие содержимого
    7. +
  7. Значения свойств CSS
    8. +
  8. Изменение размеров в CSS
    9. +
  9. Изображения, формы и прочие медиа-элементы
    10. +
  10. Стилизация таблиц
    11. +
  11. Отладка CSS
    12. +
  12. Организация CSS-кода
    13. +
diff --git a/files/ru/learn/css/building_blocks/selectors/pseudo-classes_and_pseudo-elements/index.html b/files/ru/learn/css/building_blocks/selectors/pseudo-classes_and_pseudo-elements/index.html new file mode 100644 index 0000000000..4fe67b8adb --- /dev/null +++ b/files/ru/learn/css/building_blocks/selectors/pseudo-classes_and_pseudo-elements/index.html @@ -0,0 +1,415 @@ +--- +title: 'Псевдоклассы, псевдоэлементы' +slug: Learn/CSS/Building_blocks/Селекторы/Pseudo-classes_and_pseudo-elements +tags: + - CSS + - Начинающий + - Обучение + - Псевдо + - Псевдоэлемент + - Селекторы + - псевдокласс +translation_of: Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements +--- +

{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Attribute_selectors", "Learn/CSS/Building_blocks/Selectors/Combinators", "Learn/CSS/Building_blocks")}}

+ +

Следующий набор селекторов, который мы рассмотрим, относится к псевдоклассам и псевдоэлементам. Их очень много, и они часто служат довольно специфическим целям. После того как вы узнаете порядок их использования, просмотрите список — не найдётся ли в нём что-либо, что поможет решить стоящую перед вами задачу. Кроме того, будет полезным заглянуть на соответствующую каждому селектору страницу MDN, чтобы прояснить, как его обрабатывает браузер.

+ + + + + + + + + + + + +
Необходимые условия:Базовая компьютерная грамотность, установка базового ПО, базовые знания о работе с файлами, основы HTML (изучите Введение в HTML) и понимание работы CSS (изучите Введение в CSS.)
Цель:Узнать о селекторах псевдокласса и псевдоэлемента.
+ +

Что такое псевдокласс?

+ +

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

+ +

Псевдоклассы — это ключевые слова, которые начинаются с двоеточия:

+ +
:pseudo-class-name
+ +

Простой пример псевдокласса

+ +

Давайте рассмотрим простой пример. Если бы мы хотели сделать шрифт первого абзаца статьи более крупным и жирным, мы могли бы добавить класс к этому абзацу, а затем добавить CSS к этому классу, как показано в первом примере ниже:

+ +

{{EmbedGHLiveSample("css-examples/learn/selectors/first-child.html", '100%', 800)}}

+ +

Однако поддержка может оказаться утомительной — что если новый абзац будет добавлен в верхнюю часть документа? Тогда нам нужно будет передвинуть класс к новому абзацу. Вместо добавления класса мы могли бы использовать селектор псевдокласса {{cssxref(":first-child")}} — он всегда будет нацелен на первый дочерний элемент в статье, и нам больше не нужно будет редактировать HTML (к тому же это не всегда возможно, например, в случае если он генерируется CMS.)

+ +

{{EmbedGHLiveSample("css-examples/learn/selectors/first-child2.html", '100%', 700)}}

+ +

Все псевдоклассы ведут себя подобным образом. Они нацелены на какой-то фрагмент вашего документа, находящийся в определенном состоянии, и ведут себя так, как если бы вы добавили класс в свой HTML. Рассмотрим некоторые другие примеры в MDN:

+ + + +
+

Примечание : Правильно писать псевдоклассы и элементы без какого бы то ни было предшествующего им селектора элемента. В примере выше вы могли бы написать :first-child и правило было бы применено к любому элементу, оказавшемуся первым дочерним для <article>, не только к первому дочернему абзацу — :first-child равнозначно *:first-child. Однако обычно вы хотите большего контроля, поэтому вам нужен более специфичный селектор.

+
+ +

Псевдоклассы пользовательского действия

+ +

Некоторые псевдоклассы применяются только тогда, когда пользователь некоторым образом взаимодействует с документом. Эти псевдоклассы действий пользователя, иногда называемые динамическими псевдоклассами, действуют так, как если бы класс был добавлен к элементу в момент взаимодействия с ним пользователя. Примеры даны для:

+ + + +

{{EmbedGHLiveSample("css-examples/learn/selectors/hover.html", '100%', 500)}}

+ +

Что такое псевдоэлемент?

+ +

Псевдоэлементы ведут себя сходным образом, однако они действуют так, как если бы вы добавили в разметку целый новый HTML-элемент, а не применили класс к существующим элементам. Псевдоэлементы начинаются с двойного двоеточия ::.

+ +
::pseudo-element-name
+ +
+

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

+
+ +

Например, если вы хотите выбрать первую строку абзаца, вы могли бы обернуть ее в <span> и использовать селектор элемента; однако это может не сработать, если количество слов, которые вы обернули, будет больше или меньше ширины родительского элемента. Поскольку мы, как правило, не знаем, сколько слов поместится в строке — т.к. их количество меняется, если меняется ширина экрана или размер шрифта — то надёжного решения при помощи HTML нет.

+ +

Селектор псевдоэлемента ::first-line сделает это наверняка — если количество слов увеличивается или уменьшается, он всё равно будет выбирать только первую строку.

+ +

{{EmbedGHLiveSample("css-examples/learn/selectors/first-line.html", '100%', 800)}}

+ +

Он действует так, как если бы <span> волшебным образом был обёрнут вокруг этой первой отформатированной строки и обновлялся бы каждый раз при изменении длины строки.

+ +

Вы можете видеть, что селектор выбирает первую строку обоих абзацев.

+ +

Объединение псевдоклассов и псевдоэлементов

+ +

Если вы хотите сделать шрифт первой строки первого абзаца жирным, вы можете связать вместе селекторы :first-child и ::first-line. Попробуйте отредактировать предыдущий живой пример, чтобы использовалась следующая CSS. Мы говорим, что хотим выбрать первую строку первого элемента <p>, который находится внутри элемента <article>.

+ +
article p:first-child::first-line {
+  font-size: 120%;
+  font-weight: bold;
+}
+ +

Генерация контента с помощью ::before и ::after

+ +

Существует пара специальных псевдоэлементов, которые используются вместе со свойством content для вставки содержимого в документ с помощью CSS.

+ +

Вы можете использовать их для вставки строки текста, как в приведенном ниже живом примере. Попробуйте изменить текстовое значение свойства {{cssxref("content")}} и вы увидите, как изменится результат. Можете также изменить псевдоэлемент ::before на ::after и увидите, что текст вставлен в конце элемента, а не в начале.

+ +

{{EmbedGHLiveSample("css-examples/learn/selectors/before.html", '100%', 400)}}

+ +

Однако вставка строк текста из CSS в реальности происходит не слишком часто, поскольку этот текст недоступен для некоторых экранных дикторов и его будет трудно найти и отредактировать в будущем.

+ +

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

+ +

{{EmbedGHLiveSample("css-examples/learn/selectors/after-icon.html", '100%', 400)}}

+ +

Эти псевдоэлементы также часто используются для вставки пустой строки, которая затем может быть стилизована так же, как и любой элемент на странице.

+ +

В следующем примере мы добавили пустую строку, используя псевдоэлемент ::before. Мы установили display: block, чтобы стилизовать его по ширине и высоте. Затем мы используем CSS, чтобы стилизовать его так же, как и любой другой элемент. Вы можете поиграть с CSS и изменить его внешний вид и поведение.

+ +

{{EmbedGHLiveSample("css-examples/learn/selectors/before-styled.html", '100%', 500)}}

+ +

Использование псевдоэлементов ::before и ::after вместе со свойством content в CSS называется "генерируемым контентом" в CSS, и вы часто будете видеть, как этот метод используется для различных задач. Отличным примером является сайт CSS Arrow Please, который помогает вам генерировать стрелку с помощью CSS. Посмотрите на CSS, когда вы создадите свою стрелку, и вы увидите использование псевдо-элементов {{cssxref("::before")}} и {{cssxref("::after")}}. Всякий раз, когда вы будете видеть эти селекторы, смотрите на свойство {{cssxref("content")}}, чтобы увидеть, что добавляется в документ..

+ +

Справочный раздел

+ +

Существует большое количество псевдоклассов и псевдоэлементов, и полезно иметь список, к которому можно обращаться. Ниже приведены таблицы, в которых они перечислены, со ссылками на их справочные страницы в MDN. Используйте эти таблицы как справочник, чтобы видеть массив доступных вам средств для нацеливания на элементы.

+ +

Псевдоклассы

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
СелекторОписание
{{ Cssxref(":active") }}Подходит, когда пользователь активирует (например, щелкает мышью) элемент.
{{ Cssxref(":any-link") }}Соответствует как состоянию :link, так и состоянию:visited ссылки.
{{ Cssxref(":blank") }}Соответствует элементу <input>, для которого значение ввода является пустым.
{{ Cssxref(":checked") }}Соответствует переключателю или флажку в выбранном состоянии.
{{ Cssxref(":current") }}Соответствует элементу или предку элемента, который в данный момент отображается.
{{ Cssxref(":default") }}Соответствует одному или нескольким элементам пользовательского интерфейса, которые являются элементами по умолчанию (обрабатывают нажатие клавиши enter) в наборе сходных элементов.
{{ Cssxref(":dir") }}Выбирает элемент на основе его направленности (значение атрибута HTML dir или свойства CSS direction ).
{{ Cssxref(":disabled") }}Соответствует элементам пользовательского интерфейса, которые находятся в отключённом состоянии.
{{ Cssxref(":empty") }}Соответствует элементу, у которого нет дочерних элементов, кроме необязательного пробела.
{{ Cssxref(":enabled") }}Соответствует элементам пользовательского интерфейса, которые находятся во включённом состоянии.
{{ Cssxref(":first") }}В постраничном носителе соответствует первой странице.
{{ Cssxref(":first-child") }}Соответствует элементу, который является первым среди других дочерних элементов одного предка.
{{ Cssxref(":first-of-type") }}Соответствует элементу, который является первым определенного типа среди других дочерних элементов одного предка.
{{ Cssxref(":focus") }}Соответствует элементу, имеющему фокус.
{{ Cssxref(":focus-visible")}}Соответствует элементу, имеющему фокус, при этом фокус должен быть виден пользователю.
{{ Cssxref(":focus-within") }}Соответствует элементу с фокусом, а также элементу с потомком, который имеет фокус.
{{ Cssxref(":future") }}Соответствует элементам после текущего элемента.
{{ Cssxref(":hover") }}Соответствует элементу, на который наведён курсор мыши.
{{ Cssxref(":indeterminate") }}Соответствует элементам пользовательского интерфейса, значение которых находится в неопределенном состоянии, обычно checkboxes.
{{ Cssxref(":in-range") }}Соответствует элементу с диапазоном, когда его значение находится в пределах диапазона.
{{ Cssxref(":invalid") }}Соответствует элементу, например <input>, в недопустимом состоянии.
{{ Cssxref(":lang") }}Соответствует элементу, основанному на языке (значение атрибута HTML lang).
{{ Cssxref(":last-child") }}Соответствует элементу, который является последним среди других дочерних элементов одного предка.
{{ Cssxref(":last-of-type") }}Соответствует элементу, который является последним определённого типа среди других дочерних элементов одного предка.
{{ Cssxref(":left") }}В постраничном носителе соответствует левосторонним страницам.
{{ Cssxref(":link")}}Соответствует непосещавшимся ссылкам.
{{ Cssxref(":local-link")}}Соответствует ссылкам, указывающим на страницы, которые расположены на том же сайте, что и текущий документ.
{{ Cssxref(":is", ":is()")}}Соответствует любому селектору из полученного списка селекторов.
{{ Cssxref(":not") }}Соответствует объектам, не входящим в список селекторов, переданный в качестве значения этому селектору.
{{ Cssxref(":nth-child") }}Соответствует элементам из списка дочерних элементов одного предка, которые подобраны по формуле вида an+b (например, 2n + 1 будет соответствовать элементам 1, 3, 5, 7 и т. д. Все нечетные числа.)
{{ Cssxref(":nth-of-type") }}Соответствует элементам из списка дочерних элементов одного предка, имеющим определенный тип (например, элементы <p>) — дочерние элементы подобраны по формуле вида an+b (например, 2n + 1 будет соответствовать элементам 1, 3, 5, 7 и т. д. Все нечетные числа.)
{{ Cssxref(":nth-last-child") }}Соответствует элементам из списка дочерних элементов одного предка, считая в обратном порядке от конца. Дочерние элементы подобраны по формуле вида an+b (например, 2n + 1 будет соответствовать последнему элементу в последовательности, затем на два элемента до него, затем ещё на два элемента назад и т. д. Все нечетные, считая с конца.)
{{ Cssxref(":nth-last-of-type") }}Соответствует элементам из списка дочерних элементов одного предка, имеющим определенный тип (например, элементы <p>), считая в обратном порядке от конца. Дочерние элементы подобраны по формуле вида an+b (например, 2n + 1 будет соответствовать последнему элементу этого типа в последовательности, затем на два элемента до него, затем ещё на два элемента назад и т. д. Все нечетные, считая с конца.)
{{ Cssxref(":only-child") }}Соответствует элементу, являющемуся единственным дочерним для своего предка.
{{ Cssxref(":only-of-type") }}Соответствует элементу, который отличается по типу от всех других дочерних элементов общего предка.
{{ Cssxref(":optional") }}Соответствует необязательным элементам формы.
{{ Cssxref(":out-of-range") }}Соответствует элементу с диапазоном, когда его значение находится вне диапазона.
{{ Cssxref(":past") }}Соответствует элементам перед текущим элементом.
{{ Cssxref(":placeholder-shown") }}Соответствует элементу input, который показывает текст-заполнитель.
{{ Cssxref(":playing") }}Соответствует элементу, представляющему аудио, видео или подобный ресурс с возможными состояниями “воспроизведён” или “приостановлен”, когда этот элемент “воспроизводится”.
{{ Cssxref(":paused") }}Соответствует элементу, представляющему аудио, видео или подобный ресурс с возможными состояниями “воспроизведён” или “приостановлен”, когда этот элемент “приостановлен”.
{{ Cssxref(":read-only") }}Соответствует элементу, который не может быть изменён пользователем.
{{ Cssxref(":read-write") }}Соответствует элементу, который может быть изменён пользователем.
{{ Cssxref(":required") }}Соответствует обязательным элементам формы.
{{ Cssxref(":right") }}В постраничном носителе соответствует правосторонним страницам.
{{ Cssxref(":root") }}Соответствует элементу, который является корнем документа.
{{ Cssxref(":scope") }}Соответствует любому элементу, который является элементом области видимости.
{{ Cssxref(":valid") }}Соответствует элементу, такому как <input>, в допустимом состоянии.
{{ Cssxref(":target") }}Соответствует элементу, если он является целью текущего URL (т. е. если у него есть ID, соответствующий текущему URL fragment).
{{ Cssxref(":visited") }}Соответствует посещённым ссылкам.
+ +

Псевдоэлементы

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
СелекторОписание
{{ Cssxref("::after") }}Соответствует элементу, который допускает стилизацию и появляется после текущего содержимого порождающего элемента.
{{ Cssxref("::before") }}Соответствует элементу, который допускает стилизацию и появляется перед текущим содержимым порождающего элемента.
{{ Cssxref("::first-letter") }}Соответствует первой букве элемента.
{{ Cssxref("::first-line") }}Соответствует первой строке содержимого порождающего элемента.
{{ Cssxref("::grammar-error") }} +

Соответствует части документа, содержащей грамматическую ошибку, отмеченную браузером.

+
{{ Cssxref("::marker") }}Соответствует полю маркера пункта списка, которое обычно содержит жирную точку или число.
+

{{ Cssxref("::selection") }}

+ 		Соответствует части документа, которая была выбрана.
{{ Cssxref("::spelling-error") }} +

Соответствует части документа, содержащей орфографическую ошибку, отмеченную браузером.

+
+ +

{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Attribute_selectors", "Learn/CSS/Building_blocks/Selectors/Combinators", "Learn/CSS/Building_blocks")}}

+ +

В этом модуле

+ +
    +
  1. Каскад и наследование
    2. +
  2. Селекторы CSS + +
    3. +
  3. Модель коробки
    4. +
  4. Фон и границы
    5. +
  5. Обработка разных направлений текста
    6. +
  6. Переполнение содержимого
    7. +
  7. Значения и единицы измерения
    8. +
  8. Изменение размеров в CSS
    9. +
  9. Элементы изображений, форм и медиа-элементы
    10. +
  10. Стилизация таблиц
    11. +
  11. Отладка CSS
    12. +
  12. Организация вашей CSS
    13. +
diff --git a/files/ru/learn/css/building_blocks/selectors/selectors_tasks/index.html b/files/ru/learn/css/building_blocks/selectors/selectors_tasks/index.html new file mode 100644 index 0000000000..b8f36063c2 --- /dev/null +++ b/files/ru/learn/css/building_blocks/selectors/selectors_tasks/index.html @@ -0,0 +1,137 @@ +--- +title: 'Проверьте ваши навыки: Селекторы' +slug: Learn/CSS/Building_blocks/Селекторы/Селекторы_Задачи +tags: + - CSS + - Начинающий +translation_of: Learn/CSS/Building_blocks/Selectors/Selectors_Tasks +--- +
{{LearnSidebar}}
+ +
+ +

Цель этой задачи — помочь вам проверить ваше понимание селекторов в CSS.

+ +
+

Примечание: Вы можете проверять решения в интерактивном редакторе, расположенном ниже, но, возможно, вам будут полезны онлайн-инструменты, такие как  CodePen, jsFiddle или Glitch, которые можно использовать для работы над заданием, предварительно загрузив в них код.
+
+ Если вы зашли в тупик, обратитесь к нам за помощью — смотрите раздел Оценка или дальнейшая помощь внизу этой страницы.

+
+ +

Selectors One

+ +

Without changing the HTML, use CSS to do the following things:

+ + + +

Text with the CSS applied for the solution to task 1.

+ +

Try updating the live code below to recreate the finished example:

+ +

{{EmbedGHLiveSample("css-examples/learn/tasks/selectors/type.html", '100%', 700)}}

+ +
+

For assessment or further work purposes, download the starting point for this task to work in your own editor or in an online editor.

+
+ +

Selectors Two

+ +

Without changing the HTML, make the following changes to the look of the content in this example:

+ + + +

Text with the CSS applied for the solution to task 2.

+ +

Try updating the live code below to recreate the finished example:

+ +

{{EmbedGHLiveSample("css-examples/learn/tasks/selectors/class-id.html", '100%', 800)}}

+ +
+

For assessment or further work purposes, download the starting point for this task to work in your own editor or in an online editor.

+
+ +

Selectors Three

+ +

In this example, try making the following changes without adding to the HTML.

+ + + +

Text with the CSS applied for the solution to task 3.

+ +

Try updating the live code below to recreate the finished example:

+ +

{{EmbedGHLiveSample("css-examples/learn/tasks/selectors/pseudo.html", '100%', 800)}}

+ +
+

For assessment or further work purposes, download the starting point for this task to work in your own editor or in an online editor.

+
+ +

Selectors Four

+ +

In this task try the following:

+ + + +

Text with the CSS applied for the solution to task 4.

+ +

Try updating the live code below to recreate the finished example:

+ +

{{EmbedGHLiveSample("css-examples/learn/tasks/selectors/combinators.html", '100%', 800)}}

+ +
+

For assessment or further work purposes, download the starting point for this task to work in your own editor or in an online editor.

+
+ +

Selectors Five

+ +

In this final task add CSS using attribute selectors to do the following:

+ + + +

Four links with different color borders.

+ +

Try updating the live code below to recreate the finished example:

+ +

{{EmbedGHLiveSample("css-examples/learn/tasks/selectors/attribute-links.html", '100%', 800)}}

+ +
+

For assessment or further work purposes, download the starting point for this task to work in your own editor or in an online editor.

+
+ +

Assessment or further help

+ +

You can practice these examples in the Interactive Editors mentioned above.

+ +

If you would like your work assessed, or are stuck and want to ask for help:

+ +
    +
  1. Put your work into an online shareable editor such as CodePen, jsFiddle, or Glitch. You can write the code yourself, or use the starting point files linked to in the above sections.
    2. +
  2. Write a post asking for assessment and/or help at the MDN Discourse forum Learning category. Your post should include: +
      +
    • A descriptive title such as "Assessment wanted for Selectors skill test 1".
      • +
    • Details of what you have already tried, and what you would like us to do, e.g. if you are stuck and need help, or want an assessment.
      • +
    • A link to the example you want to be assessed or need help with, in an online shareable editor (as mentioned in step 1 above). This is a good practice to get into — it's very hard to help someone with a coding problem if you can't see their code.
      • +
    • A link to the actual task or assessment page, so we can find the question you want help with.
      • +
    +
    3. +
diff --git a/files/ru/learn/css/building_blocks/selectors/type_class_and_id_selectors/index.html b/files/ru/learn/css/building_blocks/selectors/type_class_and_id_selectors/index.html new file mode 100644 index 0000000000..875899ab41 --- /dev/null +++ b/files/ru/learn/css/building_blocks/selectors/type_class_and_id_selectors/index.html @@ -0,0 +1,130 @@ +--- +title: 'Селекторы типа, класса и ID' +slug: Learn/CSS/Building_blocks/Селекторы/Type_Class_and_ID_Selectors +tags: + - CSS + - id + - Класс + - Начинающий + - Обучение + - Селекторы +translation_of: Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors +--- +

{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors", "Learn/CSS/Building_blocks/Selectors/Attribute_selectors", "Learn/CSS/Building_blocks")}}

+ +

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

+ + + + + + + + + + + + +
Необходимые условия:Базовая компьютерная грамотность, установка базового ПО, базовые знания о работе с файлами, основы HTML (изучите Введение в HTML) и понимание работы CSS (изучите Введение в CSS.)
Задача:Изучить различные селекторы CSS, которые мы можем использовать, чтобы применить CSS к документу.
+ +

Селекторы типа

+ +

Селектор типа иногда называется селектором имени тега или селектором элемента, поскольку он выбирает тег/элемент HTML в вашем документе. В примере ниже мы использовали селекторы span, em и strong.

+ +

Попробуйте добавить CSS-правило, чтобы выбрать элемент <h1> и изменить его цвет на синий.

+ +

{{EmbedGHLiveSample("css-examples/learn/selectors/type.html", '100%', 1100)}}

+ +

Универсальный селектор

+ +

Универсальный селектор обозначается звездочкой (*). Он выбирает всё в документе (или внутри родительского элемента, если он сцеплен с другим элементом и с комбинатором потомка). В следующем примере мы используем универсальный селектор, чтобы убрать внешние отступы у всех элементов. Несмотря на стилизацию по умолчанию, добавленную браузером, — она раздвигает заголовки и абзацы с помощью отступов, — всё плотно сжато.

+ +

{{EmbedGHLiveSample("css-examples/learn/selectors/universal.html", '100%', 750)}}

+ +

Такого рода поведение иногда можно увидеть в «таблицах сброса стилей», которые вычищают всю стилизацию браузера. Так как универсальный селектор вызывает глобальные изменения, мы используем его в очень специфических ситуациях, таких как та, что описана ниже.

+ +

Использование универсального селектора для облегчения чтения ваших селекторов

+ +

Одно из применений универсального селектора состоит в том, чтобы облегчить чтение селекторов и сделать их более удобопонятными с точки зрения того, что они делают. Например, если мы хотим выбрать элементы-потомки элемента <article>, которые являются первыми дочерними элементами своего родителя, включая дочерние элементы самого <article>, и сделать их шрифт жирным, мы могли бы использовать псевдо-класс {{cssxref(":first-child")}}, который мы будем изучать в уроке о псевдо-классах и псевдо-элементах, как селектор-потомок вместе с селектором элемента <article>: 

+ +
article :first-child {
+  font-weight: bold;
+}
+ +

Однако этот селектор можно спутать с article:first-child, который выберет любой элемент <article>, являющийся первым дочерним элементом другого элемента .

+ +

Чтобы избежать этой путаницы, мы можем добавить универсальный селектор в псевдо-класс :first-child , чтобы было очевидно, что делает селектор. Он выбирает любой элемент, который является первым дочерним элементом элемента <article> или первым дочерним элементом любого потомка элемента <article>:

+ +
article *:first-child {
+  font-weight: bold;
+}
+ +

Хотя оба делают одно и то же, удобочитаемость значительно улучшилась.

+ +

Селекторы класса

+ +

Селектор класса начинается с символа точки (.). Он выберет в документе всё, к чему применён этот класс. В живом примере ниже мы создали класс с именем .highlight, и применили его к нескольким местам в документе. Все элементы, к которым применён класс, подсвечиваются.

+ +

{{EmbedGHLiveSample("css-examples/learn/selectors/class.html", '100%', 750)}}

+ +

Нацеливание классов на отдельные элементы

+ +

Вы можете создать селектор, нацеленный на конкретные элементы, к которым применён класс. В следующем примере мы подсветим <span> с классом highlight иначе, чем заголовок <h1> с классом highlight. Мы сделаем это, используя селектор типа для элемента, на который нацелены, с классом, добавленным с помощью точки, без пробела между ними.

+ +

{{EmbedGHLiveSample("css-examples/learn/selectors/class-type.html", '100%', 750)}}

+ +

Этот подход сужает границы правила. Правило будет применяться только к этой конкретной комбинации элемента и класса. Вам нужно будет добавить другой селектор, если вы решили, что правило должно применяться и к другим элементам.

+ +

Нацеливание на элемент, к которому применено более одного класса

+ +

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

+ +

В примере ниже у нас есть <div>, содержащий примечание. Серая граница применятеся когда блок имеет класс notebox. Если у блока есть также класс warning или danger, мы меняем {{cssxref("border-color")}}.

+ +

Мы можем указать браузеру, что мы хотим подобрать только такой элемент, к которому применены два класса, сцепив их вместе без пробелов между ними. Вы увидите, что к последнему <div> не применён ни один стиль, так как он имеет только класс danger; ему нужен ещё и класс notebox, чтобы получить какую-нибудь стилизацию.

+ +

{{EmbedGHLiveSample("css-examples/learn/selectors/class-many.html", '100%', 900)}}

+ +

Селекторы ID

+ +

Селектор ID начинается с #, а не с точки, но используется так же, как и селектор класса. Однако ID может быть использован единожды на странице, и к элементу может быть применён только один id. Можно выбрать элемент, которому присвоен  id, а также вы можете предварить ID селектором типа для нацеливания на элемент, имеющий соответствующее сочетание элемента и ID. Вы можете увидеть оба варианта использования в следующем примере:

+ +

{{EmbedGHLiveSample("css-examples/learn/selectors/id.html", '100%', 750)}}

+ +
+

Предупреждение: Может показаться, что неоднократное использование в документе одного и того же ID выполняет задачи стилизования, но не стоит этого делать. Результатом будет неверный код, который приведёт к многочисленным странностям в поведении.

+
+ +
+

Примечание: Как мы знаем из урока по специфичности, ID имеет высокую специфичность. Он будет брать верх над большинством других селекторов. В большинстве случаев предпочтительнее добавить элементу класс, чем ID. Однако, если использование ID это единственный способ нацелиться на элемент — возможно, потому вы не имеете доступа к разметке и, следовательно, возможности её редактировать — это будет работать.

+
+ +

В следующей статье

+ +

Мы продолжим изучение селекторов и рассмотрим селекторы атрибута.

+ +

{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors", "Learn/CSS/Building_blocks/Selectors/Attribute_selectors", "Learn/CSS/Building_blocks")}}

+ +

В этом модуле

+ +
    +
  1. Каскад и наследование
    2. +
  2. Селекторы CSS + +
    3. +
  3. Модель коробки (The box model)
    4. +
  4. Фон и границы
    5. +
  5. Обработка разных направлений текста
    6. +
  6. Переполнение содержимого
    7. +
  7. Значения и единицы измерения
    8. +
  8. Изменение размеров в CSS
    9. +
  9. Элементы изображений, форм и медиа-элементы
    10. +
  10. Стилизация таблиц
    11. +
  11. Отладка CSS
    12. +
  12. Организация вашей CSS
    13. +
diff --git "a/files/ru/learn/css/building_blocks/\320\272\320\260\321\201\320\272\320\260\320\264_\320\267\320\260\320\264\320\260\321\207\320\270/index.html" "b/files/ru/learn/css/building_blocks/\320\272\320\260\321\201\320\272\320\260\320\264_\320\267\320\260\320\264\320\260\321\207\320\270/index.html" deleted file mode 100644 index b6524f9ed3..0000000000 --- "a/files/ru/learn/css/building_blocks/\320\272\320\260\321\201\320\272\320\260\320\264_\320\267\320\260\320\264\320\260\321\207\320\270/index.html" +++ /dev/null @@ -1,51 +0,0 @@ ---- -title: 'Проверьте ваши навыки: Каскад' -slug: Learn/CSS/Building_blocks/Каскад_задачи -tags: - - CSS - - Начинающий -translation_of: Learn/CSS/Building_blocks/Cascade_tasks ---- -
{{LearnSidebar}}
- -
- -

Цель этого задания — помочь вам проверить ваше понимание некоторых значений и элементов, которые мы рассмотрели в уроке Каскад и наследование.

- -
-

Примечание: Вы можете проверять решения в интерактивном редакторе, расположенном ниже, но, возможно, вам будут полезны онлайн-инструменты, такие как  CodePen, jsFiddle или Glitch, которые можно использовать для работы над заданием, предварительно загрузив в них код.
-
- Если вы зашли в тупик, обратитесь к нам за помощью — смотрите раздел {{anch("Оценка или дальнейшая помощь")}} внизу этой страницы.

-
- -

Задание 1

- -

В этом задании вам надо использовать одно из специальных значений, рассмотренных нами в разделе Контроль наследования,  чтобы написать в новом правиле объявление, которое восстановит белый цвет фона без использования фактического значения цвета.

- -

Barely visible yellow links on a white background.

- -

Посмотрите, сможете ли вы повторить эту картинку в примере ниже.

- -

{{EmbedGHLiveSample("css-examples/learn/tasks/cascade/cascade.html", '100%', 700)}}

- -
-

Для получения оценки или для дальнейшей работы загрузите исходный код для этого задания в ваш собственный редактор или в онлайн-редактор.

-
- -

Оценка или дальнейшая помощь

- -

Вы можете упражняться на этих примерах в интерактивных редакторах, упомянутых выше.

- -

Если вы хотите, чтобы вашу работу оценили, или вы зашли в тупик и хотите попросить о помощи:

- -
    -
  1. Поместите вашу работу в онлайн-редактор с возможностью совместного редактирования, например, CodePen, jsFiddle или Glitch. Вы можете сами написать код или использвать файлы с исходным кодом, расположенные по ссылке в предыдущем разделе.
    2. -
  2. Напишите сообщение с просьбой оценить и/или помочь на форуме в категории "Обучение": MDN Discourse forum Learning category. Ваше сообщение должно включать: -
      -
    • Описательный заголовок, например, "Необходима оценка для теста 1 Каскад" ("Assessment wanted for Cascade skill test 1").
      • -
    • Подробности того, что вы уже попытались сделать, и чего бы вы хотели от нас, т.е. или вы в тупике и нуждаетесь в помощи, или хотите оценки.
      • -
    • Ссылка на пример, который вы просите оценить или который вызвал затруднения, в онлайн-редакторе с возможностью совместного редактирования (как указано в шаге 1 выше). Это принятая практика погружения в вопрос — очень трудно помочь кому-либо решить проблему кодирования, если вы не видите его код.
      • -
    • Ссылка на страницу с заданием, чтобы мы могли найти вопрос, на который вы затрудняетесь ответить.
      • -
    -
    3. -
diff --git "a/files/ru/learn/css/building_blocks/\321\201\320\265\320\273\320\265\320\272\321\202\320\276\321\200\321\213/attribute_selectors/index.html" "b/files/ru/learn/css/building_blocks/\321\201\320\265\320\273\320\265\320\272\321\202\320\276\321\200\321\213/attribute_selectors/index.html" deleted file mode 100644 index 9a6a2c4c07..0000000000 --- "a/files/ru/learn/css/building_blocks/\321\201\320\265\320\273\320\265\320\272\321\202\320\276\321\200\321\213/attribute_selectors/index.html" +++ /dev/null @@ -1,160 +0,0 @@ ---- -title: Селекторы атрибута -slug: Learn/CSS/Building_blocks/Селекторы/Attribute_selectors -tags: - - CSS - - Атрибут - - Начинающий - - Обучение - - Селекторы -translation_of: Learn/CSS/Building_blocks/Selectors/Attribute_selectors ---- -

{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors", "Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements", "Learn/CSS/Building_blocks")}}

- -

Как вы знаете из курса о HTML, элементы могут иметь атрибуты, которые дают дополнительную информацию о размечаемом элементе. В CSS вы можете использовать селекторы атрибута для стилизации элементов с определенными атрибутами. Этот урок покажет вам, как использовать эти очень полезные селекторы.

- - - - - - - - - - - - -
Необходимые условия:Базовая компьютерная грамотность, установка базового ПО, базовые знания о работе с файлами, основы HTML (изучите Введение в HTML) и понимание работы CSS (изучите Введение в CSS.)
Задача:Узнать, что такое селекторы атрибута и как их использовать.
- -

Селекторы наличия и значения

- -

Эти селекторы делают возможным выбор элемента, основанный только на наличии атрибута (например, href) или на всевозможных разного рода сочетаниях со значением атрибута.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
СелекторПримерОписание
[attr]a[title]Выбирает элементы с атрибутом attr (имя которого — это значение в квадратных скобках).
[attr=value]a[href="https://example.com"]Выбирает элементы с атрибутом attr, значение которого в точности равно value — строке внутри кавычек.
[attr~=value]p[class~="special"] -

Выбирает элементы с атрибутом attr, значение которого в точности равно value или содержит value в своём (разделённом пробелами) списке значений.

-
[attr|=value]div[lang|="zh"]Выбирает элементы с атрибутом attr, значение которого в точности равно value или начинается с value, за которым сразу следует дефис.
- -

В приведённом ниже примере вы можете увидеть использование этих селекторов.

- - - -

{{EmbedGHLiveSample("css-examples/learn/selectors/attribute.html", '100%', 800)}}

- -

Селекторы вхождения подстроки

- -

Эти селекторы предоставляют более широкие возможности для выявления вхождения подстроки в значение атрибута. Например, если у вас есть классы box-warning и box-error и вы хотите выбрать всё, что начинается со стороки "box-", вы можете использовать [class^="box-"], чтобы выбрать оба класса (или [class|="box"] как описано в предыдущем разделе).

- - - - - - - - - - - - - - - - - - - - - - - - - - -
СелекторПримерОписание
[attr^=value]li[class^="box-"]Выбирает элементы с атрибутом attr (его имя — это значение в квадратных скобках), значение которого начинается с value.
[attr$=value]li[class$="-box"]Выбирает элементы с атрибутом attr, значение которого заканчивается на value.
[attr*= ]li[class*="box"]Выбирает элементы с атрибутом attr, значение которого содержит value, независимо от его положения внутри строки.
- -

(Отступление: возможно, будет полезным заметить, что ^ и $ давно используются как якоря в так называемых регулярных выражениях и обозначают начинается с и заканчивается на.)

- -

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

- - - -

{{EmbedGHLiveSample("css-examples/learn/selectors/attribute-substring.html", '100%', 800)}}

- -

Чувствительность к регистру

- -

Если вы хотите выбрать значения атрибута без учета регистра, вы можете использовать значение i перед закрывающей скобкой. Этот признак говорит браузеру, что символы ASCII должны сопоставляться без учета регистра. Без этого признака значения будут сопоставлены в соответствии с чувствительностью к регистру языка документа — в случае HTML такая чувствительность присутствует.

- -

В примере ниже первый селектор выберет значение, начинающееся с a — это соответствует только первому элементу списка, потому что два других элемента списка начинаются с заглавной буквы A. Второй селектор использует признак нечувствительности к регистру и поэтому выберет все элементы списка.

- -

{{EmbedGHLiveSample("css-examples/learn/selectors/attribute-case.html", '100%', 800)}}

- -
-

Примечание: Существует также более новое значение s, которое вызывает сопоставление с учетом регистра в контекстах, где сопоставление обычно не учитывает регистр, однако это не так хорошо поддерживается в браузерах и не очень полезно в контексте HTML.

-
- -

Следующие шаги

- -

Итак, мы рассмотрели селекторы атрибута, и вы можете перейти к следующей статье, в которой рассказывается о псевдоклассах и псевдоэлементах.

- -

{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors", "Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements", "Learn/CSS/Building_blocks")}}

- -

В этом модуле

- -
    -
  1. Каскад и наследование
    2. -
  2. Селекторы CSS - -
    3. -
  3. Модель коробки (The box model)
    4. -
  4. Фон и границы
    5. -
  5. Обработка разных направлений текста
    6. -
  6. Переполнение содержимого
    7. -
  7. Значения и единицы измерения
    8. -
  8. Изменение размеров в CSS
    9. -
  9. Элементы изображений, форм и медиа-элементы
    10. -
  10. Стилизация таблиц
    11. -
  11. Отладка CSS
    12. -
  12. Организация вашей CSS
    13. -
diff --git "a/files/ru/learn/css/building_blocks/\321\201\320\265\320\273\320\265\320\272\321\202\320\276\321\200\321\213/combinators/index.html" "b/files/ru/learn/css/building_blocks/\321\201\320\265\320\273\320\265\320\272\321\202\320\276\321\200\321\213/combinators/index.html" deleted file mode 100644 index 7a076e05a8..0000000000 --- "a/files/ru/learn/css/building_blocks/\321\201\320\265\320\273\320\265\320\272\321\202\320\276\321\200\321\213/combinators/index.html" +++ /dev/null @@ -1,113 +0,0 @@ ---- -title: Комбинаторы -slug: Learn/CSS/Building_blocks/Селекторы/Combinators -tags: - - CSS - - Селекторы - - комбинаторы -translation_of: Learn/CSS/Building_blocks/Selectors/Combinators ---- -

{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements", "Learn/CSS/Building_blocks/The_box_model", "Learn/CSS/Building_blocks")}}

- -

Наконец мы рассмотрим селекторы, которые называются комбинаторами, поскольку они соединяют другие селекторы, создавая полезную связь селекторов друг с другом и расположением содержимого в документе.

- - - - - - - - - - - - -
Необходимые условия:Базовая компьютерная грамотность, установленное базовое программное обеспечение, базовые знания о работе с файлами, основы HTML (изучите Введение в HTML) и понимание работы CSS (изучите Введение в CSS.)
Цель:Узнать о различных комбинаторных селекторах, которые могут быть использованы в CSS.
- -

Комбинатор потомка

- -

Селектор потомка — обычно представляется символом пробела ( ) — соединяет два селектора так, что элементы, соответствующие второму селектору, выбираются, если они имеют предка (родителя, родителя родителя, родителя родителя родителя и т.д.), соответствующего первому селектору. Селекторы, которые используют комбинатор потомка, называются селекторами потомка.

- -
body article p
- -

В приведенном ниже примере выбирается только тот элемент <p>, который находится внутри элемента с классом.box.

- -

{{EmbedGHLiveSample("css-examples/learn/selectors/descendant.html", '100%', 500)}}

- -

Дочерний комбинатор

- -

Дочерний комбинатор (>) помещается между двумя селекорами CSS. При этом будут выбраны только те элементы, соответствующие второму селектору, которые являются прямыми потомками элементов, соответствующих первому селектору. Все элементы-потомки на более низких уровнях иерархии будут пропущены. Например, чтобы выбрать только те элементы <p>, которые являются дочерними элементами <article>, селетор пишется так:

- -
article > p
- -

Другой пример. Имеется неупорядоченный список, заключающий в себе другой, упорядоченный список. Дочерний комбинатор используется для того, чтобы выбрать только те элементы <li>, которые являются прямыми потомками <ul>, и присвоить им верхнюю границу красного цвета.

- -

Если вы уберёте символ >, указывающий на то, что это селектор с дочерним комбинатором, селетор превратится в селектор всех потомков (комбинатор - пробел) и все элементы <li> получат верхнюю границу красного цвета.

- -

{{EmbedGHLiveSample("css-examples/learn/selectors/child.html", '100%', 600)}}

- -

Соседний родственный комбинатор

- -

Соседний родственный селектор (+) используется для выбора элемента, который непосредственно следует за другим элементом и находится на одном с ним уровне иерархии. Например, чтобы выбрать все элементы <img> , которые идут сразу после элементов <p> :

- -
p + img
- -

Распространенный вариант использования — сделать что-то с абзацем, который следует за заголовком, как в примере ниже. Здесь мы ищем абзац, который непосредственно примыкает к <h1>, и стилизуем его.

- -

Если вы вставите какой-то другой элемент, например <h2> между <h1> и <p>, вы обнаружите, что абзац больше не соответствует селектору и поэтому не получает цвет фона и переднего плана, применяемый, когда элемент является соседним.

- -

{{EmbedGHLiveSample("css-examples/learn/selectors/adjacent.html", '100%', 800)}}

- -

Общий родственный комбинатор

- -

Если вы хотите выбрать родственные элементы, даже если они не являются непосредственными соседями, то вы можете использовать общий родственный комбинатор (~). Чтобы выбрать все элементы <img>, которые находятся в любом месте после элементов <p>, надо указать так:

- -
p ~ img
- -

В приведенном ниже примере мы выбираем все элементы <p>, которые идут после <h1>, и хотя в документе есть также <div>, тем не менее <p>, который идет после него, будет выбран.

- -

{{EmbedGHLiveSample("css-examples/learn/selectors/general.html", '100%', 600)}}

- -

Использование комбинаторов

- -

Вы можете соединять с помощью комбинаторов любые селекторы, которые мы изучали в предыдущих уроках, чтобы выбрать часть вашего документа. Например, если мы хотим выбрать пункты списка с классом "a", которые являются прямыми потомками <ul>, можно использовать следующую комбинацию:

- -
ul > li[class="a"]  {  }
- -

Однако будьте осторожны при создании больших списков селекторов, которые выделяют очень конкретные части вашего документа. Будет трудно повторно использовать правила CSS, так как вы сделали селектор очень специфичным для определения местоположения этого элемента в разметке.

- -

Часто бывает лучше создать простой класс и применить его к рассматриваемому элементу. Тем не менее, ваши знания о комбинаторах будут очень полезны, если вам нужно добраться до чего-то в вашем документе и вы не можете получить доступ к HTML, возможно, из-за того, что он генерируется CMS.

- -

Проверьте ваши навыки!

- -

Мы охватили много тем в этой статье. А вы можете вспомнить наиболее важную информацию? Можете пройти несколько дополнительных тестов для того чтобы убедиться в том, что вы усвоили эту информацию, прежде чем пойдёте дальше — смотрите Проверьте ваши навыки: Селекторы.

- -

Двигаемся дальше

- -

Это последний раздел в наших уроках по селекторам. Далее мы перейдем к другой важной части CSS — CSS модель коробки.

- -

{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements", "Learn/CSS/Building_blocks/The_box_model", "Learn/CSS/Building_blocks")}}

- -

В этом модуле

- -
    -
  1. Каскад и наследование
    2. -
  2. Селекторы CSS - -
    3. -
  3. Модель коробки
    4. -
  4. Фон и границы
    5. -
  5. Обработка разных направлений текста
    6. -
  6. Переполнение содержимого
    7. -
  7. Значения и единицы измерения
    8. -
  8. Изменение размеров в CSS
    9. -
  9. Элементы изображений, форм и медиа-элементы
    10. -
  10. Стилизация таблиц
    11. -
  11. Отладка CSS
    12. -
  12. Организация вашей CSS
    13. -
diff --git "a/files/ru/learn/css/building_blocks/\321\201\320\265\320\273\320\265\320\272\321\202\320\276\321\200\321\213/index.html" "b/files/ru/learn/css/building_blocks/\321\201\320\265\320\273\320\265\320\272\321\202\320\276\321\200\321\213/index.html" deleted file mode 100644 index 3819af4207..0000000000 --- "a/files/ru/learn/css/building_blocks/\321\201\320\265\320\273\320\265\320\272\321\202\320\276\321\200\321\213/index.html" +++ /dev/null @@ -1,235 +0,0 @@ ---- -title: Селекторы CSS -slug: Learn/CSS/Building_blocks/Селекторы -tags: - - Attribute - - Beginner - - CSS - - Learn - - Pseudo-class - - Pseudo-element - - id - - Обучение - - Псевдоэлемент - - псевдокласс - - селектор -translation_of: Learn/CSS/Building_blocks/Selectors ---- -
{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Cascade_and_inheritance", "Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors", "Learn/CSS/Building_blocks")}}
- -

В {{Glossary("CSS")}}-селекторы используются для стилизации {{glossary("HTML")}} элементов на веб-странице. Существует широкий выбор CSS-селекторов, позволяющий максимально точно отбирать элементы для стилизации. В этой статье и её подстатьях мы в мельчайших подробностях рассмотрим разные их типы и увидим, как они работают.

- - - - - - - - - - - - -
Необходимые знания:Базовая компьютерная грамотность, основное программное обеспечение, понимание работы с файлами, базовые знания HTML (смотрите Введение в HTML), и представление о том, как работает CSS (смотрите Введение в CSS).
Цель:Узнать, как работают CSS-селекторы.
- -

Что такое селекторы?

- -

Вы уже встерчались с селекторами. Это выражения, которые говорят браузеру, к какому элементу HTML нужно применить те или иные свойства CSS, определённые внутри блока объявления стиля.

- -

Some code with the h1 highlighted.

- -

Ранее Вы встречали несколько разных селекторов и узнали, что существуют селекторы, которые по-разному относятся к документу, — например используя элемент h1 или класс .special.

- -

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

- -

Несколько селекторов

- -

Несколько селекторов, использующих одни и те же таблицы стилей, можно объединить в лист селекторов: правило будет добавлено к каждому селектору. К примеру, у меня есть одинаковые правила для заголовка h1 и класса .special; я могу написать их так:

- -
h1 {
-  color: blue;
-}
-
-.special {
-  color: blue;
-}
- -

А могу написать короче — просто отделив селекторы запятыми:

- -
h1, .special {
-  color: blue;
-}
- -

Пробел можно вставлять до или после запятой. Ещё удобнее писать каждый селектор с новой строки:

- -
h1,
-.special {
-  color: blue;
-}
- -

В упражнении ниже объедините два селектора в одном правиле. Результат должен остаться таким же.

- -

{{EmbedGHLiveSample("css-examples/learn/selectors/selector-list.html", '100%', 1000)}} 

- -

При объединении селекторов таким образом, при условии если хоть один селектор будет недействительным, всё правило будет пропущено.

- -

В примере ниже правило для селектора класса не будет работать, в то время как h1 будет стилизован.

- -
h1 {
-  color: blue;
-}
-
-..special {
-  color: blue;
-}
- -

Но если мы объединим селекторы, правило не применится ни к h1, ни к классу: оно считается недействительным.

- -
h1, ..special {
-  color: blue;
-}
- -

Типы селекторов

- -

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

- -

Селекторы тегов, классов и идентификаторов

- -

К этой группе относятся селекторы HTML-элементов, таких как <h1>.

- -
h1 { }
- -

К группе относятся и селекторы классов:

- -
.box { }
- -

или селекторы идентификаторов (ID):

- -
#unique { }
- -

Селекторы атрибутов

- -

Эта группа селекторов позволяет выбирать селекторы, основываясь на наличии у них конкретного атрибута элемента:

- -
a[title] { }
- -

или основываясь на значении атрибута:

- -
a[href="https://example.com"] { }
- -

Псевдоклассы, псевдоэлементы

- -

К этой группе относятся псевдоклассы, которые стилизуют определённое состояние элемента. Псевдокласс :hover, например, применяет правило, только если на элемент наведён курсор мыши

- -
a:hover { }
- -

К группе ещё относятся псевдоэлементы, которые выбирают определённую часть элемента (вместо целого элемента). Например, ::first-line всегда выбирает первую строку внутри элемента (абзаца <p> в нашем случае), действуя, как если бы тег <span> оборачивал первую строку, а затем был стилизован.

- -
p::first-line { }
- -

Комбинаторы

- -

И последняя группа селекторов: она позволяет объединять селекторы, чтобы было легче находить конкретные элементы внутри документа. В следующем примере мы отыскали дочерний элемент <article> с помощью комбинатора дочерних элементов (>):

- -
article > p { }
- -

Продолжение

- -

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

- -

{{PreviousMenuNext("Learn/CSS/Building_blocks/Cascade_and_inheritance", "Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors", "Learn/CSS/Building_blocks")}}

- -

Справка о селекторах

- -

В таблице ниже — доступные сейчас селекторы, а также ссылки к страницам, где рассказывается, как использовать каждый из них. Я также добавил ссылки на страницы MDN для каждого селектора, чтобы вы могли проверить, поддерживаются ли они браузерами.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
СелекторПримерРуководство
Селектор по типуh1 {  }Селектор по типу
Универсальный селектор* {  }Универсальный селектор
Селектор класса.box {  }Селекторы классов
Селектор ID#unique { }Селекторы по ID
Селектор атрибутов a[title] {  }Селекторы атрибутов
Селектор псевдоклассовp:first-child { }Псевдоклассы
Селектор псевдоэлементовp::first-line { }Псевдоэлементы
Селектор потомковarticle pСелектор потомков
Селектор дочерних элементовarticle > pСелектор дочерних элементов
Смежные селекторыh1 + pСмежные селекторы
Селектор братских элементовh1 ~ pСелектор братских элементов
- -

В этом модуле

- -
    -
  1. Каскад и наследование
    2. -
  2. CSS-селекторы - -
    3. -
  3. Блоки в CSS
    4. -
  4. Фон и границы
    5. -
  5. Изменение направления текста
    6. -
  6. Перекрытие содержимого
    7. -
  7. Значения свойств CSS
    8. -
  8. Изменение размеров в CSS
    9. -
  9. Изображения, формы и прочие медиа-элементы
    10. -
  10. Стилизация таблиц
    11. -
  11. Отладка CSS
    12. -
  12. Организация CSS-кода
    13. -
diff --git "a/files/ru/learn/css/building_blocks/\321\201\320\265\320\273\320\265\320\272\321\202\320\276\321\200\321\213/pseudo-classes_and_pseudo-elements/index.html" "b/files/ru/learn/css/building_blocks/\321\201\320\265\320\273\320\265\320\272\321\202\320\276\321\200\321\213/pseudo-classes_and_pseudo-elements/index.html" deleted file mode 100644 index 4fe67b8adb..0000000000 --- "a/files/ru/learn/css/building_blocks/\321\201\320\265\320\273\320\265\320\272\321\202\320\276\321\200\321\213/pseudo-classes_and_pseudo-elements/index.html" +++ /dev/null @@ -1,415 +0,0 @@ ---- -title: 'Псевдоклассы, псевдоэлементы' -slug: Learn/CSS/Building_blocks/Селекторы/Pseudo-classes_and_pseudo-elements -tags: - - CSS - - Начинающий - - Обучение - - Псевдо - - Псевдоэлемент - - Селекторы - - псевдокласс -translation_of: Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements ---- -

{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Attribute_selectors", "Learn/CSS/Building_blocks/Selectors/Combinators", "Learn/CSS/Building_blocks")}}

- -

Следующий набор селекторов, который мы рассмотрим, относится к псевдоклассам и псевдоэлементам. Их очень много, и они часто служат довольно специфическим целям. После того как вы узнаете порядок их использования, просмотрите список — не найдётся ли в нём что-либо, что поможет решить стоящую перед вами задачу. Кроме того, будет полезным заглянуть на соответствующую каждому селектору страницу MDN, чтобы прояснить, как его обрабатывает браузер.

- - - - - - - - - - - - -
Необходимые условия:Базовая компьютерная грамотность, установка базового ПО, базовые знания о работе с файлами, основы HTML (изучите Введение в HTML) и понимание работы CSS (изучите Введение в CSS.)
Цель:Узнать о селекторах псевдокласса и псевдоэлемента.
- -

Что такое псевдокласс?

- -

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

- -

Псевдоклассы — это ключевые слова, которые начинаются с двоеточия:

- -
:pseudo-class-name
- -

Простой пример псевдокласса

- -

Давайте рассмотрим простой пример. Если бы мы хотели сделать шрифт первого абзаца статьи более крупным и жирным, мы могли бы добавить класс к этому абзацу, а затем добавить CSS к этому классу, как показано в первом примере ниже:

- -

{{EmbedGHLiveSample("css-examples/learn/selectors/first-child.html", '100%', 800)}}

- -

Однако поддержка может оказаться утомительной — что если новый абзац будет добавлен в верхнюю часть документа? Тогда нам нужно будет передвинуть класс к новому абзацу. Вместо добавления класса мы могли бы использовать селектор псевдокласса {{cssxref(":first-child")}} — он всегда будет нацелен на первый дочерний элемент в статье, и нам больше не нужно будет редактировать HTML (к тому же это не всегда возможно, например, в случае если он генерируется CMS.)

- -

{{EmbedGHLiveSample("css-examples/learn/selectors/first-child2.html", '100%', 700)}}

- -

Все псевдоклассы ведут себя подобным образом. Они нацелены на какой-то фрагмент вашего документа, находящийся в определенном состоянии, и ведут себя так, как если бы вы добавили класс в свой HTML. Рассмотрим некоторые другие примеры в MDN:

- - - -
-

Примечание : Правильно писать псевдоклассы и элементы без какого бы то ни было предшествующего им селектора элемента. В примере выше вы могли бы написать :first-child и правило было бы применено к любому элементу, оказавшемуся первым дочерним для <article>, не только к первому дочернему абзацу — :first-child равнозначно *:first-child. Однако обычно вы хотите большего контроля, поэтому вам нужен более специфичный селектор.

-
- -

Псевдоклассы пользовательского действия

- -

Некоторые псевдоклассы применяются только тогда, когда пользователь некоторым образом взаимодействует с документом. Эти псевдоклассы действий пользователя, иногда называемые динамическими псевдоклассами, действуют так, как если бы класс был добавлен к элементу в момент взаимодействия с ним пользователя. Примеры даны для:

- - - -

{{EmbedGHLiveSample("css-examples/learn/selectors/hover.html", '100%', 500)}}

- -

Что такое псевдоэлемент?

- -

Псевдоэлементы ведут себя сходным образом, однако они действуют так, как если бы вы добавили в разметку целый новый HTML-элемент, а не применили класс к существующим элементам. Псевдоэлементы начинаются с двойного двоеточия ::.

- -
::pseudo-element-name
- -
-

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

-
- -

Например, если вы хотите выбрать первую строку абзаца, вы могли бы обернуть ее в <span> и использовать селектор элемента; однако это может не сработать, если количество слов, которые вы обернули, будет больше или меньше ширины родительского элемента. Поскольку мы, как правило, не знаем, сколько слов поместится в строке — т.к. их количество меняется, если меняется ширина экрана или размер шрифта — то надёжного решения при помощи HTML нет.

- -

Селектор псевдоэлемента ::first-line сделает это наверняка — если количество слов увеличивается или уменьшается, он всё равно будет выбирать только первую строку.

- -

{{EmbedGHLiveSample("css-examples/learn/selectors/first-line.html", '100%', 800)}}

- -

Он действует так, как если бы <span> волшебным образом был обёрнут вокруг этой первой отформатированной строки и обновлялся бы каждый раз при изменении длины строки.

- -

Вы можете видеть, что селектор выбирает первую строку обоих абзацев.

- -

Объединение псевдоклассов и псевдоэлементов

- -

Если вы хотите сделать шрифт первой строки первого абзаца жирным, вы можете связать вместе селекторы :first-child и ::first-line. Попробуйте отредактировать предыдущий живой пример, чтобы использовалась следующая CSS. Мы говорим, что хотим выбрать первую строку первого элемента <p>, который находится внутри элемента <article>.

- -
article p:first-child::first-line {
-  font-size: 120%;
-  font-weight: bold;
-}
- -

Генерация контента с помощью ::before и ::after

- -

Существует пара специальных псевдоэлементов, которые используются вместе со свойством content для вставки содержимого в документ с помощью CSS.

- -

Вы можете использовать их для вставки строки текста, как в приведенном ниже живом примере. Попробуйте изменить текстовое значение свойства {{cssxref("content")}} и вы увидите, как изменится результат. Можете также изменить псевдоэлемент ::before на ::after и увидите, что текст вставлен в конце элемента, а не в начале.

- -

{{EmbedGHLiveSample("css-examples/learn/selectors/before.html", '100%', 400)}}

- -

Однако вставка строк текста из CSS в реальности происходит не слишком часто, поскольку этот текст недоступен для некоторых экранных дикторов и его будет трудно найти и отредактировать в будущем.

- -

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

- -

{{EmbedGHLiveSample("css-examples/learn/selectors/after-icon.html", '100%', 400)}}

- -

Эти псевдоэлементы также часто используются для вставки пустой строки, которая затем может быть стилизована так же, как и любой элемент на странице.

- -

В следующем примере мы добавили пустую строку, используя псевдоэлемент ::before. Мы установили display: block, чтобы стилизовать его по ширине и высоте. Затем мы используем CSS, чтобы стилизовать его так же, как и любой другой элемент. Вы можете поиграть с CSS и изменить его внешний вид и поведение.

- -

{{EmbedGHLiveSample("css-examples/learn/selectors/before-styled.html", '100%', 500)}}

- -

Использование псевдоэлементов ::before и ::after вместе со свойством content в CSS называется "генерируемым контентом" в CSS, и вы часто будете видеть, как этот метод используется для различных задач. Отличным примером является сайт CSS Arrow Please, который помогает вам генерировать стрелку с помощью CSS. Посмотрите на CSS, когда вы создадите свою стрелку, и вы увидите использование псевдо-элементов {{cssxref("::before")}} и {{cssxref("::after")}}. Всякий раз, когда вы будете видеть эти селекторы, смотрите на свойство {{cssxref("content")}}, чтобы увидеть, что добавляется в документ..

- -

Справочный раздел

- -

Существует большое количество псевдоклассов и псевдоэлементов, и полезно иметь список, к которому можно обращаться. Ниже приведены таблицы, в которых они перечислены, со ссылками на их справочные страницы в MDN. Используйте эти таблицы как справочник, чтобы видеть массив доступных вам средств для нацеливания на элементы.

- -

Псевдоклассы

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
СелекторОписание
{{ Cssxref(":active") }}Подходит, когда пользователь активирует (например, щелкает мышью) элемент.
{{ Cssxref(":any-link") }}Соответствует как состоянию :link, так и состоянию:visited ссылки.
{{ Cssxref(":blank") }}Соответствует элементу <input>, для которого значение ввода является пустым.
{{ Cssxref(":checked") }}Соответствует переключателю или флажку в выбранном состоянии.
{{ Cssxref(":current") }}Соответствует элементу или предку элемента, который в данный момент отображается.
{{ Cssxref(":default") }}Соответствует одному или нескольким элементам пользовательского интерфейса, которые являются элементами по умолчанию (обрабатывают нажатие клавиши enter) в наборе сходных элементов.
{{ Cssxref(":dir") }}Выбирает элемент на основе его направленности (значение атрибута HTML dir или свойства CSS direction ).
{{ Cssxref(":disabled") }}Соответствует элементам пользовательского интерфейса, которые находятся в отключённом состоянии.
{{ Cssxref(":empty") }}Соответствует элементу, у которого нет дочерних элементов, кроме необязательного пробела.
{{ Cssxref(":enabled") }}Соответствует элементам пользовательского интерфейса, которые находятся во включённом состоянии.
{{ Cssxref(":first") }}В постраничном носителе соответствует первой странице.
{{ Cssxref(":first-child") }}Соответствует элементу, который является первым среди других дочерних элементов одного предка.
{{ Cssxref(":first-of-type") }}Соответствует элементу, который является первым определенного типа среди других дочерних элементов одного предка.
{{ Cssxref(":focus") }}Соответствует элементу, имеющему фокус.
{{ Cssxref(":focus-visible")}}Соответствует элементу, имеющему фокус, при этом фокус должен быть виден пользователю.
{{ Cssxref(":focus-within") }}Соответствует элементу с фокусом, а также элементу с потомком, который имеет фокус.
{{ Cssxref(":future") }}Соответствует элементам после текущего элемента.
{{ Cssxref(":hover") }}Соответствует элементу, на который наведён курсор мыши.
{{ Cssxref(":indeterminate") }}Соответствует элементам пользовательского интерфейса, значение которых находится в неопределенном состоянии, обычно checkboxes.
{{ Cssxref(":in-range") }}Соответствует элементу с диапазоном, когда его значение находится в пределах диапазона.
{{ Cssxref(":invalid") }}Соответствует элементу, например <input>, в недопустимом состоянии.
{{ Cssxref(":lang") }}Соответствует элементу, основанному на языке (значение атрибута HTML lang).
{{ Cssxref(":last-child") }}Соответствует элементу, который является последним среди других дочерних элементов одного предка.
{{ Cssxref(":last-of-type") }}Соответствует элементу, который является последним определённого типа среди других дочерних элементов одного предка.
{{ Cssxref(":left") }}В постраничном носителе соответствует левосторонним страницам.
{{ Cssxref(":link")}}Соответствует непосещавшимся ссылкам.
{{ Cssxref(":local-link")}}Соответствует ссылкам, указывающим на страницы, которые расположены на том же сайте, что и текущий документ.
{{ Cssxref(":is", ":is()")}}Соответствует любому селектору из полученного списка селекторов.
{{ Cssxref(":not") }}Соответствует объектам, не входящим в список селекторов, переданный в качестве значения этому селектору.
{{ Cssxref(":nth-child") }}Соответствует элементам из списка дочерних элементов одного предка, которые подобраны по формуле вида an+b (например, 2n + 1 будет соответствовать элементам 1, 3, 5, 7 и т. д. Все нечетные числа.)
{{ Cssxref(":nth-of-type") }}Соответствует элементам из списка дочерних элементов одного предка, имеющим определенный тип (например, элементы <p>) — дочерние элементы подобраны по формуле вида an+b (например, 2n + 1 будет соответствовать элементам 1, 3, 5, 7 и т. д. Все нечетные числа.)
{{ Cssxref(":nth-last-child") }}Соответствует элементам из списка дочерних элементов одного предка, считая в обратном порядке от конца. Дочерние элементы подобраны по формуле вида an+b (например, 2n + 1 будет соответствовать последнему элементу в последовательности, затем на два элемента до него, затем ещё на два элемента назад и т. д. Все нечетные, считая с конца.)
{{ Cssxref(":nth-last-of-type") }}Соответствует элементам из списка дочерних элементов одного предка, имеющим определенный тип (например, элементы <p>), считая в обратном порядке от конца. Дочерние элементы подобраны по формуле вида an+b (например, 2n + 1 будет соответствовать последнему элементу этого типа в последовательности, затем на два элемента до него, затем ещё на два элемента назад и т. д. Все нечетные, считая с конца.)
{{ Cssxref(":only-child") }}Соответствует элементу, являющемуся единственным дочерним для своего предка.
{{ Cssxref(":only-of-type") }}Соответствует элементу, который отличается по типу от всех других дочерних элементов общего предка.
{{ Cssxref(":optional") }}Соответствует необязательным элементам формы.
{{ Cssxref(":out-of-range") }}Соответствует элементу с диапазоном, когда его значение находится вне диапазона.
{{ Cssxref(":past") }}Соответствует элементам перед текущим элементом.
{{ Cssxref(":placeholder-shown") }}Соответствует элементу input, который показывает текст-заполнитель.
{{ Cssxref(":playing") }}Соответствует элементу, представляющему аудио, видео или подобный ресурс с возможными состояниями “воспроизведён” или “приостановлен”, когда этот элемент “воспроизводится”.
{{ Cssxref(":paused") }}Соответствует элементу, представляющему аудио, видео или подобный ресурс с возможными состояниями “воспроизведён” или “приостановлен”, когда этот элемент “приостановлен”.
{{ Cssxref(":read-only") }}Соответствует элементу, который не может быть изменён пользователем.
{{ Cssxref(":read-write") }}Соответствует элементу, который может быть изменён пользователем.
{{ Cssxref(":required") }}Соответствует обязательным элементам формы.
{{ Cssxref(":right") }}В постраничном носителе соответствует правосторонним страницам.
{{ Cssxref(":root") }}Соответствует элементу, который является корнем документа.
{{ Cssxref(":scope") }}Соответствует любому элементу, который является элементом области видимости.
{{ Cssxref(":valid") }}Соответствует элементу, такому как <input>, в допустимом состоянии.
{{ Cssxref(":target") }}Соответствует элементу, если он является целью текущего URL (т. е. если у него есть ID, соответствующий текущему URL fragment).
{{ Cssxref(":visited") }}Соответствует посещённым ссылкам.
- -

Псевдоэлементы

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
СелекторОписание
{{ Cssxref("::after") }}Соответствует элементу, который допускает стилизацию и появляется после текущего содержимого порождающего элемента.
{{ Cssxref("::before") }}Соответствует элементу, который допускает стилизацию и появляется перед текущим содержимым порождающего элемента.
{{ Cssxref("::first-letter") }}Соответствует первой букве элемента.
{{ Cssxref("::first-line") }}Соответствует первой строке содержимого порождающего элемента.
{{ Cssxref("::grammar-error") }} -

Соответствует части документа, содержащей грамматическую ошибку, отмеченную браузером.

-
{{ Cssxref("::marker") }}Соответствует полю маркера пункта списка, которое обычно содержит жирную точку или число.
-

{{ Cssxref("::selection") }}

- 		Соответствует части документа, которая была выбрана.
{{ Cssxref("::spelling-error") }} -

Соответствует части документа, содержащей орфографическую ошибку, отмеченную браузером.

-
- -

{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Attribute_selectors", "Learn/CSS/Building_blocks/Selectors/Combinators", "Learn/CSS/Building_blocks")}}

- -

В этом модуле

- -
    -
  1. Каскад и наследование
    2. -
  2. Селекторы CSS - -
    3. -
  3. Модель коробки
    4. -
  4. Фон и границы
    5. -
  5. Обработка разных направлений текста
    6. -
  6. Переполнение содержимого
    7. -
  7. Значения и единицы измерения
    8. -
  8. Изменение размеров в CSS
    9. -
  9. Элементы изображений, форм и медиа-элементы
    10. -
  10. Стилизация таблиц
    11. -
  11. Отладка CSS
    12. -
  12. Организация вашей CSS
    13. -
diff --git "a/files/ru/learn/css/building_blocks/\321\201\320\265\320\273\320\265\320\272\321\202\320\276\321\200\321\213/type_class_and_id_selectors/index.html" "b/files/ru/learn/css/building_blocks/\321\201\320\265\320\273\320\265\320\272\321\202\320\276\321\200\321\213/type_class_and_id_selectors/index.html" deleted file mode 100644 index 875899ab41..0000000000 --- "a/files/ru/learn/css/building_blocks/\321\201\320\265\320\273\320\265\320\272\321\202\320\276\321\200\321\213/type_class_and_id_selectors/index.html" +++ /dev/null @@ -1,130 +0,0 @@ ---- -title: 'Селекторы типа, класса и ID' -slug: Learn/CSS/Building_blocks/Селекторы/Type_Class_and_ID_Selectors -tags: - - CSS - - id - - Класс - - Начинающий - - Обучение - - Селекторы -translation_of: Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors ---- -

{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors", "Learn/CSS/Building_blocks/Selectors/Attribute_selectors", "Learn/CSS/Building_blocks")}}

- -

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

- - - - - - - - - - - - -
Необходимые условия:Базовая компьютерная грамотность, установка базового ПО, базовые знания о работе с файлами, основы HTML (изучите Введение в HTML) и понимание работы CSS (изучите Введение в CSS.)
Задача:Изучить различные селекторы CSS, которые мы можем использовать, чтобы применить CSS к документу.
- -

Селекторы типа

- -

Селектор типа иногда называется селектором имени тега или селектором элемента, поскольку он выбирает тег/элемент HTML в вашем документе. В примере ниже мы использовали селекторы span, em и strong.

- -

Попробуйте добавить CSS-правило, чтобы выбрать элемент <h1> и изменить его цвет на синий.

- -

{{EmbedGHLiveSample("css-examples/learn/selectors/type.html", '100%', 1100)}}

- -

Универсальный селектор

- -

Универсальный селектор обозначается звездочкой (*). Он выбирает всё в документе (или внутри родительского элемента, если он сцеплен с другим элементом и с комбинатором потомка). В следующем примере мы используем универсальный селектор, чтобы убрать внешние отступы у всех элементов. Несмотря на стилизацию по умолчанию, добавленную браузером, — она раздвигает заголовки и абзацы с помощью отступов, — всё плотно сжато.

- -

{{EmbedGHLiveSample("css-examples/learn/selectors/universal.html", '100%', 750)}}

- -

Такого рода поведение иногда можно увидеть в «таблицах сброса стилей», которые вычищают всю стилизацию браузера. Так как универсальный селектор вызывает глобальные изменения, мы используем его в очень специфических ситуациях, таких как та, что описана ниже.

- -

Использование универсального селектора для облегчения чтения ваших селекторов

- -

Одно из применений универсального селектора состоит в том, чтобы облегчить чтение селекторов и сделать их более удобопонятными с точки зрения того, что они делают. Например, если мы хотим выбрать элементы-потомки элемента <article>, которые являются первыми дочерними элементами своего родителя, включая дочерние элементы самого <article>, и сделать их шрифт жирным, мы могли бы использовать псевдо-класс {{cssxref(":first-child")}}, который мы будем изучать в уроке о псевдо-классах и псевдо-элементах, как селектор-потомок вместе с селектором элемента <article>: 

- -
article :first-child {
-  font-weight: bold;
-}
- -

Однако этот селектор можно спутать с article:first-child, который выберет любой элемент <article>, являющийся первым дочерним элементом другого элемента .

- -

Чтобы избежать этой путаницы, мы можем добавить универсальный селектор в псевдо-класс :first-child , чтобы было очевидно, что делает селектор. Он выбирает любой элемент, который является первым дочерним элементом элемента <article> или первым дочерним элементом любого потомка элемента <article>:

- -
article *:first-child {
-  font-weight: bold;
-}
- -

Хотя оба делают одно и то же, удобочитаемость значительно улучшилась.

- -

Селекторы класса

- -

Селектор класса начинается с символа точки (.). Он выберет в документе всё, к чему применён этот класс. В живом примере ниже мы создали класс с именем .highlight, и применили его к нескольким местам в документе. Все элементы, к которым применён класс, подсвечиваются.

- -

{{EmbedGHLiveSample("css-examples/learn/selectors/class.html", '100%', 750)}}

- -

Нацеливание классов на отдельные элементы

- -

Вы можете создать селектор, нацеленный на конкретные элементы, к которым применён класс. В следующем примере мы подсветим <span> с классом highlight иначе, чем заголовок <h1> с классом highlight. Мы сделаем это, используя селектор типа для элемента, на который нацелены, с классом, добавленным с помощью точки, без пробела между ними.

- -

{{EmbedGHLiveSample("css-examples/learn/selectors/class-type.html", '100%', 750)}}

- -

Этот подход сужает границы правила. Правило будет применяться только к этой конкретной комбинации элемента и класса. Вам нужно будет добавить другой селектор, если вы решили, что правило должно применяться и к другим элементам.

- -

Нацеливание на элемент, к которому применено более одного класса

- -

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

- -

В примере ниже у нас есть <div>, содержащий примечание. Серая граница применятеся когда блок имеет класс notebox. Если у блока есть также класс warning или danger, мы меняем {{cssxref("border-color")}}.

- -

Мы можем указать браузеру, что мы хотим подобрать только такой элемент, к которому применены два класса, сцепив их вместе без пробелов между ними. Вы увидите, что к последнему <div> не применён ни один стиль, так как он имеет только класс danger; ему нужен ещё и класс notebox, чтобы получить какую-нибудь стилизацию.

- -

{{EmbedGHLiveSample("css-examples/learn/selectors/class-many.html", '100%', 900)}}

- -

Селекторы ID

- -

Селектор ID начинается с #, а не с точки, но используется так же, как и селектор класса. Однако ID может быть использован единожды на странице, и к элементу может быть применён только один id. Можно выбрать элемент, которому присвоен  id, а также вы можете предварить ID селектором типа для нацеливания на элемент, имеющий соответствующее сочетание элемента и ID. Вы можете увидеть оба варианта использования в следующем примере:

- -

{{EmbedGHLiveSample("css-examples/learn/selectors/id.html", '100%', 750)}}

- -
-

Предупреждение: Может показаться, что неоднократное использование в документе одного и того же ID выполняет задачи стилизования, но не стоит этого делать. Результатом будет неверный код, который приведёт к многочисленным странностям в поведении.

-
- -
-

Примечание: Как мы знаем из урока по специфичности, ID имеет высокую специфичность. Он будет брать верх над большинством других селекторов. В большинстве случаев предпочтительнее добавить элементу класс, чем ID. Однако, если использование ID это единственный способ нацелиться на элемент — возможно, потому вы не имеете доступа к разметке и, следовательно, возможности её редактировать — это будет работать.

-
- -

В следующей статье

- -

Мы продолжим изучение селекторов и рассмотрим селекторы атрибута.

- -

{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors", "Learn/CSS/Building_blocks/Selectors/Attribute_selectors", "Learn/CSS/Building_blocks")}}

- -

В этом модуле

- -
    -
  1. Каскад и наследование
    2. -
  2. Селекторы CSS - -
    3. -
  3. Модель коробки (The box model)
    4. -
  4. Фон и границы
    5. -
  5. Обработка разных направлений текста
    6. -
  6. Переполнение содержимого
    7. -
  7. Значения и единицы измерения
    8. -
  8. Изменение размеров в CSS
    9. -
  9. Элементы изображений, форм и медиа-элементы
    10. -
  10. Стилизация таблиц
    11. -
  11. Отладка CSS
    12. -
  12. Организация вашей CSS
    13. -
diff --git "a/files/ru/learn/css/building_blocks/\321\201\320\265\320\273\320\265\320\272\321\202\320\276\321\200\321\213/\321\201\320\265\320\273\320\265\320\272\321\202\320\276\321\200\321\213_\320\267\320\260\320\264\320\260\321\207\320\270/index.html" "b/files/ru/learn/css/building_blocks/\321\201\320\265\320\273\320\265\320\272\321\202\320\276\321\200\321\213/\321\201\320\265\320\273\320\265\320\272\321\202\320\276\321\200\321\213_\320\267\320\260\320\264\320\260\321\207\320\270/index.html" deleted file mode 100644 index b8f36063c2..0000000000 --- "a/files/ru/learn/css/building_blocks/\321\201\320\265\320\273\320\265\320\272\321\202\320\276\321\200\321\213/\321\201\320\265\320\273\320\265\320\272\321\202\320\276\321\200\321\213_\320\267\320\260\320\264\320\260\321\207\320\270/index.html" +++ /dev/null @@ -1,137 +0,0 @@ ---- -title: 'Проверьте ваши навыки: Селекторы' -slug: Learn/CSS/Building_blocks/Селекторы/Селекторы_Задачи -tags: - - CSS - - Начинающий -translation_of: Learn/CSS/Building_blocks/Selectors/Selectors_Tasks ---- -
{{LearnSidebar}}
- -
- -

Цель этой задачи — помочь вам проверить ваше понимание селекторов в CSS.

- -
-

Примечание: Вы можете проверять решения в интерактивном редакторе, расположенном ниже, но, возможно, вам будут полезны онлайн-инструменты, такие как  CodePen, jsFiddle или Glitch, которые можно использовать для работы над заданием, предварительно загрузив в них код.
-
- Если вы зашли в тупик, обратитесь к нам за помощью — смотрите раздел Оценка или дальнейшая помощь внизу этой страницы.

-
- -

Selectors One

- -

Without changing the HTML, use CSS to do the following things:

- - - -

Text with the CSS applied for the solution to task 1.

- -

Try updating the live code below to recreate the finished example:

- -

{{EmbedGHLiveSample("css-examples/learn/tasks/selectors/type.html", '100%', 700)}}

- -
-

For assessment or further work purposes, download the starting point for this task to work in your own editor or in an online editor.

-
- -

Selectors Two

- -

Without changing the HTML, make the following changes to the look of the content in this example:

- - - -

Text with the CSS applied for the solution to task 2.

- -

Try updating the live code below to recreate the finished example:

- -

{{EmbedGHLiveSample("css-examples/learn/tasks/selectors/class-id.html", '100%', 800)}}

- -
-

For assessment or further work purposes, download the starting point for this task to work in your own editor or in an online editor.

-
- -

Selectors Three

- -

In this example, try making the following changes without adding to the HTML.

- - - -

Text with the CSS applied for the solution to task 3.

- -

Try updating the live code below to recreate the finished example:

- -

{{EmbedGHLiveSample("css-examples/learn/tasks/selectors/pseudo.html", '100%', 800)}}

- -
-

For assessment or further work purposes, download the starting point for this task to work in your own editor or in an online editor.

-
- -

Selectors Four

- -

In this task try the following:

- - - -

Text with the CSS applied for the solution to task 4.

- -

Try updating the live code below to recreate the finished example:

- -

{{EmbedGHLiveSample("css-examples/learn/tasks/selectors/combinators.html", '100%', 800)}}

- -
-

For assessment or further work purposes, download the starting point for this task to work in your own editor or in an online editor.

-
- -

Selectors Five

- -

In this final task add CSS using attribute selectors to do the following:

- - - -

Four links with different color borders.

- -

Try updating the live code below to recreate the finished example:

- -

{{EmbedGHLiveSample("css-examples/learn/tasks/selectors/attribute-links.html", '100%', 800)}}

- -
-

For assessment or further work purposes, download the starting point for this task to work in your own editor or in an online editor.

-
- -

Assessment or further help

- -

You can practice these examples in the Interactive Editors mentioned above.

- -

If you would like your work assessed, or are stuck and want to ask for help:

- -
    -
  1. Put your work into an online shareable editor such as CodePen, jsFiddle, or Glitch. You can write the code yourself, or use the starting point files linked to in the above sections.
    2. -
  2. Write a post asking for assessment and/or help at the MDN Discourse forum Learning category. Your post should include: -
      -
    • A descriptive title such as "Assessment wanted for Selectors skill test 1".
      • -
    • Details of what you have already tried, and what you would like us to do, e.g. if you are stuck and need help, or want an assessment.
      • -
    • A link to the example you want to be assessed or need help with, in an online shareable editor (as mentioned in step 1 above). This is a good practice to get into — it's very hard to help someone with a coding problem if you can't see their code.
      • -
    • A link to the actual task or assessment page, so we can find the question you want help with.
      • -
    -
    3. -
-- cgit v1.2.3-54-g00ecf