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

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

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

Синтаксис использования псевдоэлементов следующий.

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

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

Далее перечислены все псевдоэлементы, их описание и свойства.

:after

Пример 16.1. Применение :after

HTML5 CSS 2.1 IE 7 IE 8+ Cr Op Sa Fx

Результат примера показан на рис. 16.1.

Рис. 16.1. Добавление текста к абзацу с помощью :after

:before

Пример 16.2. Использование :before

HTML5 CSS 2.1 IE 7 IE 8+ Cr Op Sa Fx 4

Результат примера показан ниже (рис. 16.2).

Рис. 16.2. Изменение вида маркеров с помощью :before

И :after и :before дают результат только для тех элементов, у которых имеется содержимое, поэтому добавление к селектору img или input ничего не выведет.

:first-letter

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

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

Рассмотрим пример создания выступающего инициала. Для этого требуется добавить к селектору P псевдоэлемент :first-letter и установить желаемый стиль инициала. В частности, увеличить размер текста и поменять цвет текста (пример 16.3).

Пример 16.3. Использование :first-letter

HTML5 CSS 2.1 IE Cr Op Sa Fx

Результат примера показан ниже (рис. 16.3).

Рис. 16.3. Создание выступающего инициала

В данном примере изменяется шрифт, размер и цвет первой буквы каждого абзаца текста.

:first-line

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

В примере 16.4 показано использование псевдоэлемента :first-line применительно к абзацу текста.

Пример 16.4. Выделение первой строки текста

HTML5 CSS 2.1 IE Cr Op Sa Fx

Результат примера показан на рис. 16.4.

Рис. 16.4. Результат применения псевдоэлемента :first-line

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

Вопросы для проверки

1. Какой псевдоэлемент позволяет добавить текст в начало предложения?

2. Что делает следующий стиль?

OL LI:first-letter <
color: red;
>

3. Какой селектор написан с ошибкой?

Ответы

2. Изменяет цвет первой буквы элемента нумерованного списка.

Источник

CSS before, after и другие псевдоэлементы

В этой статье разберём after, before и другие CSS псевдоэлементы. Рассмотрим их назначение и примеры их использования на сайте.

Что такое псевдоэлемент и его назначение

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

Обратите внимание, что псевдоэлементы не добавляются в DOM. Поэтому получить псевдоэлемент с помощью JavaScript и с использованием библиотеки jQuery нельзя.

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

CSS псевдоэлемент first-letter

Псевдоэлемент first-letter предназначен для задания стилей первому символу в тексте блочного элемента, но только в том случае если перед этим символом нет другого контента (изображения, inline таблицы).

К этому псевдоэлементу могут применяться только ограниченный набор CSS свойств. К ним относятся свойства, имеющие отношения к цвету, фону, границам, свойствам шрифта, полям padding и margin.

CSS3 синтаксис first-letter :

Если с помощью псевдоэлемента before и CSS-свойства content добавить некоторый текст к элементу, то в этом случае first-letter применит заданные стили к первому символу этого текста.

CSS псевдоэлемент first-line

Псевдоэлемент first-line предназначен для оформления первой строки форматированного текста элемента с блочным отображением.

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

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

CSS псевдоэлемент before

Псевдоэлемент before не наследует стили. Поэтому если необходимо чтобы у него были стили как у родительского элемента, то ему необходимо их явно прописывать.

CSS псевдоэлемент after

Примеры использования псевдоэлементов after и before

1. Применение CSS псевдоэлементов after и before для оформления цитаты.

HTML разметка цитаты:

CSS код для оформления цитаты:

2. Пример использования псевдоэлемента before для разделения элементов в хлебных крошках.

HTML структура хлебных крошек:

CSS код хлебных крошек:

Изображние хлебных крошек:

3. Пример добавления hover эффекта к ссылке, оформленной с помощью background картинки, с использованием псевдоэлементов after и before.

CSS код с использованием after и before:

HTML разметка этого примера:

CSS псевдоэлемент selection

Псевдоэлемент selection предназначен для установления стилей к выделенному пользователем фрагмента текста.

Пример, в котором зададим стили для оформления выделенного пользователем фрагмента текста:

