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


Содержание

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

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

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

Классы CSS также могут использоваться с псевдоклассами:

Наиболее часто используемые CSS псевдоклассы:

Значение Описание
:link Класс открывавшейся ранее ссылки.
:visited Класс открытой ранее ссылки.
:hover Класс элемента, когда на него наведен курсор мыши.
:active Класс для активного элемента.
:focus Класс для элемента, который находится в фокусе.
:first-child Класс элемента, который является дочерним элементом другого.
:lang Класс, чтобы указать язык, применяемый для конкретного элемента.

При определении псевдоклассов CSS3 в блоке следует помнить:

  • a:hover должен располагаться после a:link и a:visited , иначе он не будет работать;
  • a:active должен располагаться после a:hover , иначе он не будет работать;
  • Имена псевдоклассов не чувствительны к регистру;
  • Псевдоклассы отличаются от классов CSS , но они могут быть объединены.

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

Этот код создает следующую черную ссылку:

Псевдокласс :visited

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

Этот код создает следующую ссылку. После того, как вы нажмете на нее, она изменит свой цвет на зеленый:

Псевдокласс :hover

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

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

Псевдокласс :active

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

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

Псевдокласс :focus

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

Этот код создает следующую ссылку. Когда эта ссылка находится в фокусе ввода, ее цвет меняется на оранжевый. Цвет возвращается обратно, когда ссылка находится вне фокуса:

Псевдокласс :first-child

Псевдокласс child задается указанному элементу, который является дочерним элементом другого.

Чтобы :first-child работал в IE должен объявляться в верхней части документа.

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

Этот код дает следующий результат:

Псевдокласс :lang

Псевдокласс :lang позволяет составлять селекторы для отдельных тегов на основе настроек языка.

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

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

надлежащим образом для каждого языка:

Селекторы :lang будут применяться ко всем элементам в документе. Но не все элементы используют свойство quotes , так что для большинства элементов эффект будет незаметен.

Этот код дает следующий результат:

Данная публикация представляет собой перевод статьи « CSS — Pseudo Classes » , подготовленной дружной командой проекта Интернет-технологии.ру

Псевдокласс :focus

Псевдокласс :focus определяет стиль элемента, когда он находится в фокусе.
Такими элементами могут быть теги готовые принимать ввод с клавиатуры и некоторым образом должны быть активны.

Небольшой пример использования:

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

Пример работы псевдо-класса :focus:

В данном примере кода используется поддержка кодировки UTF-8. Данная кодировка позволяет использовать в HTML русский текст.

:focus

Псевдокласс CSS :focus используется для придания определенных стилей элементам получившим фокус. Сфокусироваться на элементе можно разными способами, например, перейти к нему с помощью табуляции (клавиша Tab ) или навести курсор мыши и нажать правую или левую (зависит от элемента) кнопку. Далеко не все элементы в HTML могут получить фокус, но например это могут быть ссылки, текстовые поля или кнопки формы и т.д.

Тип псевдокласса

Применяется: к элементам с возможностью фокусировки — , , , ,

Значения

Синтаксис

Пример CSS: использование :focus

Результат. Использование псевдокласса CSS :focus.

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

CSS :: Псевдокласс :focus-within

Псевдокласс :focus-within (от англ. focus within – фокус внутри) позволяет выбрать элемент требуемого типа, когда он сам или его потомки получают фокус, например, form:focus-within <блок объявлений>. Псевдокласс может быть полезен для подсветки формы или ее частей, когда пользователь вводит данные в поля формы.

Селектор псевдоклассов напоминает селектор классов, но в отличие от классов, псевдоклассы в разметке html -документа не указываются и отделяются от указанного в селекторе элемента двоеточием ‘:’ . При этом выбираются элементы необходимого типа, которые соответствуют требованиям указанного в селекторе псевдокласса.

Псевдокласс :focus

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

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

