Псевдоселекторы в CSS
Всем доброго времени суток. На связи Алексей Гулынин. В прошлой статье вы узнали, что такое селекторы потомков в CSS. В данной статье я бы хотел рассказать о том, что такое псевдоселекторы в CSS и как их использовать. Вообще, когда говорят о псевдоселекторах, то сразу, в качестве примера, приводят ссылки. У ссылок может быть 4 состояния:
1) Ссылка в обычном состоянии,
2) При наведении,
3) Уже посещенная ссылка,
4) При щелчке.
Вот как раз обработка всех таких состояний (на примере ссылок), называется псевдоселекторами в CSS. Давайте создадим простую html-страницу и разместим на ней 2 ссылки. Никаких стилей в файле style.css пока задавать не будем:
<html> <head> <meta charset="utf-8"/> <link href="style.css" rel="stylesheet" type="text/css"/> </head> <body> <a href="https://www.yandex.ru/">yandex</a> </br> <a href="http://www.google.ru/">google</a> </body> </html>
Браузер умеет сам, по умолчанию, обрабатывать ссылки (обычно это синий цвет, в разных браузерах ссылка может быть подчеркнутой). Давайте зададим стиль для ссылки в файле style.css:
a {
color:black; //сделать черной
text-decoration:none; //убрать подчеркивание
}
Сейчас мы увидим, что наша ссылка стала черного цвета. Если на неё навести или щелкнуть по ней, то она всё равно будет черного цвета. Давайте зададим стили для всех 4 её состояний. Начать нужно с обычного состояния ссылки. Делается это с помощью псевдоселектора link:
a:link {
color:black; //оставим также черной
text-decoration:underline; //сделаем подчеркивание
}
Сделаем ссылку красной при наведении (с помощью псевдоселектора hover):
a:hover {
color:red; //делаем красной
text-decoration:none; //убираем подчеркивание
}
Изменим цвет посещенной ссылки на желтый (с помощью псевдоселектора visited):
a:visited {
color: yellow;
}
Также изменим цвет ссылки на зеленый при щелчке по ней (с помощью псевдоселектора active):
a:active {
color:green;
}
Обязательно наберите данный пример, чтобы закрепить материал по различным состояниям ссылки, т.
к. это используется абсолютно на любом сайте.
В данной статье вы узнали, что такое псевдоселекторы в CSS.
На связи был Алексей Гулынин, оставляйте свои комментарии, увидимся в следующих статьях.
Опубликовано от Алексей Гулынин Оставить комментарий
Следующая статья >
| Комментарии: |
Псевдоклассы — 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, <input type, <option> и <button>), у которых можно задать начальное состояние.
Например, у <input type селектор применится к тому чекбоксу, у которого в разметке установлен атрибут checked, т.
е. он по умолчанию выбран:
:default + span { color: #2E9AFF;}
:default + span {
color: #2E9AFF;
}
Открыть демо в новой вкладке:dir() Скопировано
Позволяет найти элементы по направлению текста в нём (например, в арабском направление письма идёт справа налево). К сожалению, пока свойство поддерживается только в Firefox.
:disabled, :enabledСкопировано
Основная статья.
Позволяют находить элементы формы по состоянию их атрибута disabled. Почти эквивалентны селекторам по атрибуту ([disabled и :not соответственно), но более гибкие, т. к. среагируют на унаследованное состояние 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 ещё обозначает элемент, внутри которого находится элемент в фокусе.
: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) или нет (:out) этому диапазону.
:lang() Скопировано
Селектор по языку содержимого. В HTML есть атрибут lang, который указывает на язык содержимого. Псевдокласс lang позволяет обратиться к элементу, чьё значение атрибута lang подходит под условие.
Например, в арабском языке нет переносов:
:lang(ar) { hyphens: none;}
:lang(ar) {
hyphens: none;
}
:not() Скопировано
Основная статья.
Находит элемент, который
Выделим красной рамкой все <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) или наоборот (:read) для редактирования. Например, ориентируется на наличие атрибута 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 или, например, создавать собственный стиль для контролов формы:
Открыть демо в новой вкладкеРуководство по недавно поддерживаемым современным селекторам псевдоклассов CSS — Smashing Magazine
- 11 минут чтения
- CSS, Гиды, Браузеры, Доступность
- Поделиться в Twitter, LinkedIn
Об авторе
Стефани Эклз (Stephanie Eckles) — инженер-программист, ориентированный на интерфейс.
Она является автором ModernCSS.dev, который предлагает современные решения старых проблем CSS. Она …
Больше о
Stephanie ↬
Селекторы псевдокласса — это те, которые начинаются с символа двоеточия « :hover или :checked .
Несмотря на то, что этот псевдокласс определен в Selectors Level 4, он уже довольно давно поддерживает кроссбраузерность. Псевдокласс any-link будет соответствовать якорной гиперссылке, если она имеет ссылка .
Это будет эквивалентно одновременному совпадению :link и :visited . По сути, это может уменьшить ваши стили на один селектор, если вы добавляете базовые свойства, такие как цвет , которые вы хотели бы применить ко всем ссылкам независимо от их статуса посещения.
: любая ссылка {
цвет синий;
смещение подчеркивания текста: 0,05 em;
}
Важное замечание о специфичности: :any-link победит a в качестве селектора, даже если и расположены ниже в каскаде, поскольку он имеет специфику класса. В следующем примере ссылки будут фиолетовыми:
:any-link {
цвет: фиолетовый;
}
а {
красный цвет;
}
Итак, если вы вводите :any-link , имейте в виду, что вам нужно будет включить его в экземпляры a в качестве селектора, если они будут напрямую конкурировать за специфичность.
:focus-visible Могу поспорить, что одним из самых распространенных нарушений доступности в Интернете является удаление обозначьте на интерактивных элементах, таких как ссылки, кнопки и входные данные форм, для их состояния :focus .
Одна из основных целей этого контура
Псевдокласс :focus-visible предназначен для отображения кольца фокуса только тогда, когда пользовательский агент с помощью эвристики определяет, что оно должно быть видимым. Иными словами: браузеры будут определять , когда применять :focus-visible , основываясь на таких вещах, как метод ввода, тип элемента и контекст взаимодействия. В целях тестирования на настольном компьютере с вводом с клавиатуры и мыши вы должны увидеть :focus-visible стилей, прикрепленных при переходе к интерактивному элементу, но не при щелчке по нему, за исключением ввода текста и текстовых областей, которые должны отображать :focus-visible для всех типов ввода фокуса.
Примечание : Дополнительные сведения см. в рабочем проекте спецификации :focus-visible .
Последние версии браузеров Firefox и Chromium, кажется, теперь обрабатывают :focus-visible при вводе формы в соответствии со спецификацией, которая говорит, что UA должен удалить стили :focus , когда :focus-visible соответствует. Safari еще не поддерживает :focus-visible , поэтому нам нужно убедиться, что стиль :focus включен в качестве запасного варианта, чтобы избежать удаления контура для доступности.
Больше после прыжка! Продолжить чтение ниже ↓
При наличии кнопки и ввода текста со следующим набором стилей посмотрим, что произойдет:
input:focus,
кнопка: фокус {
контур: 2 пикселя сплошного синего цвета;
смещение контура: 0,25 em;
}
ввод: фокус-видимый {
контур: 2px сплошной прозрачный;
цвет границы: синий;
}
кнопка: фокус: не (: фокус-видимый) {
контур: нет;
}
кнопка: фокус видимый {
контур: 2px сплошной прозрачный;
box-shadow: 0 0 0 2px #fff, 0 0 0 4px синий;
}
Chromium и Firefox
-
input
Правильное удаление стилей:focus, когда элементы фокусируются с помощью ввода с помощью мыши, в пользу:focus-visible, что приводит к изменению цвета границыконтурпри вводе с клавиатуры -
button
Не только использует:focus-visibleбез дополнительного правила дляbutton:focus:not(:focus-visible), которое удаляет контур на:focus, но позволит видетьbox-shadowтолько при вводе с клавиатуры
Safari
-
input
Продолжается использование только стилей:focus900 04 -
кнопка
Этот кажется чтобы теперь частично учитывать намерение:focus-visibleна кнопке, скрывая стили:focusпри нажатии, но по-прежнему показывая стили:focusпри взаимодействии с клавиатурой
Итак, на данный момент рекомендуется продолжать включать стили :focus , а затем постепенно расширять до использования :focus-visible , что позволяет демонстрационный код.
Вот CodePen для продолжения тестирования:
См. Pen [Тестирование приложения :focus-visible] (https://codepen.io/smashingmag/pen/MWJZbew) Стефани Эклз.
См. приложение Pen Testing :focus-visible от Стефани Эклс. :фокус внутри Псевдокласс :focus-within поддерживается всеми современными браузерами и действует почти как родительский селектор, но только в очень специфических условиях. При присоединении к содержащему элементу и совпадению дочернего элемента с :focus стили могут быть добавлены к содержащему элементу и/или к любым другим элементам внутри контейнера.
Практичным усовершенствованием для использования этого поведения является стиль метки формы , когда связанный ввод имеет фокус. Чтобы это работало, мы заворачиваем метку и ввод в контейнер, а затем присоединяем :focus-within в этот контейнер, а также выбор метки:
.
form-group:focus-within label {
цвет синий;
}
Это приводит к тому, что метка становится синей, когда ввод находится в фокусе.
Эта демонстрация CodePen также включает добавление схемы непосредственно в контейнер .form-group :
См. Pen [Тестирование приложения :focus-within] (https://codepen.io/smashingmag/pen/xxgmREq) Стефани Эклз.
См. приложение Pen Testing :focus-within от Стефани Эклс. :is() Также известный как «сопоставление любому» псевдоклассу, :is() может принимать список селекторов, с которыми выполняется попытка сопоставления. Например, вместо того, чтобы перечислять стили заголовков по отдельности, вы можете сгруппировать их под селектором :is(h2, h3, h4) .
Несколько уникальных поведений о списке селекторов :is() :
- Если селектор в списке недействителен, правило будет по-прежнему соответствовать допустимым селекторам. Дано
:is(-ua-invalid, артикль, p)правило будет соответствоватьартикулуир. - Вычисленная специфичность будет равна специфичности переданного селектора с наивысшей специфичностью. Например,
:is(#id, p)будет иметь специфичность#id— 1.0.0 — тогда как:is(p, a)будет иметь специфичность 0.0.1.
Дано Ключевым преимуществом является игнорирование недопустимых селекторов. При использовании других селекторов в группе, где один селектор недействителен, браузер отбрасывает все правило. Это вступает в игру в нескольких случаях, когда префиксы поставщиков все еще необходимы, а группировка селекторов с префиксом и без префикса приводит к сбою правила во всех браузерах. С :is() вы можете безопасно сгруппировать эти стили, и они будут применяться, когда они совпадают, и игнорироваться, если они не совпадают.
Для меня стилей группировки заголовков , как упоминалось ранее, уже являются большой победой с этим селектором.
Это также тот тип правила, который мне было бы удобно использовать без отката при применении некритических стилей, таких как:
:is(h2, h3, h4) {
высота строки: 1,2;
}
: is (h3, h4): не (: первый ребенок) {
поле сверху: 2em;
}
В этом примере (который исходит из стилей документа в моем проекте SmolCSS), имея большее line-height , унаследованная от базовых стилей или отсутствие margin-top , на самом деле не является проблемой для не поддерживающих браузеров. Это просто далеко от идеала. Чего вы не хотели бы использовать :is() , так это важных стилей макета , таких как Grid или Flex, которые значительно контролируют ваш интерфейс.
Кроме того, при привязке к другому селектору вы можете проверить, соответствует ли базовый селектор селектору-потомку в пределах :is() . Например, следующее правило выбирает только те абзацы, которые являются прямыми потомками статей. Универсальный селектор используется как ссылка на p Базовый селектор.
p:is(статья > *)
Для наилучшей текущей поддержки, если вы хотите начать использовать ее, вы также захотите удвоить стили , включив повторяющиеся правила, используя :-webkit-any() и :matches() . Не забудьте сделать эти индивидуальные правила, иначе даже поддерживающий браузер их выбросит! Другими словами, включите все следующее:
:matches(h2, h3, h4) { }
:-webkit-любой (h2, h3, h4) { }
: есть (h2, h3, h4) { }
Здесь стоит упомянуть, что наряду с самими новыми селекторами есть обновленная версия @supports , которая представляет собой @supports selector . Это также доступно как @supports not selector .
Примечание : В настоящее время (из современных браузеров) только Safari не поддерживает это правило at.
Вы можете проверить наличие поддержки :is() с помощью чего-то вроде следующего, но на самом деле вы потеряете поддержку Safari, поскольку Safari поддерживает :is() , но не поддерживает @supports selector .
@supports selector(:is(h2)) {
: есть (h2, h3, h4) {
высота строки: 1,1;
}
}
:where() Псевдокласс :where() почти идентичен :is() , за исключением одного важного отличия: всегда будет иметь нулевую специфичность. Это имеет невероятные последствия для людей, которые создают фреймворки, темы и дизайн-системы . Использование :where() , автор может установить значения по умолчанию, а последующие разработчики могут включать переопределения или расширения без конфликта специфики.
Рассмотрим следующий набор стилей img . Используя :where() , даже с селектором более высокой специфичности специфичность остается нулевой. Как вы думаете, в следующем примере граница какого цвета будет у изображения?
: где (статья img: не (: первый ребенок)) {
граница: 5 пикселей сплошного красного цвета;
}
:где(статья) img {
граница: 5px сплошной зеленый цвет;
}
картинка {
граница: 5 пикселей сплошного оранжевого цвета;
}
Первое правило имеет нулевую специфичность, поскольку полностью содержится в :where() .
Таким образом, непосредственно против второго правила выигрывает второе правило. Представляя селектор только элемента img в качестве последнего правила, он выиграет благодаря каскаду. Это связано с тем, что оно будет вычисляться с той же специфичностью, что и правило :where(article) img , поскольку часть :where() не увеличивает специфичность.
Использование :where() вместе с резервными вариантами немного сложнее из-за функции нулевой специфичности, так как эта функция, вероятно, является причиной, по которой вы хочет, чтобы использовал его вместо :is() . И если вы добавите резервные правила, они, скорее всего, превзойдут :where() из-за самой их природы. И у него общая поддержка лучше, чем у селектора @supports , поэтому попытка использовать его для создания отката вряд ли принесет большую выгоду (если вообще даст). По сути, помните о невозможности правильно создать запасные варианты для :where() и тщательно проверьте свои собственные данные, чтобы определить, безопасно ли начинать использовать для вашей уникальной аудитории.
Вы можете дополнительно протестировать :where() с помощью следующего CodePen, в котором используются селекторы img , указанные выше: smashingmag/pen/jOyXVMg) Стефани Эклз.
:where() специфичность Стефани Эклс.Расширенный
:not() Базовый селектор :not() поддерживается начиная с Internet Explorer 9. Но селекторы уровня 4 улучшают :not() , позволяя ему принимать список селекторов, точно так же, как :is() и :where() .
Следующие правила дают тот же результат в поддерживаемых браузерах:
article :not(h3):not(h4):not(h5) {
нижняя граница: 1.5em;
}
статья: не (h3, h4, h5) {
нижняя граница: 1.5em;
}
Способность :not() принимать список селекторов отлично поддерживается современными браузерами.
Как мы видели с :is() , расширенный :not() также может содержать ссылку на базовый селектор как на потомка с использованием * .
Этот CodePen демонстрирует эту способность, выбирая ссылки, которые являются , а не потомками nav .
См. Pen [Тестирование :not() с помощью селектора потомков](https://codepen.io/smashingmag/pen/BapvQQv) Стефани Эклс.
См. Pen Testing :not() с селектором потомков Стефани Эклс. Бонус : предыдущая демонстрация также включает пример объединения :not() и :is() для выбора изображений, которые не являются соседними элементами h3 или h4 .
Предлагается, но «под угрозой» —
:has() Последний псевдокласс, который является очень захватывающим предложением, но не имеет текущего браузера, реализующего его даже экспериментально, — это :has() . На самом деле, он указан в редакционном черновике Selector Level 4 как «находящийся под угрозой», что означает, что он испытывает трудности с завершением его реализации, и поэтому он можно исключить из рекомендации.
В случае реализации :has() , по сути, это был бы «родительский селектор», о котором мечтали многие разработчики CSS. Это будет работать с логикой, аналогичной комбинации :focus-within и :is() с селекторами потомков, где вы ищете наличие потомков , но применяемый стиль будет применяться к родительскому элементу.
При соблюдении следующего правила, если бы навигация содержала кнопку, то отступы сверху и снизу у навигации были бы меньше:
навигация {
набивка: 0,75 бэр 0,25 бэр;
навигация: имеет (кнопка) {
набивка-верх: 0,25 бэр;
прокладка-дно: 0,25 бэр;
}
Опять же, это , а не , который в настоящее время реализован в любом браузере даже экспериментально — но об этом интересно подумать! Робин Рендл предоставил дополнительную информацию об этом будущем селекторе на CSS-Tricks.
Почетное упоминание с уровня 3:
:пусто Полезный псевдокласс, который вы, возможно, пропустили на уровне селекторов 3, это :пусто , который соответствует элементу, если у него нет дочерних элементов, включая текстовые узлы.
Правило Hello p:пусто будет соответствовать , но не
Одним из способов использования :пусто является скрытие элементов, которые, возможно, являются заполнителями для динамического содержимого, заполняемого с помощью JavaScript. Возможно, у вас есть элемент div, который будет получать результаты поиска, и когда он будет заполнен, он будет иметь рамку и некоторый отступ. Но пока нет результатов, вы не хотите, чтобы он занимал место на странице. Использование :empty вы можете скрыть его с помощью:
.search-results:empty {
дисплей: нет;
}
Возможно, вы думаете о добавлении сообщения в пустом состоянии и испытываете искушение добавить его с псевдоэлементом и содержимым . Ловушка здесь заключается в том, что сообщения могут быть недоступны для пользователей вспомогательных технологий, которые несовместимы с тем, могут ли они получить доступ к содержимому .
Другими словами, чтобы убедиться, что сообщение типа «нет результатов» доступно , вы могли бы добавить его как реальный элемент, такой как абзац ().0015 aria-label больше не будет доступен для скрытого элемента div).
Ресурсы для изучения селекторов
CSS содержит гораздо больше селекторов, включая псевдоклассы. Вот еще несколько мест, где можно узнать больше о том, что доступно:
- Документация по селекторам CSS MDN включает исчерпывающий список по категориям;
- Я написал руководство по расширенным селекторам CSS, состоящее из двух частей, вы можете начать с первой части;
- Получайте удовольствие от изучения селекторов CSS в игре CSS Diner;
- Китти Жиродель создала инструмент объяснения селектора, который разбивает и описывает части предоставленного селектора.
Псевдоклассы CSS — javatpoint
следующий → ← предыдущая Псевдокласс можно определить как ключевое слово, объединенное с селектором, определяющим особое состояние выбранных элементов. Имена псевдоклассов не чувствительны к регистру. СинтаксисПсевдокласс начинается с двоеточия (:). Посмотрим его синтаксис. селектор: псевдокласс { стоимость имущества; } Хотя существуют различные псевдоклассы CSS, здесь мы собираемся обсудить некоторые из наиболее часто используемых псевдоклассов. Широко используемые классы CSS сведены в следующую таблицу:
Давайте обсудим приведенные выше псевдоклассы вместе с примером. :наведение псевдокласса Этот псевдокласс добавляет особый стиль к элементу, когда пользователь наводит на него курсор. Если вы хотите сделать его эффективным, его нужно применять после псевдоклассов «: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 { дисплей: блок; } <тело> Наведите указатель мыши на текст ниже, чтобы увидеть эффектПривет, мир Протестируйте сейчасДобро пожаловать в javaTpointCSS-классы и псевдоклассы Классы в CSS можно комбинировать с псевдоклассами. |
Он добавляется в селектор для добавления эффекта к существующим элементам на основе их состояний. Например, «:hover» используется для добавления специальных эффектов к элементу, когда пользователь наводит курсор на элемент.
Его возможными значениями могут быть любые названия цветов в допустимом формате.
Обычно он используется в элементах ввода форм и срабатывает, когда пользователь нажимает на него.