Псевдоклассы css: Псевдоклассы | htmlbook.ru

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

Кратко

Скопировано

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

Пример

Скопировано

Рассмотрим CSS для подсветки строки таблицы при наведении курсора.

В обычном состоянии цвет фона — тёмный:

tr {  background-color: #18191C;}
          tr {
  background-color: #18191C;
}

При наведении курсора цвет фона изменится на голубой:

tr:hover {  background-color: #123E66;}
          tr:hover {
  background-color: #123E66;
}

Открыть демо в новой вкладке

Как понять

Скопировано

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

Как пишется

Скопировано

.block:hover {  color: red;}
          .block:hover {
  color: red;
}

Селектор может и отсутствовать. Тогда правило применится ко всем элементам, которые могут иметь признак этого псевдокласса. Например, CSS-правило :focus {} применится к любому элементу, который будет в фокусе.

:focus {  color: lightblue;}
          :focus {
  color: lightblue;
}

:active

Скопировано

Основная статья.

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

:is()

Скопировано

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

Вместо:

h2 a, h3 a, h4 a, h5 a, h5 a, h6 a {  /* … */}
          h2 a, h3 a, h4 a, h5 a, h5 a, h6 a {
  /* … */
}

с :is() это можно описать так:

:is(h2, h3, h4, h5, h5, h6) a {  /* … */}
          :is(h2, h3, h4, h5, h5, h6) a {
  /* … */
}

:any-link, :link, :visited

Скопировано

• Основная статья про :link;
• Основная статья про :visited.

Применяется ко всем элементам, которые могут иметь атрибут href (<a>, <area> и <link>). :link характеризует ещё не посещённые страницы, :visited — наоборот, посещённые (в рамках одного домена).

:checked

Скопировано

Основная статья.

Применяется к элементам, состояние которых меняется с помощью атрибута checked.

:default

Скопировано

Применяется к элементам формы (<input type="radio">, <input type="checkbox">, <option> и <button>

), у которых можно задать начальное состояние.

Например, у <input type="checkbox"> селектор применится к тому чекбоксу, у которого в разметке установлен атрибут checked, т. е. он по умолчанию выбран:

:default + span {  color: #2E9AFF;}
          :default + span {
  color: #2E9AFF;
}

Открыть демо в новой вкладке

:dir()

Скопировано

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

:disabled, :enabled

Скопировано

Основная статья.

Позволяют находить элементы формы по состоянию их атрибута disabled. Почти эквивалентны селекторам по атрибуту ([disabled] и :not([disabled]) соответственно), но более гибкие, т. к. среагируют на унаследованное состояние disabled. Если есть <fieldset disabled>, то отключаются вложенные в него контролы форм.

Открыть демо в новой вкладке

:empty

Скопировано

Основная статья.

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

Открыть демо в новой вкладке

Псевдоклассы группы child

Скопировано

Основная статья.

Селекторы элемента по его положению относительно родителя (первый, последний, n-й, единственный).

Псевдоклассы группы type

Скопировано

Основная статья.

Селектор по типу внутри одного родителя.

:fullscreen

Скопировано

Признак того, что документ развернули на всё окно (с помощью JavaScript).

Скроем панель управления у плеера, если он развёрнут на весь экран:

.player:fullscreen .player__controls {  display: none;}
          .player:fullscreen .player__controls {
  display: none;
}

:focus и :focus-within

Скопировано

Основная статья.

Элемент, который сейчас находится в фокусе. А :focus-within ещё обозначает элемент, внутри которого находится элемент в фокусе.

:has()

Скопировано

Основная статья.

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

:hover

Скопировано

Основная статья.

Состояние элемента, когда на него навели курсор.

:indeterminate

Скопировано

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

• <input type="checkbox">, отображающий, что не все пункты вложенной группы были выделены.
• Группа <input type="radio"> с одинаковым name, но у которой ни один элемент не установлен в checked.
• <progress>.

Для <input> состояние indeterminate в HTML можно задать только через JavaScript.

Открыть демо в новой вкладке

:in-range и :out-of-range

Скопировано

Основная статья.

Применяется для <input>, у которого определены атрибуты min и max и введённое значение соответствует (:in-range) или нет (:out-of-range) этому диапазону.

Открыть демо в новой вкладке

:lang()

Скопировано

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

) позволяет обратиться к элементу, чьё значение атрибута lang подходит под условие.

Например, в арабском языке нет переносов:

:lang(ar) {  hyphens: none;}
          :lang(ar) {
  hyphens: none;
}

:not()

Скопировано

Основная статья.

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

Выделим красной рамкой все <img>, которым забыли прописать атрибут alt:

img:not([alt]) {  outline: 2px solid red;}
          img:not([alt]) {
  outline: 2px solid red;
}

:optional и :required

Скопировано

Основная статья про :required.

:optional находит любой <input>, у которого не установлен атрибут required — то есть находит необязательные поля ввода. А :required — наоборот, те <input>, у которых есть этот атрибут.

:read-only и :read-write

Скопировано

Находит элементы, недоступные (:read-only) или наоборот (:read-write) для редактирования. Например, ориентируется на наличие атрибута disabled или readonly.

:root

Скопировано

Основная статья.

Соответствует корневому тегу-элементу документа. Для HTML это, соответственно, <html>, для SVG — <svg>. Специфичность селектора :root выше, чем у селектора по тегу.

:target

Скопировано

При переходе по ссылке, которая ведёт на URI-фрагмент (элемент внутри страницы), id фрагмента совпадает со значением атрибута id этого элемента — это состояние можно «поймать» с помощью псевдокласса :target:

Открыть демо в новой вкладке

:valid и :invalid

Скопировано

Основная статья.

Селектор :valid соответствует <input>, <fieldset> или <form>-элементу, контент которого валиден в соответствии с типом поля или полей внутри. Обратный эффект у :invalid — сработает при ошибке HTML-валидации.

Подсказки

Скопировано

💡 Псевдоклассы пишутся с одним двоеточием впереди.

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

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

Если курсор находится внутри <nav>, увеличить размер шрифта у вложенных ссылок:

nav:hover a {  font-size: 120%;}
          nav:hover a {
  font-size: 120%;
}

На практике

Скопировано

Realetive советует

Скопировано

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

Открыть демо в новой вкладке

Что такое псевдоклассы (pseudo classes) и псевдоэлементы (pseudo elements)

---

1 year ago | 15. 8K

 

Всем приветствую, с вами Сергей Никонов и в этой статье я расскажу про псевдоклассы (pseudo classes), псевдоэлементы (pseudo elements) и как с помощью них задавать CSS-стили для вашего сайта. На примерах мы рассмотрим как с работают самые часто используемые псевдоклассы и псевдоэлементы при верстке сайтов.

Это один из уроков курса по верстке веб-сайтов HTML/CSS Advanced и если вы хотите научиться верстать веб-сайты на профессиональном уровне, я рекомендую проходить этот курс на сайте FructCode с интерактивными упражнениями для закрепления ваших знаний полученных из курса верстки сайтов.

Только на сайте FructCode вы можете найти актуальных версии моих курсов!

 

Содержание

• Что такое псевдоклассы (pseudo classes)
• Псевдокласс :hover
• Псевдокласс :active
• Псевдокласс :focus
• Псевдоклассы :first-child и :last-child
• Псевдоклассы :first-of-type и :last-of-type
• Псевдокласс :nth-child
• Псевдокласс :not
• Что такое псевдоэлементы (pseudo elements)
• Псевдоэлементы ::before и ::after

 

Что такое псевдоклассы (pseudo classes)

Псевдокласс (pseudo class) — это специальное ключевое слово, которое добавляется к css-селектору (css selector), с помощью которого можно задавать стили для отображения HTML-элементов при различных факторах. К примеру, можно задать CSS-стили для HTML-элемента на который пользователь навел курсор мыши.

Если вы еще не знакомы с понятием CSS-селектор (css selector) и не знаете, что такое CSS-селекторы (css selectors), прочитайте об этом статью или посмотрите видеоурок из курса HTML/CSS Advanced, а для закрепления ваших знаний, пройдите интерактивные упражнения.

Псевдоклассы задаются через двоеточие “:”, далее идет название псевдокласса, например, так задается псевдокласс :hover для HTML-тега <a>: a:hover {…}.

 

Смотрите видео «Что такое псевдоклассы(pseudo classes) и псевдоэлементы(pseudo elements)»

 

Подпишитесь на YouTube канал FructCode, чтобы не пропустить полезные видео!

 

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

Псевдокласс :hover позволяет задавать CSS-стили при наведении курсора мыши на HTML-элемент.  

 

Посмотрите на этот пример. Наведите курсор мыши на ссылку Link и вы увидите, что цвет ссылки, при наведении на него курсора мыши, изменился на цвет “brown”:

 

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

С помощью псевдокласса :active мы можем задавать CSS-стили в момент клика на HTML-элемент мышью.

 

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

 

 

Псевдоклассы :hover и :active работают не только с HTML-тегом <a>. Вы можете заменить в CSS-стилях “a” на любой другой HTML-тег или название классы и стили применятся к этому HTML-элементу.

 

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

Псевдокласс :focus позволяет задавать стили для HTML-тегов таких как <input>, <textarea>, <checkbox> и других при установке курсора мыши в этот элемент.

 

Посмотрите пример ниже с HTML-формой. Если вы установите курсор мыши в поле <input>, фоновый цвет поля изменится:

 

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

С помощью псевдокласса :first-child вы можете задавать стили для первого HTML-элемента, который является первым у своего родителя (parent).

 

Чтобы было проще понять как работает :first-child, посмотрите пример ниже. В маркированном списке выделяется цветом первый элемент <li>, а его родителем (parent) является тег <ul>:

 

 

А с помощью псевдокласса :last-child вы можете задавать CSS-стили для последнего HTML-элемента. 

 

Посмотрите пример ниже. Благодаря псевдоклассу :last-child выделяется цветом последний HTML-элемент <li> в маркированном списке:

 

 

Кстати, если вы еще не знаете, что такое маркированные списки (html теги <ul> <li>), которые используются в этих примерах или что такое нумерованные списки (html теги <ol> <li>), посмотрите этот видеоурок из курса HTML/CSS Advanced.

 

Как я говорил ранее, для того, чтобы применялись стили к HTML-элементу, заданных с помощью псевдоклассов :first-child и :last-child, у элемента должен быть родитель (parent). Если родитель отсутствует, тогда стили не сработают. 

 

Посмотрите пример ниже. У тега <span> есть родительский тег <div> и стили с :first-child работают, а для <span> без родительского тега :first-child и :last-child не будут работать:

 

 

Обратите внимание, что в текущей спецификации Selectors Level 3, при использовании псевдоклассов :first-child и :last-child элемент должен иметь родителя (parent), чтобы сработали css-стили. В новой разрабатываемой версии спецификации Selectors Level 4 для срабатывания стилей заданных с помощью :first-child, :last-child,  элемент может не иметь родителя.

 

Псевдоклассы :first-of-type и :last-of-type

С помощью псевдоклассов :first-of-type и :last-of-type можно задавать стили для первого и последнего потомка (child) соответсвенно своего типа среди детей (child) его родителя (parent).  

 

Определение звучит сложно и не очень понятно. Поэтому лучше сразу перейти к примерам, чтобы вы быстро поняли как работают псевдоклассы  :first-of-type и :last-of-type.

 

В этом примере, с помощью псевдокласса  :first-of-type можно выделить цветом все первые элементы <li> в маркированном списке с текстом “First”:

 

 

Точно такой же результат вы можете получить и с помощью псевдокласса :first-child, но не сможете выделить все последние элементы маркированного списка с надписью Third во всех вложенностях с помощью :last-child, зато такой результат вы сможете получить с помощью псевдокласса :last-of-type:

 

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

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

 

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

 

Например, в нашем любимом маркированном списке мы хотим выделить цветом какой-то определенный элемент <li> под номером три. Для этого в CSS-стилях нам достаточно добавить псевдокласс  :nth-child к <li> вот таким образом:  li:nth-child(3) и в результате мы сделаем то, что хотели:

 

 

Но этим возможности псевдокласса :nth-child не ограничиваются и мы можем выделить все нечетные HTML-элементы <li> из нашего маркированного списка, написав несколько символов кода: li:nth-child(odd). Ключевое слово “odd” внутри скобок псевдокласса :nth-child как раз задает этот правило:

 

 

А с помощью ключевого слова even внутри скобок псевдокласса :nth-child мы можем наоборот выделить цветом все четные HTML-элементы <li> из нашего маркированного списка:

 

 

И на этом возможности псевдокласса  :nth-child не заканчиваются и мы можем писать даже сложные правила выборки HTML-элементов к которым применить CSS-стили с помощью формул. Об этом вы можете прочитать в документации к  псевдоклассу :nth-child.

 

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

С помощью псевдокласса :not вы можете задать CSS-стили для которые не будут соответствовать заданному селектору.  

 

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

 

Если все еще непонятно, что такое псевдокласс :not, вот вам наглядный пример, с моим любимым маркированным списком. В четвертый  HTML-элемент <li> мы задали класс .not-color и задали стили для <li>, указав в скобках название класса — :not(.not-color). И в результате у нас окрашиваются все другие элементы <li>, кроме <li> с классом .not-color:

 

 

И если вы переместите класс .not-color соседний <li>, выше или ниже, будут закрашиваться цветом все <li>, кроме <li> с классом .not-color.

 

Что такое псевдоэлементы (pseudo elements)

Псевдоэлемент (pseudo element) — это это специальное ключевое слово, которое добавляется к css-селектору и позволяет задавать стили для части выбранного HTML-элемента.

 

Псевдоэлементы ::before и ::after

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

 

Суть этих псевдоэлементов очень простая: С помощью псевдоэлемента ::before вы можете присоединить к существующему HTML-тегу какой-то контент ДО этого HTML-элемента, а с помощью псевдоэлемента ::after ПОСЛЕ HTML-элемента.

 

И сразу давайте перейдем к примеру ::before и ::after. У нас есть HTML-тег <p> и в него помещен текст “Have a good day!”. И с помощью псевдоклассов  ::before и ::after мы добавляем “сердечки” слева и справа от надписи “Have a good day!”:

 

 

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

 

Вывод

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

 

А если вы хотите научиться верстать с нуля до уровня профессионала, я рекомендую пройти мой интерактивный курс HTML/CSS Advanced. Курс HTML/CSS Advanced разделен на две части, на теоретическую часть, где вы познакомитесь с основами HTML и CSS и на практическую часть, где мы будем создавать верстку сайта KinoMonster (КиноМонстер).

 

Кстати, у меня есть YouTube канал FructCode, где я переодически публикую полезные видео о верстке веб-сайтов и программировании. Подпишитесь на YouTube канал FructCode, чтобы не пропустить полезные видео!

 

С вами был Сергей Никонов,

Успехов в обучении!

псевдоклассов CSS — javatpoint

следующий → ← предыдущая Псевдокласс можно определить как ключевое слово, объединенное с селектором, определяющим особое состояние выбранных элементов. Он добавляется в селектор для добавления эффекта к существующим элементам на основе их состояний. Например, «:hover» используется для добавления специальных эффектов к элементу, когда пользователь наводит курсор на элемент. Имена псевдоклассов не чувствительны к регистру. Синтаксис Псевдокласс начинается с двоеточия (:). Посмотрим его синтаксис. селектор: псевдокласс { стоимость имущества; } Хотя существуют различные псевдоклассы CSS, здесь мы собираемся обсудить некоторые из наиболее часто используемых псевдоклассов. Широко используемые классы CSS сведены в следующую таблицу: псевдокласс Описание :активный Используется для добавления стиля к активному элементу. :наведение Добавляет специальные эффекты к элементу, когда пользователь наводит указатель мыши на элемент. :ссылка IIДобавляет стиль непросмотренной ссылке. :посетили Добавляет стиль посещенной ссылке. :язык Используется для определения языка, который будет использоваться в указанном элементе. :фокус Выбирает элемент, на котором в данный момент находится фокус пользователя. :первый ребенок Добавляет специальные эффекты к элементу, который является первым дочерним элементом другого элемента. Давайте обсудим приведенные выше псевдоклассы вместе с примером. : наведение псевдокласса Этот псевдокласс добавляет элементу особый стиль, когда пользователь наводит на него курсор. Если вы хотите сделать его эффективным, его нужно применять после «:link» и «:visited» псевдоклассов. Пример <голова> <стиль> тело{ выравнивание текста: по центру; } h2: наведите { красный цвет; } h3: наведите { цвет синий; } <тело> Привет, мир Это пример псевдокласса :hover Протестируйте сейчас :активный псевдокласс Применяется при нажатии или активации элементов. Он выбирает активированный элемент. Мы можем понять это на примере, приведенном ниже. Пример <голова> <стиль> тело{ выравнивание текста: по центру; } а: активный { цвет: желтый; } h2, h3, h4{ красный цвет; ; } <тело> Привет, мир Псевдокласс :active Нажмите на следующую ссылку, чтобы увидеть эффект Нажмите на ссылку Протестируйте сейчас :посетил псевдокласс Выбирает посещенные ссылки и добавляет к ним специальные стили. Его возможными значениями могут быть любые названия цветов в допустимом формате. Пример <голова> <стиль> тело{ выравнивание текста: по центру; } а: посетил { красный цвет; } <тело> Привет, мир Псевдокласс :visited Нажмите на следующую ссылку, чтобы увидеть эффект Нажмите на ссылку Протестируйте сейчас :язык псевдокласса Это полезно для документов, которые требуют нескольких языков. Это позволяет нам определять специальные правила для разных языков. Пример В этом примере мы указываем p:lang(fr) , который выбирает элементы с атрибутом lang=»fr» . <голова> <стиль> тело{ выравнивание текста: по центру; } п: язык (фр) { семейство шрифтов: Verdana; цвет синий; } <тело> Без псевдокласса :lang С псевдоклассом :lang со значением fr Протестируйте сейчас : фокус псевдокласса Выбирает элементы, на которых в данный момент сосредоточен пользователь. Обычно он используется в элементах ввода форм и срабатывает, когда пользователь нажимает на него. Пример <стиль> форма{ выравнивание текста: по центру; } ввод: фокус { граница: 5px сплошной светло-голубой; box-shadow: 10px 10px 10px черный; цвет синий; ширина: 300 пикселей; } <тело> <форма> Имя: Протестируйте сейчас :первый дочерний псевдокласс Он соответствует определенному элементу, который является первым дочерним элементом другого элемента, и добавляет к соответствующему элементу специальный эффект. Примечание. Мы должны объявить вверху документа, чтобы псевдокласс «:first-child» работал в IE8 и его более ранних версиях. На следующем рисунке это поясняется более четко. Пример <голова> <стиль> h2: первый ребенок { отступ текста: 200px; цвет синий; } <тело> <дел> Это первый заголовок в div. Он будет иметь отступ, а его цвет будет синим. Это второй заголовок в div, который не будет затронут. Протестируйте сейчас Простая всплывающая подсказка Подсказка указывает дополнительную информацию о чем-либо, когда пользователь наводит курсор на элемент. Давайте создадим всплывающую подсказку, используя псевдокласс «:hover» . Пример <голова> <стиль> тело{ выравнивание текста: по центру; } h3{ дисплей: нет; цвет фона: красный; белый цвет; отступ: 20 пикселей; } дел { размер шрифта: 40px; } div: hover h3 { дисплей: блок; } <тело> Наведите указатель мыши на текст ниже, чтобы увидеть эффект Привет, мир Добро пожаловать в javaTpoint Протестируйте сейчас CSS-классы и псевдоклассы Классы в CSS можно комбинировать с псевдоклассами. Мы можем записать это как- Синтаксис selector.class: псевдокласс { стоимость имущества; } Мы можем понять это на следующем примере. Пример <голова> <стиль> тело{ выравнивание текста: по центру; } div.hello:наведите { красный цвет; размер шрифта: 40px; } <тело> CSS-классы и псевдоклассы Наведите курсор на текст ниже Привет, мир Протестируйте сейчас Следующая темаПсевдоэлементы CSS ← предыдущая следующий →

WebD2: Селекторы псевдоклассов в CSS

Обзор

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

  а: наведите {
    /* здесь ваш стиль */
  }
 

Идея псевдоклассов заключается в том, что вы можете по-разному стилизовать элементы, когда пользователи наводят на них курсор (:hover) или перемещаются по ним с клавиатуры (:focus), или в тот самый момент, когда пользователи выбирают ссылку (:active ). Вы также можете по-разному стилизовать ссылки после того, как их посетили пользователи (:visited). Есть много других доступных псевдоклассов. Дополнительную информацию см. на странице псевдоклассов CSS W3Schools.

Результаты учащегося

По завершении этого упражнения:

• вы сможете использовать псевдоклассы CSS :hover, :focus и :active для веб-страницы, чтобы помочь пользователю отслеживать свое текущее положение на странице.
• вы сможете использовать псевдокласс :first-letter для четкой стилизации первой буквы блока текста.

Использование псевдоклассов CSS для выделения позиции пользователя

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

  а {
    черный цвет;
    цвет фона: белый;
  }
  а: наведите {
    белый цвет;
    цвет фона: черный;
  }
 

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

  а {
    черный цвет;
    цвет фона: белый;
  }
  а: наведение, а: фокус {
    белый цвет;
    цвет фона: черный;
  }
 

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