Люди также смертны. Мы можем заболеть или пораниться, случаются и обе беды сразу. Иногда это на время, а иногда — на всю жизнь. Как бы то ни было, порой привычные способы добиться нужного или желаемого бывают нам недоступны.

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

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

Илон Маск рекомендует:  Что такое код setcommstate

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

Вспомните, когда вы в последний раз использовали функциональность «Вырезать», «Копировать», «Вставить» и «Сохранить». Возможно, во время работы с таблицей, например, с Excel? Вы переключались между мышкой и клавиатурой, чтобы работать эффективнее? Вероятно, вы делали это «на автомате», но это яркий пример переключения ввода на лету ради быстрого результата. Да чёрт возьми, может во время этого нудного занятия у вас ещё нашлось время, чтобы лайкнуть чью-либо запись в Facebook на смартфоне.

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

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

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

Если это интерактивно, этому нужен стиль фокуса

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

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

Главное, дать эту возможность всем независимо ни от чего.

Идентификация и активация

:focus

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

Они довольно просты. Хотите обвести ссылку оранжевым, когда пользователь переведет на неё фокус? Вот как это описать:

Этот контур появится, когда кто-то переместится к ссылке, будь то клик, касание сенсора, переход клавишей Tab с клавиатуры или ввод с помощью кнопки-переключателя, чтобы выделить её.

Есть популярное заблуждение, будто к стилям фокуса можно применить только свойство outline Отмечу, что :focus — это такой же селектор, как и любой другой, а значит, он принимает любые CSS-свойства. Я люблю играть с фоновым цветом, подчёркиванием и другими приемами, не влияющими на текущий размер компонента, чтобы не сдвигать раскладку страницы при активации селектора.

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

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

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

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

:focus-within

:focus-within — связанный с фокусом селектор псевдокласса, название которого, «фокус внутри», звучит очень по-дзенски — может применять стили к родительскому элементу, когда один из его дочерних элементов получает фокус.

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

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

Взгляды

У людей также есть мнения. К сожалению, порой эти мнения не подкреплены знаниями. Среди людей, не занимающихся доступностью, господствует мнение, что стили фокуса «безобразны», и многие дизайнеры и разработчики удаляют их ради внешнего лоска. А порой они даже не подозревают, что распространяют чужое мнение — многие CSS-сбросы включают глобальное удаление стилей фокуса, и включаются в проект в качестве фундаментальной зависимости, как что-то само собой разумеющееся.

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

:focus-visible

Правда жизни в том, что порой люди настаивают на удалении стилей фокуса, и у них бывает достаточно влияния, чтобы навязать это своему окружению. Это идет вразрез с правилами, что на действительно доступных сайтах механизмы фокуса должны быть видимыми. Эту проблему решает псевдоселектор :focus-visible .

Псевдокласс :focus-visible срабатывает, когда браузер определил, что произошло событие фокуса, и специальные встроенные эвристики подсказали ему, что имел место ввод без указателя. Или, если не такими мудрёными словами — он показывает стили для фокуса, если элемент активирован не курсором мыши и не пальцем на сенсоре.

На видеозаписи этого примера с Codepen видно, как в зависимости от того, каким способом пользователь выбирает ссылку, к ней применяются разные стили. При наведении и клике по ссылке мышью удаляется её подчёркивание, а сама она немного сдвигается вниз. При переходе к ней клавишей Tab с клавиатуры :focus-visible вместо этого применяет к ссылке яркий цвет фона.

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

Вы можете знать :focus-visible под другим названием :-moz-focusring . Так, в виде псевдоселектора с префиксом, эту же идею реализовала Mozilla, еще за семь лет до предложения :focus-visible . В отличие от других браузерных префиксов CSS, нам не придётся беспокоиться о поддержке авторасстановки префиксов! Firefox признает как объявление :focus-visible , так и :moz-focusring , гарантируя, что между двумя браузерами будет паритет для наших названий селекторов.

Илон Маск рекомендует:  Идентификаторы и классы

Шаг вперёд, шаг назад

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