Источник

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

) — дочерние элементы подобраны по формуле вида an+b (например, 2n + 1 будет соответствовать элементам 1, 3, 5, 7 и т. д. Все нечётные числа.) :nth-last-childСоответствует элементам из списка дочерних элементов одного предка, считая в обратном порядке от конца. Дочерние элементы подобраны по формуле вида an+b (например, 2n + 1 будет соответствовать последнему элементу в последовательности, затем на два элемента до него, затем ещё на два элемента назад и т. д. Все нечётные, считая с конца.) :nth-last-of-typeСоответствует элементам из списка дочерних элементов одного предка, имеющим определённый тип (например, элементы

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

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

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

Источник

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

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

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

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

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

Псевдоэлементы ::first-letter и ::first-line

В современном стандарте CSS 3 используются 5 (пять) основных псевдоэлементов, которые добавляются к селекторам и имеют следующий синтаксис:

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

Первыми псевдоэлементами, которые мы рассмотрим будут ::first-letter и ::first-line. Псевдоэлемент ::first-letter позволяет создавать инициал (буквицу) — начальный символ текстового блока. Такой метод часто можно встретить в печатных изданиях, например, в сказках.

Псевдоэлемент ::first-line позволяет стилизовать первую строку абзаца, которая будет отличаться от основного текста. Данный псевдоэлемент дает более широкие возможности для оформления текста.

Давайте рассмотрим пример их использования:

Источник

Исчерпывающее руководство по псевдоэлементам и псевдоклассам в CSS

May 8, 2016 · 19 min read

Hola a todos! Всем привет! Будучи молодым веб-дизайнером я был вынужден учиться методом проб и ошибок. Тогда не было Smashing Magazine, Can I Use, CodePen или каких-то других замечательнх штук, доступных нам сегодня. Найти кого-то, кто мог бы показать фишки веба, особенно что касалось CSS, было невероятно полезно.

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

Если вы опытный веб-дизайн е р или разработчик, то вы наверняка знаете и используете большую часть ПК и ПЭ, описанных в статье. Тем не менее, вы можете пробежаться по списку. Наверняка найдутся один или два пункта, о которых вы раньше не знали.

Перед тем как перейти к сути, и потому что это непосредственно относится к ПК и ПЭ, давайте начнем с основ: вы когда-нибудь задумывались что значит “псевдо”? Если так, то вот определение с Dictionary.com:

1. то, что подразумевается, но не имеется на самом деле; делать вид; ложный или поддельный; фиктивный.

2. почти, приближенное, или пытающееся быть.

Не вдаваясь в технические подробности определения, данного консорциумом W3C, в основе псевдокласса лежит фантомное состояние элемента или его специфичная характеристика, управляемая через CSS. Несколько распространенных примеров псевдоклассов :link, :hover, :active, :first-child и :nth-child. На самом деле их гораздо больше и мы рассмотрим их чуть позже.

Кроме того ПК всегда начинаются с двоеточия (:). Затем идет имя ПК и иногда значение в скобках. Знакомы с :nth-child?

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

Примеры ПЭ :after, :before и :first-letter. Мы вспомним о них ближе к концу этой статьи.

Одинарное или двойное двоеточие для ПЭ?

Короткий ответ — в большинстве случаев подойдут оба написания.

Двойное двоеточие (::) было представлено в CSS3 для дифференциации таких псевдоэлементов, как ::before и ::after от псевдоклассов, например :hover и :active. Двойное двоеточие поддерживают большинство браузеров, включая Internet Explorer (IE) 8 и ниже.

Хотя некоторые ПЭ, такие как ::backdrop, требуют только двойного двоеточия.

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

Вы в праве использовать оба варианта. В этом вопросе действительно нет однозначно правильного или неправильного ответа.

Тем не менее спецификация на момент написания этой статьи рекомендует использовать именно одиночное двоеточие по упомянутой выше причине обратной совместимости:

Пожалуйста, обратите внимание что в CSS3 новый способ написания ПЭ предусматривает двойное двоеточие, например a::after <…>, для визуального отделения от ПК. Вы могли видеть такое написание в CSS. CSS3 тем не менее все еще поддерживает одиночное двоеточие ради обратной совместимости. И мы рекомендуем вам придерживаться подобного написания еще какое-то время.

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

Когда (не) использовать CSS сгенерированное содержимое

Создание контента с помощью CSS достигается путем объединения свойства content и ПЭ :before или :after.

Этот “контент” может быть простым текстом или контейнером, которыми мы можем манипулировать при помощи CSS для отображения графических форм или декоративных элементов. Дальше я буду говорить о первом типе такого контента — тексте.

Сгенерированный контент не должен использоваться для важной информации или текста по следующим причинам:

Используйте сгенерированный контент в декоративных целях или для не особо важной информации. Но убедитесь что он правильно распознается программами чтения с экрана. Перед использованием этого инструмента “думайте прогрессивно”.

На Smashing Magazine есть великолепная статья об использовании сгенерированного контента CSS.

Экспериментальные псевдоклассы и псевдоэлементы

ПК или ПЭ считаются экспериментальными пока их спецификация не стабильна или не является финальной. Синтаксис и поведение могут изменится по ходу пьесы.

В этой статье вы увидите пометку “экспериментальный” рядом с такими ПК или именами ПЭ.

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

Мы начнем обсуждение с псевдоклассов, имеющих отношение к определенным состояниям.

ПК состояний обычно вступают в игру, когда пользователь выполняет определенное действие. “Действие” в CSS может так же означать “отсутствие действия”, например в случае со ссылками, по которым еще не было переходов.

Давайте рассмотрим их по порядку.

:link это ПК, отвечающий за “нормальное” состояние ссылки и используется для выбора ссылок, которые еще не были посещены. Объявление :link перед всеми остальными ПК крайне желательно. Порядок всех четырех следующий :link, :visited, :hover, :active.

Его так же можно опустить и писать так:

:visited

:visited используется для стилей ссылок, по которым был переход. Позиция ПК :visited вторая по счету (после :link).

:hover

:hover используется для стилизации элементов, когда курсор пользователя находится над ними. Сфера использования этого ПК не ограничивается ссылками, хотя именно для них чаще всего применяется.

Этот ПК должен идти третьим в списке (после :visited).

:active

ПК :active используется для элементов, которые были “активированы” при помощи курсора или касанием для сенсорных устройств. Так же может сработать от нажатия клавиш на клавиатуре, так же как и :focus.

Работа этого ПК очень похожа на :focus, разница в том, что :active — событие, происходящее между моментом когда клавиша мыши была нажата и до момента, когда она была отпущена.

Этот ПК должен идти четвертым (после :hover).

:focus

ПК :focus используется для стилизации элементов, которые получили фокус при помощи курсора, тапа на тачскрине или при помощи клавиатуры. Часто используется для элементов формы.

Бонус: SASS миксины для ссылок

Если вы работаете с препроцессорами CSS, такими как SASS, этот бонус будет вам интересен.

Для оптимизации работы вы можете использовать миксины SASS для создания базового набора ссылок.

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

:focus и :active ПК обычно пишутся вместе. Не стесняйтесь разделять их если вам угодно.

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

Структурные псевдоклассы нацелены на создание дополнительной информации в дереве документа или DOM и не могут быть представлены другими типами комбинаторов или селекторов.

:first-child

:first-child представляет первого ребенка родительского блока.
В примере ниже только первый элемент li будет с текстом оранжевого цвета.

:first-of-type

:first-of-type выбирает первый элемент указанного типа в родительском контейнере.

В следующем примере первый элемент li и первый span будут с текстом оранжевого цвета.

:last-child

:last-child ПК выбирает последнего ребенка в родительском элементе.

В примере последний элемент li будет с оранжевым цветом.

:last-of-type

:last-of-type выбирает последний элемент указанного типа в родительском контейнере.

В примере оранжевый текст будет только у последних элементов li и span.

ПК :not так же известен как негативный псевдокласс. Он принимает аргумент — обычно другой “селектор” — в круглых скобках. Аргументом на самом деле может быть другой псевдокласс.

Он может быть составным, но не может содержать еще один:not селектор.

В следующем примере :not ПК совпадает с элементом, не представленным аргументом.

:nth-child

ПК :nth-child выбирает один или более элементов в зависимости от их позиции в разметке.

Этот ПК является одним из самых универсальных и мощных вCSS.

Все :nth ПК принимают аргументы, которые представлены формулой в круглых скобках. Формула может быть одним числом, формулой со структурой an+b или словами odd(нечетный)/ even(четный).

В формулах типа an+b:

Используем греческий алфавит. Ниже есть несколько примеров, использующих одну HTML структуру:

Давайте выберем второго ребенка. В этом случае только “Beta” будет оранжевой:

Теперь выберем других детей, начиная со второго ребенка. И так, “Beta,” “Delta,” “Zeta,” “Theta” и “Kappa” будут оранжевыми:

Выберем все четные дочерние элементы в списке:

Давайте выберем каждого второго ребенка начиная с шестого. “Zeta,” “Theta” и “Kappa” будут оранжевыми:

:nth-last-child

ПК :nth-last-child в основном работает так же как :nth-child за исключением того, что выбор элементов начинается с конца, а не с начала.

Выбираем второго с конца ребенка. “Iota” будет оранжевой:

Теперь выбираем все другие дочерние элементы начиная со второго с конца. “Iota,” “Eta,” “Epsilon,” “Gamma” и “Alpha” будут оранжевыми:

Раскрасим все четные элементы начиная с конца:

Теперь раскрасим всех детей начиная с шестого с конца. “Epsilon,” “Gamma” и “Alpha” будут оранжевыми:

:nth-of-type

:nth-of-type в целом работает так же как :nth-child, главным отличием является то, что он более специфичный поскольку мы обращаемся к определенному элементу и его отношениям к другим элементам, вложенным в родительский блок.

В следующем примере все вторые параграфы в любых родительских контейнерах будут оранжевыми:

:nth-last-of-type

:nth-last-of-type работает так же как :nth-of-type, разница в том, что отсчет начинается с конца.

Пример ниже мы начинаем отсчет снизу и все первые параграфы поменяют цвет текста на оранжевый:

Обратитесь к этим двум ресурсам при работе с :nth ПК:

:only-child

ПК :only-child выбирает единственный дочерний элемент в родителе.

В примере первый элемент ul имеет единственного ребенка, которому будет назначен оранжевый цвет текста. Второй элемент ul содержит несколько детей. Таким образом на них не повлияет правило ПК :only-child.

:only-of-type

ПК :only-of-type нацелен на элемент, который не имеет братьев этого конкретного типа. Это похоже на :only-child за исключением того, что мы можем нацелится на конкретный элемент, сделав селектор более специфичным.

В примере первый ul имеет единственного ребенка, которому будет назначен оранжевый текст.

:target

:target ПК… что ж, он выбирает уникальный ID элемента и помещает его в URL.

Пример: статья с уникальным ID будет иметь желтый фон если URL страницы заканчивается на #target.

Совет: Вы можете использовать шорткат background: вместо background-color: — результат будет одинаковым.

Формы всегда были бичом веб-дизайна и разработки. При помощи ПК валидации мы можем сделать процесс заполнения формы более “гладким” и приятным в плане опыта пользователя.

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

Давайте проверим на деле!

:checked

ПК :checked управляет радио-кнопками, чекбоксами и элементами option, которые были выбраны.

Пример: когда чекбокс “активирован” (выбран) подпись становится выделенной, улучшая тем самым удобство использования.

:default

ПК :default нацелен на элемент по умолчанию в форме среди группы сходных элементов.

В случае, если вам нужно назначить кнопку по умолчанию в форме, но элемент не имеет класса, то вы можете воспользоваться псевдоклассом :default.

Обратите внимание, что кнопки “Reset” или “Clear” в формах сопровождаются серьезными проблемами с юзабилити. Используйте их только там, где без этого совершенно невозможно обойтись. В следующих статьях этот вопрос освещен более подробно:

:disabled

:disabled работает с элементами форм в их отключенном состоянии. “Задизейбленный” (отключенный) элемент не может быть выбран, с ним нельзя взаимодействовать или активировать его, он не может получить фокус.

Пример: поле ввода имени отключено, поэтому оно отображается прозрачным на 50%.

Совет: Использовать disabled=”disabled” в разметке не требуется. Вы получите тот же результат используя только логический атрибут dasabled. Однако стоит помнить, что использование disabled=”disabled” обязательно в XHTML.

:empty

ПК :empty нацелен на элементы, которые не содержат в себе контент любого рода. Если элемент содержит букву (текст), другой html-элемент или даже пробел, то этот элемент не считается пустым.

Вот определение “пустого” и “не пустого”:

:enabled

:enabled выбирает включенные (активные для взаимодействия) элементы. Все элементы формы активны по умолчанию — утверждение верно до тех пор, пока мы не используем disabled атрибут в разметке.

Мы можем использовать комбинацию :enabled и :disabled для обеспечения визуальной обратной связи, тем самым улучшив UX.

Пример: поле ввода имени было выключено, но затем мы его активируем. У него появится зеленая обводка в 1px и его видимость (opacity) изменится на 1:

Совет: Использовать enabled=”enabled” в разметке не обязательно. Тот же результат достигается при помощи логического атрибута enabled у html-элемента. Однако помните, что enabled=”enabled” необходимо в XHTML.

:in-range

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

Пример: элемент ввода поддерживает диапазон от 5 до 10. Значения в этом диапазоне активируют зеленую обводку.

:out-of-range

:out-of-range работает с элементами, которые имеют диапазон значений и значения которого выходят за пределы этого диапазона.

Пример: элемент ввода поддерживает диапазон значений от 1 до 12. Значения вне этого диапазона будут подсвечены оранжевой обводкой.

:indeterminate

:indeterminate ПК нацелен на элементы ввода (радио-кнопки и чекбоксы), которые не были выбраны или не выбраны при загрузке страницы.

Примером является ситуация когда страница загружается с группой радио-кнопок и среди них нет выбранного по умолчанию пункта или когда JavaScript установил флажок “неопределенное состояние”.

:valid

ПК :valid нацелен на элемент формы, который заполнен в соответствии с форматированием этого элемента.

Пример: поле ввода электронной почты заполнено в соответствии с установленным форматированием. Таким образом поле будет считаться валидным и будет отображаться с зеленой рамкой в 1px:

:invalid

ПК :invalid работает с элементами формы, чье форматирование не совпадает с требуемым.

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

:optional

:optional предназначен для полей ввода, которые не являются обязательными. Другими словами до тех пор, пока поле не имеет атрибута required, оно будет подчиняться ПК :optional.

Пример: поле является опциональным (необязательным). У него нет атрибута required, поэтому текст будет серым.

:read-only

ПК :read-only нацелен на нередактируемый элемент. Поведение похоже на :disabled. Наличие атрибута в разметке поможет решить, какой из псевдоклассов следует использовать.

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

Пример: у элемента формы в html указан атрибут readonly. Поэтому для него сработают правила псевдокласса :read-only и текст будет серым.

:read-write

:read-write ПК выбирает элементы, которые могут быть отредактированы пользователем. Сработает так же как если бы у элемента был атрибут contenteditable в html.

Этот псевдокласс можно сочетать с :focus для улучшения UX в определенных ситуациях.

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

:required

:required работает с элементами, которые имеют атрибут required в html-разметке.

В дополнение к обычной “звездочке” (астериску — *) возле подписи к полю ввода, показывающей обязательность его заполнения, мы можем визуально выделить поле при помощи CSS. Фактически мы получаем лучшее из двух миров.

Пример: у поля есть атрибут required. Улучшаем UX, применяя определенный стиль, который дает сигнал, что поле обязательное.

:scope (эксперимент)

Псевдокласс :scope имеет наибольший смысл, когда он связан с html-атрибутом scoped у тега style.

Если атрибута scoped нет у тега style внутри страницы, то :scope будет применен к элементу html, который является дефолтным (по умолчанию) в таблице стилей.

Пример: html-блок имеет таблицу стилей с атрибутом scoped и поэтому весь текст внутри второго блока будет написан курсивом.

Языковые псевдоклассы связаны с текстом, содержащимся на странице. Они не управляют никакими медиа-элементами, такими как изображения или видео.

:dir (эксперимент)

ПК :dir нацелен на элемент, направление которого указывается в документе. Другими словами для того чтобы ПК :dir работал в разметке у соответствующего html-элемента должен быть установлен атрибут dir.

В настоящий момент доступны два значения для направления: ltr (слева направо) и rtl (справа налево).

Заметка: Объединение в одном правиле версии с префиксом и без работать не будет. Нужно создать два отдельных правила.

Пример: параграф написан на арабском языке (направление текста справа налево). Текст будет оранжевого цвета.

Параграф ниже написан на английском (слева направо). Текст будет синим.

ПК :lang соответствует языку элемента, который определен комбинацией атрибута lang=””, определенного meta элемента и информации из заголовка полученного по протоколу HTTP.

Html-атрибут lang=”” обычно используется в теге html, но так же может быть и у другого тега, если это необходимо.

В сопроводительном примечании написано, что считается хорошим тоном указывать в CSS-свойстве quotes какие кавычки должны быть установлены в документе. Тем не менее большинство браузеров (включая IE9 и выше) способны добавлять правильные кавычки автоматически, если они не объявлены явно в CSS.

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

Пример: кавычки в немецком (de), установленные браузером, выглядят следующим образом:

Тем не менее в большинстве примеров, найденых в сети, кавычки установлены при помощи CSS и выглядят так (что соответствует правильному варианту в немецком языке):

Оба варианта фактически верны. Поэтому вы должны решить для себя позволить ли браузеру автоматически ставить кавычки или добавить их самостоятельно при помощи псевдоэлемента :lang и css-свойства quotes.

Источник

• ← Что такое сипи фонд
• Что такое дуоденит в гастроэнтерологии →