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

Этот перевод не завершён. Пожалуйста, помогите перевести эту статью с английского

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

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

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

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

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

:pseudo-class-name

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

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

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

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

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

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

  • :hover — это применимо только в том случае, если пользователь перемещает указатель мыши на элемент, обычно на ссылку.
  • :focus — применяется только в том случае, если пользователь фокусирует элемент с помощью клавиш управления.

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

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

::pseudo-element-name

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Селектор Описание
::after Соответствует стилизуемому элементу, появляющемуся после фактического содержимого исходного элемента.
::before Соответствует стилизуемому элементу, появляющемуся перед фактическим содержимым исходного элемента.
::first-letter Соответствует первой букве элемента.
::first-line Соответствует первой строке содержащего элемента.
::grammar-error Соответствует части документа, содержащей грамматическую ошибку, отмеченную браузером.
::selection Соответствует той части документа, которая была выбрана.
::spelling-error Соответствует части документа, содержащей орфографическую ошибку, отмеченную браузером.

In this module

  1. Cascade and inheritance
  2. CSS selectors
  3. The box model
  4. Backgrounds and borders
  5. Handling different text directions
  6. Overflowing content
  7. Values and units
  8. Sizing items in CSS
  9. Images, media, and form elements
  10. Styling tables
  11. Debugging CSS
  12. Organizing your CSS