Также стоит отметить, что теперь нет такого четкого противопоставления двух классов устройств по типу ввода, как было раньше. Флагманский компьютер Surface от Microsoft предлагает клавиатуру, трекпад, стилус, камеру, голос и сенсорную функциональность из коробки. Исследование использования скринридеров WebAIM в 2020 г. показало, что мобильные устройства могут дополняться клавиатурным вводом чаще чем вы думаете. Эвристика — это хорошо, но как и аналитика, она не даёт полной картины.


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

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

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

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

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

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

Вот список всех псевдоклассов:

  • hover — Стиль элемента на который наведён курсор мыши.
  • active — Стиль для ссылки которая становится активной, но переход по ней еще не совершен.
  • visited — Стиль для недавно посещённой ссылки.
  • link — Стиль для нечасто посещаемой ссылки.
  • focus — Стиль элемента находящегося в фокусе.
  • first-child — Стиль первого дочернего элемента.
  • lang — Определяет язык, который используется в фрагменте документа.

О каждом псевдоклассе мы отдельно поговорим ниже, а сейчас пару слов о синтаксисе.

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

a — элемент (селектор), а проще тег к которому мы решили применить псевдокласс в нашем случае это ссылка.
:hover — после двоеточия собственно нужный нам псевдокласс.
— ну и блок объявления стилей в фигурных скобках.

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

Так собственно мы подошли к первому, самому популярному, псевдоклассу hover.

Псевдокласс hover.

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

Ну а раз уж догадались просто покажу пример:

Чем Вам не блок навигации по сайту?

А вот ещё один распространенный трюк.. строки в таблице подсвечиваются при наведении на них курсором.

Псевдокласс :focus

Мне очень понравилась Пашина статья о псевдоклассах. =) Специально по такому случаю в закромах была недавняя заметка с 456bereastreet.

В ней рассказывается о том, что может повлечь за собой игнорирование псевдокласса :focus.

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

Качественная разработка сайта любой сложности.
Компания ltd-studio.

Реализация правил для псевдокласса :hover без реализации :focus является наиболее частым недосмотром при проектировании стиля сайта. Серьезность проблем при таком недосмотре зависит от того, как вы определили поведение для состояния :hover.

Рассмотрим их в порядке возрастания серьезности.

1. Неряшливость

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

2. Серьезные проблемы использования

Гораздо больше проблем вы получите, если зададите свойство outline равным 0 или значению none. Эта проблема сейчас набирает актуальность, т.к. сведение на нет эффекта outline довольно популярно.

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

3. Полная недосягаемость

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

Фокус на :focus (и :active)

Все перечисленные проблемы решаются довольно просто: там же, где вы определяете правила для :hover, укажите и :focus. Для того, чтобы Internet Explorer версий 7 и ранее распознал правила, надо дописать псевдокласс :active.

Пара слов о порядке перечисления псевдоклассов объявлении

Этот параграф — отдельная заметка. Все желающие могут ознакомиться с оригиналом статьи.

Для многих известно, что порядок объявления псевдоклассов правиле CSS имеет значение. На 456bereastreet предпочитают следующий порядок:

Этот порядок основан на нескольких статьях Эрика Мейера. Одна из них содержит довольно забавные мнемоники, я привожу их ниже на языке оригинала:

  • LoVe’s Hurts Fade Away;
  • Luther Vandross Hits Fabulous Arpeggios;
  • Lord Vader Hates Furry Animals;
  • Lusty Vampires Hunger For Absinthe;
  • Lord Voldemort Has Foul Ambitions.

Небольшое лирическое

Если кто-то думает: «Э. а как же модульные сетки, все дела, Марк Болтон и все такое». Сетки — будут позже. Болтон. при всем к нему уважении, такое огромное количество воды мне попросту надоело переводить. Будет время, переведу. Прошу прощения за то, что не довел до конца. Но там уже какая-то художественная литература, так что сюда ее выкладывать нет никакого смысла. В ближайшем рассмотрении весь этот цикл был всего лишь рекламой его книги с одноименным названием. К сожалению, это западный мир. Бесплатно дают только стакан воды.

