Css active focus hover: Стилизуйте состояния hover, focus и active по-разному | by Uriy

Содержание

Стилизуйте состояния hover, focus и active по-разному | by Uriy

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

// Not the best approach. I'll explain why in this article
.selector {
&:hover,
&:focus,
&:active {
// Styles here
}
}

Как только я начал уделять больше внимания доступности (и как следствие уделять больше внимания состоянию focus), я начал понимать, что мы не должны стилизовать состояния hover, focus и active одинаковым образом.

Состояния hover, focus и active не должны быть стилизованы одинаково.

Вот простая причина для этого: это разные состояния!

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

Давайте начнем с hover.

Состояние hover инициируется, когда пользователь наводит свою мышь на элемент.

Состояние hover обычно представлено изменениями background-color (и\или color). Разница стилей между состоянием hover и его отсутствием не обязательно должна быть ярко выраженная, потому что пользователь уже знает, что он навел мышку на что-то.

button {
background-color: #dedede;
}button:hover {
background-color: #aaa;
}

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

  1. Когда пользователь переключается с помощью кнопки tab между элементами
  2. Когда пользователь кликает на элемент, который поддерживает состояние focus

Следующие элементы поддерживают состояние focus:

  • Ссылки (<a>)
  • Кнопки (<button>)
  • Элементы формы (input, textarea, и тому подобное)
  • Элементы со свойством tabindex

Пара важных моментов:

  1. Пользователь не может переключиться с помощью кнопки tab на элемент со свойством tabindex=”-1", но он может кликнуть на него, тем самым переключив элемент в состояние focus
  2. В браузерах Safari и Firefox (на Mac) клик на элемент button не вызывает состояние фокусировки. Подробнее по этой ссылке https://zellwk.com/blog/inconsistent-button-behavior/
  3. Когда вы нажимаете на элемент <a>, фокус остается на <a> до тех пора, пока вы не уберете палец с мыши. Когда вы все же уберете палец, фокус будет смещен в другой элемент, если атрибут href указывает валидный id элемента на вашей странице.

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

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

Использование стилизации по умолчанию состояния focus в большинстве случаев достаточно. Если же вы хотите сделать свой собственный дизайн для состояния focus, то подумайте о следующих вещах:

  1. Использование css свойства outline.
  2. Создание анимации с движением.
  3. Изменение css свойства background-color.
  4. Изменение css свойства color.

Так как зачастую css свойства background-color и color используются для состояния hover, то имеет смысл использовать css свойство outline или анимации для состояния focus.

Вы можете комбинировать свойства outline, border и box-shadow, чтобы создать хорошо выглядящие стили для focus. Я писал об этом в статье “Создание своих стилей для focus” https://zellwk.com/blog/creating-focus-style/

button {
background-color: #dedede;
}button:hover {
background-color: #aaa;
}button:focus {
outline: none;
box-shadow: 0 0 0 3px lightskyblue;
}

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

Обратная связь так же полезна на веб-сайтах. Вы можете стилизовать нажатие кнопки с помощью состояния

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

  1. Удержание левой кнопки мыши на элементе (даже на тех, которые не поддерживают состояние focus).
  2. Удержание кнопки пробела (на элементах button).
button:active {
background-color: #333;
border-color: #333;
color: #eee;
}

Два странных момента, на которые нужно обратить внимание:

  1. Удержание кнопки пробел вызывает состояние active на элементах button, но удержание кнопки ввод этого не делает.
  2. Нажатие на кнопку ввод активирует переход по ссылке, но не меняет их состояние на active. Нажатие на пробел не делает этого вообще.

Стили по умолчанию для ссылок

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

Связь между состояниями active и focus

Когда вы зажимаете левую кнопку мыши на элементе, который поддерживает состояние focus

, то вы переводите его в состояние active. В тоже время вы так же вызываете состояние focus.

👆 Это условие работает для всех элементов, на которых возможна фокусировка, кроме ссылок и кнопок.

Для ссылок:

  1. Когда вы зажимаете левую кнопку мыши: инициализируются состояния active и focus в браузерах Firefox и Chrome, но в браузере Safari (проверено только на Mac) инициализируется только состояние active.
  2. Когда вы отпускаете левую кнопку мыши: состояние focus остается на ссылке (кроме тех случаев, когда ссылка ведет на элемент на той же самой странице), но в браузере Safari фокус переходит обратно на элемент body.

Для кнопок:

  1. Когда вы зажимаете левую кнопку мыши: инициализация состояний active и focus происходит только в браузере Chrome. Состояние focus не инициализируется при тех же самых действиях в браузерах Safari и Firefox (Mac). Я писал об этом странном поведении https://zellwk.
    com/blog/inconsistent-button-behavior/

Если вы хотите, чтобы клик на кнопку переводил ее в состояние focus, то вам нужно использовать следующий JavaScript как можно раньше (зачем это делать, вы можете прочитать по ссылке выше).

document.addEventListener('click', event => {
if (event.target.matches('button')) {
event.target.focus()
}
})

Как только вы использовали этот код, клик на кнопках будет вызывать следующее поведение:

  1. Когда вы зажимаете левую кнопку мыши: инициализуется состояние active во всех браузерах. При этом focus происходит только в Chrome.
  2. Когда вы отпускаете левую кнопку мыши: переключается состояние focus в браузерах Safari и Firefox (Mac). Фокус остается на кнопках в остальных браузерах.

Поведение кнопки в браузере Safari после добавления приведенного выше фрагмента JavaScript