Автор: Дмитрий Копров

Музыкант, который однажды проснулся программистом ;-) Фронт- и бэк-энд разработчик, специалист широкого профиля. Твиттер: @dkoprov.

Расскажите друзьям

Комментарии — 25

Так вот, по сути — это одно и то же: что такое активное состояние элемента? Это то состояние, при котором он имет фокус! # 20 апреля 2010 BEKTOP BEKTOP,
это вопрос из разряда «почему Microsoft вечно идет своим особенным непонятным путем?» Этот псевдокласс — один из шагов этого пути.

Илон Маск рекомендует:  Как кнопку сделать ссылкой

>Так вот, по сути — это одно и то же: что такое активное состояние элемента? Это то состояние, при котором он имет фокус!

Да, так и есть. Поэтому и назвали его более логично «focus». Это название устоялось в обозначении состояний. И в той же java для такого состояния есть только focus. # 20 апреля 2010 spike spike, но ведь все остальные браузеры тоже поддерживают :active.

А насчет Микрософта — это конечно да, но в последнее время я стал задаваться другим вопросом: почему W3C всё время пытается сделать не как у Микрософта :о) Я не хочу тут разводить холиваров и вообще поклонником МС не являюсь, но есть примеры: 1) VML и SVG — насколько я помню, идея xml-языка для векторной графики появилась раньше обеих реализаций, но первой реализацией была именно VML; 2) пока писал первый пункт, забыл второй :о) Ну, неважно. # 20 апреля 2010 BEKTOP BEKTOP,
конечно, поддерживают. Потому что многие веб-мастера использовали и используют только :active. Разрабы «других» браузеров заботятся о пользователях, а не только о политике п..корпорации.

В остальном правда получается холивар. Будем придерживаться каждый своего мнения и. не будем забывать об :active и :focus =) # 20 апреля 2010 spike ВЕКТОР,

Причем, сейчас посмотрел на w3schools.com Ребята крайне хреново объяснили смысл этих классов. =/ # 20 апреля 2010 spike
Хотя нет, я не прав.

:active — это именно момент нажатия. То есть когда кнопка именно нажата и еще не отпущена. А фокус — либо побочный эффект нажатия на ссылку (когда она якорь), либо эффект перемещения фокуса ввода клавиатурой.
А в статье этот псевдокласс упоминается, потому что IE версий ниже 7, воспринимали :active, так же, как и :focus. При этом ничего не подозревая о самом :focus. =) # 20 апреля 2010 spike Статья хорошая, главное, что информации море и написана она кратко и ясно! Спасибо за статью! # 27 апреля 2010 darya :fucus — это для элементов форм!
помоиму вы что-то путаете. # 3 июня 2010 webluck Давайте представим:
Вы наслаждаетесь утренним кофе, вам лень брать мышку и тянутся к ссылке.
Воспользуемся табом?

В этом случае при каждом нажатии вас будет перебрасывать на следующую ссылку. При этом стиль ссылки будет отбираться из «:focus» элемента. Тоже самое при нажатии и удерживании элемента.

Не у всех есть возможность кликать ссылки мышкой. Не лишайте их возможности «прыгать» по сайту табом. Будьте милосердны. # 3 октября 2010 Q`Relly Q`Relly,

Псевдоклассы CSS :focus, :hover и :active

Если вы работали с CSS, то знаете, что стили применяются к селекторам, которые, в свою очередь, являются HTML-элементами. Но не всегда. Существует фантомная категория классов, которая возникает только в определенных состояниях объекта. Например, нажатая кнопка или выбранное поле ввода. Для таких особых случаев существуют псевдоклассы CSS :focus, :hover, :active.

Динамические псевдоклассы

CSS определяет три динамических псевдокласса, :focus, :hover, :active. Они меняют внешний вид объекта при определенных действиях пользователя. Это означает что для их появления нужно обязательное условие:

В этом примере, пока пользователь не наведет курсор мышки на элемент с классом button, записанные в :hover стили никак не проявятся.

Традиционно псевдоклассы используют для обработки ссылок и кнопок. Но диапазон возможностей гораздо шире. В CSS :focus ссылается на объект веб-страницы, которому принадлежит фокус ввода. Чаще всего это поля форм регистрации и поиска.

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

Возможности применения псевдоклассов

Стили для :active, :focus, :hover — это своеобразный способ общения с пользователем. Так вы подсказываете куда вводить данные, подчеркивает ссылки, выделяете элементы по которым можно нажать. С помощью удачных эффектов вы мотивируете посетителя ввести адрес электронной почты и подписаться на вашу рассылку. Благодаря красивым кнопкам «Войти!», «Читать дальше!» у тех, кто случайно попал на страницу, возникнет желание путешествовать по сайту дальше.

Но не применяйте псевдоклассы слишком усердно. Если вы добавите :hover почти ко всем элементам, у посетителей вашего сайта может начаться морская болезнь от массы увеличивающихся или мигающих объектов. Применяйте CSS псевдо-класс focus для изменения цвета рамки полей, не более. Лучший способ грамотно назначить :hover — это сделать цвет шрифта темнее при наведении мышки. Но не трогайте размер — от этого могут пострадать соседние элементы.

CSS псевдокласс: фокус после нажатия кнопки

Я работал с некоторой базовой анимацией CSS для button . Проблема заключается в том, что псевдо-класс :focus работает даже при нажатии вкладки на клавиатуре. Поэтому я хочу, чтобы :focus работал только тогда, когда я нажимаю кнопку i.e только тогда, когда активен.

В приведенном выше коде кнопка изменяется на green при нажатии вкладки, которую я хочу избежать. Там есть чистое решение CSS.

используйте кнопку tabIndex=»-1″ on, если вы не хотите, чтобы кнопка фокусировалась при нажатии вкладки

Если кнопка активна, она всегда будет сфокусирована в одно и то же время.

Итак, просто представьте правило :active и не предоставляйте правило :focus вообще.

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

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

Это, к сожалению, не тот ответ, который вы ищете, поскольку он включает JavaScript, но это решение, которое вы хотите достичь.

Чтобы избежать выбора ваших кнопок с помощью клавиши табуляции в начале, вы можете попытаться избежать использования элемента button и вместо этого воспроизвести одно и то же поведение с помощью div с tabindex .

Используйте tabindex = «-1» специально, чтобы избежать переключения с помощью клавиши вкладок.

Обратитесь к коду:

МОЙ ОТВЕТ ОТЛИЧАЕТСЯ ОТ ДРУГИХ.

Вы можете установить зеленый фон временно. Это то, что вы хотите?

Посмотрите другие вопросы по меткам html css html5 css3 или Задайте вопрос

Справочник по CSS : Тематический указатель : Селекторы : Псевдоклассы : :focus

Материал из WebWikiABCD

Содержание

Псевдокласс :focus

Задает стиль элемента, получающего фокус.

Синтаксис

HTML :focus
Скрипты N/A

Используемые значения

Замечания

На web-странице элемент должен получить фокус ввода от пользователя, чтобы он стал активным и мог выполнять различные задачи. Например, пользователь должен передать фокус ввода ссылке, чтобы перейти по ней. Или передать фокус ввода объекту TEXTAREA, чтобы ввести в него текст.

Существует несколько способов передать фокус элементу:

  • С помощью устройства ввода. Даже элементы типа div или, например, body можно выделить с помощью мыши.
  • С помощью комбинаций клавиш TAB и Shift+TAB.
  • C помощью клавиатурных сокращений (смотрите свойство accelerator).

Примеры

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

Понравилась статья? Поделиться с друзьями:
Кодинг, CSS и SQL