Теперь вы знаете все о состояниях hover, focus и active.

Давайте поговорим о их стилизации.

Следующая магическая комбинация позволяет пользователю получать обратную связь, когда происходит изменение состояний hover, focus и active, и взаимодействовать с элементами.

Вот тот кусочек css, который вам потребуется:

.element:hover,
.element:active {
/* Change background/text color */
}.element:focus {
/* Show outline /*
}

Для пользователей мыши:

  1. Когда пользователь наводит на элемент, то меняются свойства background-color и\или color. Таким образом он получают обратную связь.
  2. Когда пользователь кликает на элемент, используется свойство outline. Таким образом он получают обратную связь.

Для пользователей клавиатуры:

  1. Когда пользователь переключается между элементами с помощью tab, то используется свойство outline. Таким образом он получают обратную связь.
  2. Когда пользователь взаимодействует с элементов, то меняются свойства background-color и\или color.
    Таким образом он получают обратную связь.

Лучшее из двух миров!

  1. Я не очень тщательно проверял эту магическую комбинацию. Это лишь доказательство концепции. Я буду благодарен, если вы поможете мне различными тестами и дадите мне знает, как она будет использоваться в реальной жизни.
  2. Для ваших тестов не используете Codepen. Поведение состояния focus очень странно в Codepen. Если вы наведете на ссылку, то контур (outline) ссылки будет удален. Почему? Я не знаю. Иногда я думаю, что лучше проверять подобные вещи без всяких модных инструментов. Используйте старый добрый HTML, CSS и JS.

Как я уже упоминал ранее, нажатия на кнопки могут провоцировать странное поведение в браузерах Safari и Firefox (Mac). Если вы добавите фрагмент JavaScript, который я ранее показал вам, то магическая комбинация будет работать. Однако, это неидеальное решение.

Вот что происходит в случае Safari и Firefox (Mac):

  1. Когда пользователь зажимает левую кнопку мыши, ничего не меняется.
  2. Когда пользователь отпускает левую кнопку мыши, то происходит фокусировка на элементе.

Если для вас этого достаточно, то тогда магическая комбинация работает достаточно хорошо. Вам больше ничего не требуется.

Но если вы считаете иначе, то вам необходимо стилизовать состояния hover, focus и active независимо друг от друга.

.element:hover {
/* Change background/text color */
}.element:active {
/* Another change in background/text color */
}.element:focus {
/* Show outline /*
}

Поведение кнопки в Safari, если вы применили все три стиля.

И это все! Надеюсь, что вы выучили сегодня что-то полезное.

Спасибо за чтение. Помогла ли вам эта статья? Если да, то я надеюсь, вы поделитесь ей. Это может помочь кому-то еще. Большое спасибо!

Псевдоклассы - CSS | MDN

Fullscreen API Живой стандарт Определён :fullscreen.
HTML Living Standard Живой стандарт Нет изменений от HTML5.
Selectors Level 4 Рабочий черновик Определены :any-link, :local-link, :scope, :active-drop-target, :valid-drop-target, :invalid-drop-target, :current, :past, :future, :placeholder-shown, :user-error, :blank, :nth-match(), :nth-last-match(), :nth-column(), :nth-last-column() и :matches().
Нет существенных изменений для псевдоклассов, определённых в Selectors Level 3 и HTML5 (не рассматривая семантическое значение).
HTML5 Рекомендация Определено семантическое значение в HTML контексте для  :link, :visited, :active, :enabled, :disabled, :checked и :indeterminate.
Определены :default, :valid, :invalid, :in-range, :out-of-range, :required, :optional, :read-only, :read-write и :dir().
CSS Basic User Interface Module Level 3 Рекомендация Определены :default, :valid, :invalid, :in-range, :out-of-range, :required, :optional, :read-only и :read-write, но без связанного семантического значения.
Selectors Level 3 Рекомендация Определены :target, :root, :nth-child(), :nth-last-of-child(), :nth-of-type(), :nth-last-of-type(), :last-child, :first-of-type, :last-of-type, :only-child, :only-of-type, :empty и :not().
Определён синтаксис для :enabled, :disabled, :checked и :indeterminate, но без связанного семантического значения.
Нет значительных изменений для псевдоклассов, определённых в CSS Level 2 (Revision 1).
CSS Level 2 (Revision 1) Рекомендация Определены :lang(), :first-child, :hover и :focus.
Нет значительных изменений для псевдоклассов, определённых в CSS Level 1.
CSS Level 1 Рекомендация Определены :link, :visited и :active, но без связанного семантического значения.

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

Содержание статьи:
  • Динамические псевдоклассы
  • Возможности применения псевдоклассов

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

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

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

Вам будет интересно:Mp3tag: как пользоваться программой

.button:hover{ border: 1px solid #333; } .button:active{ opacity: .5; }

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

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

input[type="text"], input[type="email"]{ width: 300px; font-family: 'Gochi Hand', cursive; text-align: center; border: 0; outline: none; } input[type="text"]:focus, input[type="email"]:focus{ border: 0; }

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

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

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

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

Источник

Селекторы псевдоклассов и псевдоэлементов в CSS (hover, first-child, first-line и другие), отношения между тегами Html кода

Главная / Как устроены сайты / CSS за 10 уроков

10 января 2021

  1. Отношения между тегами Html кода — дерево документа
  2. Селекторы псевдоклассов — hover, focus и first-child
  3. Селекторы псевдоэлементов — first-line (letter), after и before

Здравствуйте, уважаемые читатели блога KtoNaNovenkogo.ru. Сегодня мы продолжим тему изучения таблицы каскадных стилей и наполнять новыми материалами справочник.

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

Отношения между тегами Html кода — дерево документа

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

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

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

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

  1. Предки и потомки. Например, для тега, показанного на приведенном выше примере, все остальные элементы являются потомками. Для них же всех он является прародителем — предком. Т.е. все, что находится внутри — это потомки. А предками будут являться все элементы, внутри которых данный элемент лежит.
  2. Родитель и ребенок — в цепочке предки-потомки всегда есть два ближайших звена, которые будут отвечать понятиям родитель и ребенок. Т.е. у любого Html элемента есть один родитель (ближайший предок) и в то же время у него могут быть или не быть один или же несколько детей.
  3. Сестринские (братские) отношения — к ним относятся элементы, у которых один общий родитель.

Само по себе название «псевдоклассы» обозначает то, что специально в коде ни у каких элементов (тегов) такие классы (значения для атрибута Class) никто не прописывал, но у этих самых элементов периодически могут возникать определенные динамические состояния, для которых и были придуманы селекторы псевдоклассов.

Селекторы псевдоклассов — hover, focus, first-child и другие

Например, селекторы Link и Visited во всех браузерах могут использоваться только для оформления гиперссылок:

Link подразумевает под собой не посещенную ссылку (по которой пользователь еще не переходил), а Visited — посещенную. Таким образом вы можете настроить, например, изменение цвета для уже посещенных пользователем ссылок, ну или еще что-то другое (задать визуальное состояние для всех посещенных гиперссылок). Естественно, что посещенные будут учитываться именно для данного конкретного браузера и до момента очистки его истории.

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

a:visited {color:red;}

Следующие три селектора (active, hover и focus) могут использоваться для любых тегов:

Active соответствует клику левой кнопки мыши по тому элементу в Html коде, название которого вы прописали перед этим псевдоклассом в селекторе (в нашем примере это тег гиперссылки A). Как только левую клавишу пользователь отожмет — псевдокласс active исчезнет.

p:active {color:red}

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

Hover — позволяет изменять визуальное оформление любого элемента в Html коде при наведении на него курсора мыши. При отведении курсора визуальное оформление элемента вернется к используемому по умолчанию.

p:hover {color:red}

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

Псевдоклассы active и hover в браузере IE 6 работают только для элементов гиперссылок, а focus не работает вообще ни в IE 6, ни в IE 7.

Последний псевдокласс называется first-child (первый ребенок, в переводе).

:first-child {color:red}

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

First-child в IE 6 не работает, что печально.

Селекторы псевдоэлементов — first-line (letter), after и before

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

По самому слову «псевдоэлементы» понятно, что таких тегов в Html коде нет. На данный момент псевдоэлементов всего четыре и они приведены на расположенном чуть выше рисунке. Наверное, понятно по самому названию, что first-line будет указывать на первую линию, а first-letter — на первую букву.

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

p:first-line {color:red}

Что это даст? Во всех параграфах на веб странице первые строки текста окрасятся в красный цвет. Для простоты подключим CSS к языку Html с помощью тега style и пропишем соответствующее свойство с использованием псевдоэлемента first-line в селекторе параграфа:

Тогда, как мы и планировали, все первые строки в абзацах окрасятся в красный цвет:

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

p:first-letter {font-size:5em; float:left; color:red}

Про Em, Ex, пиксели и другие размерности в CSS мы с вами уже говорили. Исходный код с добавленными свойствами тогда будет выглядеть так:

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

Два оставшихся псевдоэлемента after и before нужны для формирования контента на лету. Давайте посмотрим на примере:

p:after {
content: " KtoNaNovenkogo.ru";
color:red;
}

В результате, в конце каждого абзаца на вебстранице автоматически добавится тот фрагмент, который мы указали в CSS свойстве «content» (оно используется только для псевдоэлементов after и before) и этот фрагмент будет окрашен в красный цвет:

Если бы мы вместо «after» использовали бы «before», то дополнительный контент был бы добавлен внутри каждого абзаца на странице, но уже перед его содержимым. Напрашивается вопрос — а для чего это можно использовать на практике?

Оказывается, с помощью этих псевдоэлементов можно, например, создать сложную нумерацию вида «5.2.13». Обычными средствами Html этого сделать нельзя, а с использованием before — можно.

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

Но при этом имеет место быть сложный код CSS стилей с использованием, естественно, псевдоэлементов after и before:

Все очень здорово, но, к сожалению, after и before не поддерживаются в браузерах IE 6 и IE 7. Увы и ах. В следующей статье мы поговорим про комбинации CSS селекторов и их приоритетность.

Удачи вам! До скорых встреч на страницах блога KtoNaNovenkogo.ru

Использую для заработка

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

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

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

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

.button:hover{  border: 1px solid #333;  }  .button:active{  opacity: .5;  }  

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

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

input[type="text"], input[type="email"]{  		width: 300px;  		font-family: 'Gochi Hand', cursive;  		text-align: center;  		border: 0;  		outline: none;  }  input[type="text"]:focus, input[type="email"]:focus{  			border: 0;  		}

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

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

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

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

В чем разница между: focus и: активным?

В чем разница между псевдоклассами :focus и :active?

ОТВЕТЫ

Ответ 1

:focus и :active - два разных состояния.

:focus представляет состояние, когда элемент является выбранным в данный момент элементом для приема ввода от устройств ввода (клавиатура). :active представляет состояние, когда элемент в настоящее время активируется пользователем.

Положим это на перспективу с примером. Пусть говорят, что a <button>. <button> не будет иметь никакого состояния для начала. Он просто существует. Если мы используем Tab для "фокусировки" на <button>, теперь он переходит в состояние :focus. Если вы затем щелкните (или нажмите space), вы затем сделаете кнопку в ее состоянии (:active).

В этой заметке, когда вы нажимаете на элемент, вы придаете ему фокус, который также культивирует иллюзию, что :focus и :active совпадают. Они не совпадают. При нажатии кнопки находится в состоянии :focus:active.

Пример:

<style type="text/css">
  button { font-weight: normal; color: black; }
  button:focus { color: red; }
  button:active { font-weight: bold; }
</style>

<button>
  When clicked, my text turns red AND bold!<br />
  But not when focused, where my text just turns red
</button>
Ответ 2
:active       Adds a style to an element that is activated
:focus        Adds a style to an element that has keyboard input focus
:hover        Adds a style to an element when you mouse over it
:lang         Adds a style to an element with a specific lang attribute
:link         Adds a style to an unvisited link
:visited      Adds a style to a visited link

Источник: Псевдоклассы CSS

Ответ 3

Существует четыре случая.

  • По умолчанию активные и фокус оба отключены.
  • Когда вы переходите к циклическому перемещению элементов фокусировки, они будут вводить :focus (без активного).
  • Когда вы нажимаете на элемент без фокусировки, он вводит :active (без фокуса).
  • Когда вы нажимаете на фокусируемый элемент, он вводит :active:focus (активный и фокус одновременно).

Пример:

<div>
  I cannot be focused.
</div>

<div tabindex="0">
  I am focusable.
</div>

div:focus {
  background: green;
}

div:active {
  color: orange;
}

div:focus:active {
  font-weight: bold;
}

Когда страница загружается, то в случае 1. Когда вы нажимаете вкладку, вы фокусируете второй div и видите, что он показывает случай 2. Когда вы нажимаете на первый div, вы видите случай 3. Когда вы нажимаете второй div, вы см. случай 4.


Является ли элемент фокусируемым или нет еще один вопрос. Большинство не по умолчанию. Но безопасно предположить, что <a>, <input>, <textarea> по умолчанию настраиваются.

Ответ 4

: фокус - это когда элемент способен принимать входные данные - курсор в поле ввода или ссылку, на которую была установлена ​​вкладка.

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

Ответ 5

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

<style type="text/css">
  input { font-weight: normal; color: black; }
  input:focus { color: green; outline: 1px solid green; }
  input:active { color: red; outline: 1px solid red; }
</style>

<input type="text"/>
<input type="text"/>
Ответ 6

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

Если использовать: сосредоточиться на ссылке, правило стиля применимо только при нажатии на botton на клавиатуре.

Ответ 7

Использование "focus" даст пользователям клавиатуры тот же эффект, что и пользователи мыши, когда они наведите указатель мыши. "Активный" необходим, чтобы получить тот же эффект в Internet Explorer.

Реальность такова, что эти состояния не работают так, как должны для всех пользователей. Не использование всех трех селекторов создает проблемы доступности для многих пользователей только для клавиатуры, которые физически не могут использовать мышь. Я приглашаю вас принять вызов #nomouse (nomouse dot org).

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


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

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

Например, его можно использовать для:

  • Стиль элемента, когда пользователь наводит курсор мыши на него
  • Различный стиль посещенных и непосещенных ссылок
  • Стиль элемента, когда он получает фокус

Синтаксис

Синтаксис псевдоклассов:

селектор: псевдокласс {
свойство: значение;
}


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

Ссылки могут отображаться по-разному:

Пример

/ * непосещенная ссылка * /
a: link {
color: # FF0000;
}

/ * посетил ссылка * /
a: посетил {
color: # 00FF00;
}

/ * наведение указателя мыши на ссылку * /
a: hover {
color: # FF00FF;
}

/ * выбранная ссылка * /
a: активна {
цвет: # 0000FF;
}

Попробуй сам "

Примечание: a: hover ДОЛЖЕН идти после a: link и a: посетил в определении CSS, чтобы быть эффективным! a: активный ДОЛЖЕН быть после a: наведите указатель мыши на в определении CSS для повышения эффективности! Имена псевдоклассов не чувствительны к регистру.



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

Псевдоклассы можно комбинировать с классами CSS:

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


Наведите курсор на

Пример использования псевдокласса : hover в элементе

:


Простая всплывающая подсказка

Наведите указатель мыши на элемент

, чтобы отобразить элемент

(например, всплывающую подсказку):

Наведите указатель мыши на меня, чтобы показать элемент

.

Тада! А вот и я!

Пример

p {
дисплей: нет;
цвет фона: желтый;
отступ: 20 пикселей;
}

div: hover p {
display: block;
}

Попробуй сам "

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

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

Соответствует первому элементу

В следующем примере селектор соответствует любому элементу

, который является первым дочерним элементом любого элемента:


Соответствует первому элементу

во всех элементах

В следующем примере селектор соответствует первому элементу во всех элементах

:


Сопоставить все элементы

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

В следующем примере селектор соответствует всем элементам в элементах

, которые являются первым дочерним элементом другого элемента:


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

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

В приведенном ниже примере : lang определяет кавычки для элементов с lang = "no":

.

Пример




q: lang (no) {
цитаты: "~" "~";
}

Некоторый текст Цитата в абзаце Немного текста.


Попробуй сам "

Другие примеры

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

Использование: focus
В этом примере показано, как использовать псевдокласс: focus.


Проверьте себя упражнениями!


Все псевдоклассы CSS

Селектор Пример Описание примера
: активный a: активный Выбирает активную ссылку
: проверен ввод: проверен Выбирает каждый отмеченный элемент
: отключено вход: отключен Выбирает каждый отключенный элемент
: пусто п: пусто Выбирает каждый элемент

, не имеющий дочерних элементов

: включено вход: включен Выбирает каждый активированный элемент
: первенец р: первенец Выбирает каждый элемент

, который является первым дочерним элементом своего родительского элемента

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

, который является первым элементом

своего родительского элемента

: фокус ввод: фокус Выбирает элемент , имеющий фокус
: парение a: парение Выбирает ссылки при наведении указателя мыши на
: в пределах вход: в пределах Выбирает элементы со значением в указанном диапазоне
: недопустимый ввод: недопустимый Выбирает все элементы с недопустимым значением
: язык ( язык ) p: lang (it) Выбирает каждый элемент

, значение атрибута lang которого начинается с "it".

: последний ребенок р: последний ребенок Выбирает каждый элемент

, который является последним дочерним элементом своего родителя

: последний тип п: последний тип Выбирает каждый элемент

, который является последним элементом

его родительского элемента

: ссылка а: ссылка Выбирает все непосещенные ссылки
: нет (селектор) : нет (р) Выбирает каждый элемент, не являющийся элементом

: nth-child (n) p: nth-child (2) Выбирает каждый элемент

, который является вторым дочерним элементом своего родителя

: nth-последний-ребенок (n) p: nth-last-child (2) Выбирает каждый элемент

, который является вторым дочерним элементом своего родителя, считая от последнего дочернего элемента

: nth-last-of-type (n) p: nth-last-of-type (2) Выбирает каждый элемент

, который является вторым элементом

своего родителя, считая от последнего дочернего элемента

: nth-of-type (n) p: nth-of-type (2) Выбирает каждый элемент

, который является вторым элементом

своего родительского элемента

: только тип п: одинарный Выбирает каждый элемент

, который является единственным элементом

своего родительского элемента

: только ребенок p: только ребенок Выбирает каждый элемент

, который является единственным дочерним элементом своего родительского элемента

: опционально ввод: опционально Выбирает элементы без "обязательного" атрибута
: вне допустимого диапазона вход: вне допустимого диапазона Выбирает элементы со значением вне указанного диапазона
: только для чтения ввод: только для чтения Выбирает элементы с указанным атрибутом «только для чтения»
: чтение-запись ввод: чтение-запись Выбирает элементы без атрибута "только для чтения"
: требуется ввод: требуется Выбирает элементы с указанным атрибутом "required"
: корень корень Выбирает корневой элемент документа
: цель # новости: target Выбирает текущий активный элемент #news (щелкнул URL-адрес, содержащий это имя привязки)
: действует ввод: действительный Выбирает все элементы с допустимым значением
: посетил a: посетил Выбирает все посещенные ссылки

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

Селектор Пример Описание примера
:: после р :: после Вставлять содержимое после каждого элемента

:: до р :: до Вставлять содержимое перед каждым элементом

:: первая буква п :: первая буква Выбирает первую букву каждого элемента

:: первая линия р :: первая линия Выбирает первую строку каждого элемента

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


Когда применяются псевдоклассы: hover,: focus и: active?

Когда мы выбираем элемент по его . class или #id , мы используем предопределенные и неизменяемые атрибуты, встроенные в DOM. С помощью псевдоклассов мы можем выбирать элементы, используя информацию, которой еще нет в DOM, и которая может изменяться в зависимости от того, как пользователь взаимодействует со страницей.

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

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

Когда

: применяется наведение

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

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

  кнопка: наведите указатель мыши {цвет фона: # ffdb3a; }
  
Если ты наведешься надо мной, я стану желтым

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

Наконец, для пользователей клавиатурных устройств ⌨️ псевдокласс : hover никогда не запускается. Клавиатура не считается устройством «указатель» и поэтому не может применяться к этому псевдоклассу наведения указателя.

Когда

: применяется фокус

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

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

  кнопка: фокус {цвет фона: # ffdb3a; }
  
Нажми на меня!

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

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

Когда

: применяется активный

Наконец, псевдокласс : active применяется в течение периода, когда элемент активируется. Например, при использовании мыши 🐭 это будет время между нажатием кнопки мыши и ее отпусканием.

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

  кнопка: активна {цвет фона: # ffdb3a; }
  
Нажми на меня!

Псевдокласс : active работает таким же образом для взаимодействия с мышью и клавиатурой.

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

Объединение

: hover , : focus и : active

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

Мы можем проверить это, только изменив фон кнопки, если выполняются все три условия.

  button: hover: focus: active {
  цвет фона: # ffdb3a;
}
  

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

Щелкните меня, удерживайте, затем перетащите курсор мыши

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

Порядок стилей -

: наведение , затем : фокус , затем : активный

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

Допустим, у нас есть следующие стили:

  кнопка: активна {
  цвет фона: зеленый;
}

button: focus {
  цвет фона: синий;
}

button: hover {
  цвет фона: красный;
}
  

Будут видны только стили: hover

Попробуйте получить стили наведения, фокус и активные стили

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

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

  button: hover {
  цвет фона: зеленый;
}

button: focus {
  цвет фона: синий;
}

button: active {
  цвет фона: красный;
}
  

Все стили будут видны

Попробуйте получить стили наведения, фокус и активные стили

Резюме

Псевдоклассы : hover , : focus и : active позволяют стилизовать элементы в зависимости от того, как с ними взаимодействует пользователь. В зависимости от используемого устройства эти псевдоклассы становятся активными в разных точках (или не активируются вообще).

: парение : фокус : активный
Мышь 🐭 Есть Есть Есть
Клавиатура ⌨️ Есть Есть
Сенсорный экран 📱 Да (при нажатии) Да * (при нажатии) Да * (при нажатии)

* Не применяется на мобильных устройствах (iOS) Safari

Стиль наведения, фокуса и активного состояния по-разному

16 октября 2019

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

  // Не лучший подход. Я объясню почему в этой статье
.selector {
  &: навести,
  &: фокус,
  &: active {
    // Стили здесь
  }
}
  

По мере того как я уделял больше внимания доступности клавиатуры (и, следовательно, уделял больше внимания фокусировке), я начал думать, что мы не должны одинаково оформлять наведение, фокус и активные состояния.

Наведение, фокус и активное состояние должны иметь разные стили.

Причина проста: это разные государства!

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

Начнем с : наведите курсор на .

Стилизация состояний при наведении

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

Состояния наведения обычно представлены изменением цвета фона (и / или цвета ) . Разница в состояниях не должна быть очевидной, потому что пользователи уже знают, что они на что-то ориентируются.

  кнопка {
  цвет фона: #dedede;
}

button: hover {
  цвет фона: #aaa;
}
  

Стилизация состояний фокуса

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

  1. Когда пользователи переходят в фокусируемый элемент
  2. Когда пользователи нажимают на элемент, на который можно сфокусироваться

Фокусируемые элементы:

  1. Ссылки ( )
  2. Кнопки (
  3. Элементы формы ( input , textarea и т. Д.)
  4. Элементы с tabindex

Вот несколько важных моментов, на которые следует обратить внимание:

  1. Пользователи не могут перейти к элементу с tabindex = "- 1" , но могут щелкнуть по нему. Щелчок вызывает фокус.
  2. В Safari и Firefox (Mac) щелчки не фокусируются на элементе
  3. Когда вы щелкаете ссылку ( ), фокус остается на ссылке, пока вы не уберете палец с мыши.Когда вы поднимаете палец, фокус перенаправляется в другое место, если href указывает на действительный id на той же странице.

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

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

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

  1. Добавление контура
  2. Создание анимации с движением
  3. Изменение цвета фона
  4. Изменение цвета

Поскольку background-color и color изменения часто сопровождают : hover , имеет смысл, что контуры или анимации должны сопровождать : focus .

Вы можете использовать комбинацию свойств контура , границы и box-shadow для создания удобных стилей фокуса.Я рассказываю, как это сделать, в разделе «Создание настраиваемого стиля фокуса».

  кнопка {
  цвет фона: #dedede;
}

button: hover {
  цвет фона: #aaa;
}

button: focus {
  наброски: нет;
  box-shadow: 0 0 0 3px lightskyblue;
}
  

Стилизация активных состояний

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

Этот отзыв полезен и для веб-сайтов.Вы можете стилизовать момент «нажатия кнопки» с : активный . : активный триггер срабатывает при взаимодействии с элементом . Здесь взаимодействие означает:

  1. Удерживая левую кнопку мыши на элементе (даже не фокусируемом)
  2. Удерживая нажатой клавишу пробел (на кнопках)
  кнопка: активна {
  цвет фона: # 333;
  цвет границы: # 333;
  цвет: #eee;
}
  

Две странные вещи, на которые следует обратить внимание:

  1. Удерживая нажатой клавишу «Пробел», активирует : активен на кнопках, а удерживание клавиши Enter - нет.
  2. Enter вызывает ссылки, но не создает активное состояние. Пробел вообще не запускает ссылки.

Стили по умолчанию для ссылок

Ссылки имеют активный стиль по умолчанию. Они становятся красными при нажатии.

Связь между активным и фокусным

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

Когда вы отпускаете левую кнопку мыши, фокус остается на элементе

👆 верно для большинства элементов, на которые можно сфокусироваться, кроме ссылок и кнопок.

Для ссылок:

  1. Когда вы удерживаете левую кнопку мыши: триггеры : активны и : фокус состояние в Firefox и Chrome Активны только триггеры в Safari (проверено только на Mac)
  2. Когда вы отпускаете левую кнопку мыши: : фокус остается на ссылке (если href ссылки не совпадает с id на той же странице).В Safari фокус возвращается к .

Для кнопок:

  1. Когда вы удерживаете левую кнопку мыши: триггеры : активны и : фокус состояния только в Chrome. Не запускает : фокус вообще в Safari и Firefox (Mac). Я писал об этом странном поведении здесь.

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

  document.addEventListener ('щелчок', событие => {
  if (event.target.matches ('button')) {
    event.target.focus ()
  }
})
  

После получения этого кода поведение кнопок при нажатии становится:

  1. Когда вы удерживаете левую кнопку мыши: запускает : активен во всех браузерах. Триггеры : фокус только на Chrome.
  2. Когда вы отпускаете левую кнопку мыши: запускает : фокус на Safari и Firefox (Mac). : фокус остается на кнопке для других браузеров.
Поведение кнопки в Safari после добавления фрагмента кода JavaScript выше.

Теперь вы знаете о состояниях наведения, фокуса и активного состояния, я хочу поговорить о стилизации всех трех.

Волшебная комбинация

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

  .элемент: hover,
.element: active {
  / * Изменить цвет фона / текста * /
}

.element: focus {
  / * Показать схему / *
}
  

Для пользователей мыши:

  1. Когда пользователь наводит курсор на элемент, цвет фона (и / или цвет ) изменяется.Они получают обратную связь.
  2. Когда пользователь щелкает элемент, отображается контур фокуса. Они получают обратную связь.

Для пользователей клавиатуры:

  1. Когда пользователь входит в элемент, отображается контур фокуса. Они получают обратную связь.
  2. Когда они взаимодействуют с элементом, цвет фона (и / или цвет ) изменяется. Они получают обратную связь.

Лучшее из обоих миров!

  1. Я не тестировал полностью магическую комбинацию. Это проверка правильности концепции. Буду признателен, если вы поможете мне с тестами и дадите мне знать, как дела.
  2. Если вы запускаете тесты, не используйте Codepen. Состояния фокуса для ссылок на Codepen странные. Если вы наводите курсор на ссылку, контур фокуса удаляется. Почему? Я не знаю. Иногда я думаю, что лучше всего протестировать подобные вещи без каких-либо необычных инструментов. Просто старый HTML, CSS, JS.

Немагическая (но может быть лучше) комбинация

Как я уже упоминал выше, нажатие на кнопки ведет себя странно в Safari и Firefox (Mac).Если вы добавили фрагмент кода JavaScript, который я вам показал, волшебная комбинация все еще работает. Но это не идеально.

Для Safari и Firefox (Mac) происходит следующее:

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

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

Но если вы думаете, что возможностей недостаточно, вам нужно стилизовать : hover , : focus и : active отдельно.

  .element: hover {
  / * Изменить цвет фона / текста * /
}

.element: active {
  / * Еще одно изменение цвета фона / текста * /
}

.element: focus {
  / * Показать схему / *
}
  
Поведение кнопки в Safari, если вы стилизовали все три состояния.

Вот и все! Надеюсь, вы узнали что-то сегодня!

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

Псевдоклассы - CSS: каскадные таблицы стилей

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

 
button: hover {
  цвет синий;
}  

Псевдоклассы позволяют применять стиль к элементу не только по отношению к содержимому дерева документа, но и по отношению к внешним факторам, таким как история навигатора (например, : посещено, ), статус его содержимое (например, : проверено на определенных элементах формы) или положение мыши (например, : hover , которое позволяет узнать, находится ли указатель мыши над элементом или нет).

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

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

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

Эти псевдоклассы относятся к ссылкам и целевым элементам в текущем документе.

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

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

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

Эти псевдоклассы применяются при просмотре чего-то, что имеет время, например дорожки субтитров WebVTT.

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

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

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

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

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

Эти псевдоклассы относятся к расположению элемента в дереве документа.

: корень
Представляет элемент, являющийся корнем документа.В HTML это обычно элемент .
: пусто
Представляет элемент без дочерних элементов, кроме символов пробела.
: nth-ребенок
Использует нотацию A n + B для выбора элементов из списка родственных элементов.
: nth-последний-ребенок
Использует нотацию A n + B для выбора элементов из списка родственных элементов, считая в обратном порядке от конца списка.
: первенец
Соответствует элементу, являющемуся первым из его братьев и сестер.
: последний ребенок
Соответствует элементу, являющемуся последним из его братьев и сестер.
: только ребенок
Соответствует элементу, у которого нет братьев и сестер. Например, элемент списка, в котором нет других элементов списка.
: nth-of-type
Использует нотацию A n + B для выбора элементов из списка одноуровневых элементов, которые соответствуют определенному типу из списка одноуровневых элементов.
: последний тип
Использует нотацию A n + B для выбора элементов из списка одноуровневых элементов, которые соответствуют определенному типу, из списка одноуровневых элементов, считая в обратном порядке от конца списка.
: первый в своем роде
Соответствует элементу, являющемуся первым из его братьев и сестер, а также соответствует определенному селектору типа.
: последний тип
Соответствует элементу, который является последним из его братьев и сестер, а также соответствует определенному селектору типа.
: только тип
Соответствует элементу, не имеющему братьев и сестер для выбранного селектора типа.
  селектор: псевдокласс {
  стоимость имущества;
}
  

Как и обычные классы, вы можете объединить в один селектор столько псевдоклассов, сколько захотите.

Псевдоклассы, определенные набором спецификаций CSS, включают следующее:

А B
  • : blank Это экспериментальный API, который не следует использовать в производственном коде.
С
  • : проверен
  • : текущий Это экспериментальный API, который не следует использовать в производственном коде.
D E F ЧАС я L N О п р S
  • : объем
  • : state () Это экспериментальный API, который не следует использовать в производственном коде.
т U
  • : недопустимый пользователем Это экспериментальный API, который не следует использовать в производственном коде.
В W
  • : where () Это экспериментальный API, который не следует использовать в производственном коде.
Спецификация Статус Комментарий
Полноэкранный режим API Уровень жизни Определено : полноэкранный .
HTML Уровень жизни Уровень жизни Определяет, когда определенные селекторы соответствуют элементам HTML.
Селекторы уровня 4 Осадка рабочий Определено : any-link , : blank , : local-link , : scope , : drop , : текущий , : прошлый , : будущий , : заполнитель- показано , : недопустимый пользователем , : nth-col () , : nth-last-col () , : is () и : где () .
Изменено : пустой , чтобы вести себя как : -moz-only-whitespace Этот API не был стандартизирован.
Нет значительных изменений для других псевдоклассов, определенных в селекторах уровня 3 и HTML5 (хотя семантическое значение не принимается) .
HTML5 Рекомендация Копирует соответствующий раздел из канонической (WHATWG) спецификации HTML.
Модуль базового пользовательского интерфейса CSS, уровень 3 Рекомендация Определено : по умолчанию , : допустимо , : недопустимо , : находится в диапазоне , : вне диапазона , : требуется , : необязательно , : только для чтения и : чтение-запись , но без связанного семантического значения.
Селекторы уровня 3 Рекомендация Определено : цель , : корень , : nth-child () , : nth-last-of-child () , : nth-of-type () , : nth-last -of-type () , : последний ребенок , : первый тип , : последний тип , : только ребенок , : только тип , : пусто и : нет () .
Определен синтаксис : включен , : отключен , : проверен и : неопределенный , но без соответствующего семантического значения.
Нет значительных изменений для псевдоклассов, определенных в CSS Level 2 (Revision 1).
CSS, уровень 2 (редакция 1) Рекомендация Определено : lang () , : первый ребенок , : hover и : focus .
Нет значительных изменений для псевдоклассов, определенных в CSS Level 1.
CSS Уровень 1 Рекомендация Определено : ссылка , : посещена и : активна , но без связанного семантического значения.

Псевдо-классы CSS - ссылка, посещение, фокус, наведение и активный

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

/ * показывает синим цветом непосещенные ссылки * /
a: link {
color: # 006;
}

/ * показывает серым цветом посещенные ссылки * /
a: посещенные {
color: # 999;
}

/ * показывает ссылки в фокусе светло-красным * /
a: focus {
color: # f00;
}

/ * показывает красным цветом ссылки при наведении * /
a: hover {
color: # a00;
}

/ * показывает активные ссылки светло-красным * /
a: active {
color: # f00;
}

Обратите внимание, что псевдоклассы добавляются не одной точкой к селектору элемента, а двумя точками (:)

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

а. синий: посетил {
цвет: # 006;
}

: link и: visit являются классами псевдосвязи и могут быть назначены только элементу привязки (): hover,: active и: active и: focus являются псевдодинамическими классами, которые теоретически могут быть назначены любому элементу .

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

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

: ссылка -: посетил -: фокус -: навести -: активен

Псевдоклассы также можно комбинировать. Теоретически возможна и следующая инструкция:

a: focus: hover {…}

Инструкция применяется, когда ссылка находится в фокусе (с помощью клавиатуры) и указатель проходит над ней.

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

#languageselection p: lang (es) {…}

Предыдущая строка может означать, например, что абзац

в #languageselection написан на испанском языке.

: наведение против: фокус - Сообщество разработчиков

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

Так в чем разница? Из спецификации W3:

  • Псевдокласс : hover применяется, когда пользователь указывает элемент с помощью указывающего устройства, но не обязательно активирует его.Например, визуальный пользовательский агент может применить этот псевдокласс, когда курсор (указатель мыши) наводит курсор на поле, созданное элементом. Пользовательские агенты, не поддерживающие интерактивные медиа, не обязаны поддерживать этот псевдокласс. Некоторые соответствующие пользовательские агенты, поддерживающие интерактивные медиа, могут быть не в состоянии поддерживать этот псевдокласс (например, перьевое устройство, которое не обнаруживает зависания).
  • Псевдокласс : active применяется, когда элемент активируется пользователем. Например, между моментами, когда пользователь нажимает кнопку мыши и отпускает ее.В системах с более чем одной кнопкой мыши: active применяется только к основной или основной кнопке активации (обычно «левая» кнопка мыши) и любым ее псевдонимам.
  • Псевдокласс : focus применяется, пока элемент имеет фокус (принимает события клавиатуры или мыши или другие формы ввода).

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

Несколько примеров помогли прояснить ситуации, в которых эти два состояния могут расходиться:

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

Интересное помимо спецификации:

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

псевдоклассов | HTML Dog

Ссылки

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

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

 
a : ссылка  {
    цвет синий;
}

: посетил  {
    цвет: фиолетовый;
}
  

Новый раздел примеров! Посмотрите на весь этот код в действии и поиграйте с ним.

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

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

Изменение стилей поля при наведении курсора на него.
  • active - когда что-то активируется пользователем, например, когда нажимается ссылка.
  • hover используется, когда что-то передается вводом от пользователя, например, когда курсор перемещается по ссылке.
  • focus - когда что-то получает фокус, то есть когда оно выбрано или готово к вводу с клавиатуры.

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

 
a : active  {
    красный цвет;
}

a : hover  {
    текстовое оформление: нет;
    цвет синий;
    цвет фона: желтый;
}

input : focus , textarea : focus  {
    фон: #eee;
}
  

Первые дети

Наконец (по крайней мере, для этой статьи) существует псевдокласс first-child .Это будет нацелено на что-то, только если это самый первый потомок элемента. Итак, в следующем HTML…

 

    

Я ребенок первого абзаца текста. Я руляю. Слушайся меня.

Я обижен на вас.

...

… если вы хотите стилизовать только первый абзац , вы можете использовать следующий CSS:

 
p : first-child  {
    font-weight: жирный;
    размер шрифта: 40 пикселей;
}
  

CSS3 также предоставил совершенно новый набор псевдоклассов: last-child , target , first-of-type и другие.

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

Ваш адрес email не будет опубликован. Обязательные поля помечены *