Псевдокласс active: Псевдокласс :active | htmlbook.ru — Вебджем.рф

Содержание

Псевдокласс :active | CSS | WebReference

Содержание
- Синтаксис
- Пример
- Примечание
- Спецификация
- Браузеры

Псевдокласс :active определяет стиль активного элемента. Это такое состояние элемента, которое происходит между щелчком и отпусканием клавиши мыши. В основном применяется к ссылкам и кнопкам, но ими не ограничен.

Синтаксис

Селектор:active { ... }

Обозначения

	Описание	Пример
<тип>	Указывает тип значения.	<размер>
A && B	Значения должны выводиться в указанном порядке.	<размер> && <цвет>
A \| B	Указывает, что надо выбрать только одно значение из предложенных (A или B).	normal \| small-caps
A \|\| B	Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке.	width \|\| count
[ ]	Группирует значения.	[ crop \|\| cross ]
*	Повторять ноль или больше раз.	[,<время>]*
+	Повторять один или больше раз.	<число>+
?	Указанный тип, слово или группа не является обязательным.	inset?
{A, B}	Повторять не менее A, но не более B раз.	<радиус>{1,4}
#	Повторять один или больше раз через запятую.	<время>#

Пример

<!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title>active</title> <style> a:link { color: #0000d0; /* Цвет ссылок */ } a:visited { color: #900060; /* Цвет посещённых ссылок */ } a:active { color: #f00; /* Цвет активной ссылки */ } </style> </head> <body> <p><a href=»page/task1.

html»>Вычислить число оборотов двигателя в минуту</a></p> <p>Даётся: линейка, часы с секундной стрелкой, лист бумаги, нитка, карандаш, ножницы.</p> </body> </html>

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

Примечание

Internet Exporer до версии 8 и Opera до версии 7 поддерживают :active только для ссылок.

Спецификация

Спецификация	Статус
Selectors Level 4	Рабочий проект
Selectors Level 3	Рекомендация
CSS Level 2 Revision 1 (CSS 2.1)	Рекомендация
CSS Level 1	Рекомендация

Спецификация

Каждая спецификация проходит несколько стадий одобрения.

Recommendation (Рекомендация) — спецификация одобрена W3C и рекомендована как стандарт.
Candidate Recommendation (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
Proposed Recommendation (Предлагаемая рекомендация) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
Working Draft (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
Editor’s draft (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
Draft (Черновик спецификации) — первая черновая версия стандарта.

Браузеры


4	8	12	1	5	7	1	1


1	1	6	1

Браузеры

В таблице браузеров применяются следующие обозначения.

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

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

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

См. также

Виды ссылок

Рецепты

Как задать цвет активной ссылки?
Как изменить вид нажатой кнопки?

Практика

Активная ссылка

Автор и редакторы

Автор: Влад Мержевич

Последнее изменение: 05.09.2017

Редакторы: Влад Мержевич

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

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

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

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

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

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

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

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

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

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

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

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

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

— ну и блок объявления стилей в фигурных скобках.
А вся эта запись вместе будет говорить о том, что если навести курсором на такую ссылку — то она покраснеет.
Так собственно мы подошли к первому, самому популярному, псевдоклассу hover.
Как Вы уже, наверное, догадались, псевдокласс hover активизируется в том случае, если на элемент наведен курсор.
Ну а раз уж догадались просто покажу пример:
<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Transitional//EN» «http://www.w3.org/TR/html4/loose.dtd»>
<html>
<head>
<title>Псевдоклассы</title>
<style type=»text/css»>
.menu {
display: block;
width: 180px;
background-color:#fff8dc;
color:#008;
font-size: 16px;
text-decoration: none;
padding: 3px;
}
. menu:hover {
display: block;
width: 180px;
background-color:#b8860b;
color:#fff;
padding: 3px;
font-size: 16px;
text-decoration: none;
}
tr:hover {
background-color:#b8860b;
}
</style>
</head>
<body>
<p>Чем Вам не блок навигации по сайту?</p>
<a href=»#»>Главная</a>
<a href=»#»>Карта сайта</a>
<a href=»#»>Купить слона</a>
<a href=»#»>Продать слона</a>

<a href=»#»>Взять слона на прокат</a>
<hr>
<p>А вот ещё один распространенный трюк.. строки в таблице подсвечиваются при наведении на них курсором.</p>
<table border=»1″ bordercolor=»#ccc» cellpadding=»1″ cellspacing=»0″>
<tr>
<td>Иванов</td><td>+</td><td> </td><td> </td><td>+</td><td> </td><td> </td>
</tr>
<tr>
<td>Петров</td><td> </td><td>+</td><td> </td><td> </td><td>+</td><td> </td>
</tr>
<tr>
<td>Сидоров</td><td> </td><td> </td><td>+</td><td> </td><td> </td><td>+</td>
</tr>
</table>
</body>
</html>
смотреть пример
Несколько слов к примеру выше. .
Как Вы наверное заметили в качестве селектора псевдокласса может выступать не только какой либо элемент — тег, но и класс или идентификатор. Так в примере к классу .menu применён псевдокласс hover и синтаксис приобретает следующий вид:
.menu:hover { color:#ff0000;}
Не запутались в терминологии?
Простыми словами мы сказали браузеру что мол подсвечивай красным только те ссылки которые находится в навигационном блоке (выведены в класс.menu ), а остальное оставь как есть!
Псевдокласс hover может быть применён к любому элементу, выводимому на экран, так в нашем примере, для того чтобы организовать подсветку строк таблицы мы применили его к тегу <tr>. Однако следует отметить, что браузер Internet Explorer 6 и его более ранние версии поддерживает псевдокласс hover только для ссылок — тег <a>, так что, к примеру, строки таблицы, при наведении на них курсора, в браузерах IE6 и ниже подсвечиваться не будут!
Рассмотрим сразу три псевдокласса созданных для работы со ссылками.
active — Стиль активной ссылки.
visited — Стиль для недавно посещённой ссылки.
link — Стиль для нечасто посещаемой ссылки.
Сначала покажу пример:
<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Transitional//EN» «http://www.w3.org/TR/html4/loose.dtd»>
<html>
<head>
<title>Псевдоклассы и ссылки</title>
<style type=»text/css»>
a:link {color:#0000ff}
a:active {color:#ff0000}
a:visited {color:#008000}
</style>
</head>
<body>
<a href=»#1″>Ссылка на первый якорь</a>
<a href=»#2″>Ссылка на второй якорь</a>
<a href=»#3″>Ссылка на третий якорь</a>
<hr>
<a name=»1″><h5>Первый якорь</h5></a>
<p>Псевдокласс link, в этом примере, указывает, что все не посещенные ссылки должны отображаться синим цветом. </p>
<a name=»2″><h5>Второй якорь</h5></a>
<p>Попробуйте нажить и удерживать на одну из не посещенных ссылок, чтобы увидеть для работу псевдокласса active.</p>
<a name=»3″><h5>Третий якорь</h5></a>
<p>visited — псевдокласс который, в этом примере, говорит о том, что все посещенные ссылки должны отображаться зеленым цветом.</p>
</body>
</html>
смотреть пример
Теперь расскажу более подробно.
Псевдокласс active присваивает ссылке определённый стиль в тот момент когда эта ссылка активна, то есть в тот момент когда пользователь нажал на ссылку, но еще не отпустил кнопку мыши. Короче active — это стиль ссылки в момент клика по ней.
Браузеры некоторое время помнят, на какие ссылки нажимал пользователь в последнее время, так вот, псевдокласс visited указывает стиль ссылки которая недавно посещалась пользователем.
Псевдокласс link описывает стиль ссылки, которая ранее не посещалась пользователем. Надо отметить, что никакой ощутимой разницы между записью a {…} и a:link {…} нет, так что применение данного псевдокласса в этом случае ровным счетом ничего не меняет.
Все три вышеперечисленных псевдокласса предназначены для работы с ссылками, однако псевдокласс active может быть применён к любому элементу — работать будет везде, кроме браузера Internet Explorer 6 и ниже.
Данный псевдокласс определяет стиль элемента, если тот находится в фокусе. Теперь собственно о том, что такое фокус?.. как в случае с оптикой и иллюзией, слово фокус в CSS обозначат, что некий объект, а точнее элемент, находится в центре внимания наблюдателя — пользователя. Такими элементами могут быть теги <a> <input> <select> и <textarea>.
Посмотрите на пример:
<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4. 01 Transitional//EN» «http://www.w3.org/TR/html4/loose.dtd»>
<html>
<head>
<title>Псевдокласс focus</title>
<style type=»text/css»>
input:focus {color: red}
</style>
</head>
<body>
<form>
<input type=»text» value=»Введите текст в эту форму» size=»30″>
</form>
<p>Ввели? а теперь щелкните по пустому месту на экране чтобы форма потеряла фокус.</p>
</body>
</html>
смотреть пример
В примере текст в текстовом поле <input> изначально чёрный, но как только элемент получает фокус — то есть тогда когда пользователь кликнет по данному полю и начнет набирать текст, он окрасится красным.
Вот и весь фокус-покус..
Думаю, в ходе обучения CSS Вы уже поняли, что все элементы можно определить как родительские или дочерние и что элемент родитель может содержать в себе несколько дочерних элементов, ну например:
<div>— блок родитель
<p></p> — первый дочерний элемент
<p></p> — второй дочерний элемент
</div>
Так вот псевдокласс first-child определят стиль первого дочернего элемента находящегося в родительском контейнере.
<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Transitional//EN» «http://www.w3.org/TR/html4/loose.dtd»>
<html>
<head>
<title>Псевдокласс first-child</title>
<style type=»text/css»>
div {
margin: 20px;
padding: 30px;
background-color: #c0e4ff;
border: 2px solid #008000
}
p {
color: #555;
background-color: #dcdcdc;
border: 2px solid #555
}
p:first-child {
color: #f00;
background-color: #c5ffa0;
border: 2px solid #008000
}
</style>
</head>
<body>
<div>
<p>первый дочерний параграф — он выделен псевдоклассом first-child</p>
<p>второй дочерний параграф</p>
<p>третий дочерний параграф</p>
</div>
<div>
<p>и здесь первый дочерний параграф выделен хотя блок родитель уже другой</p>
<p>второй дочерний параграф</p>
</div>
</body>
</html>
смотреть пример
Обратите внимание на тот факт, что если бы в блоке родителе перед дочерними параграфами стоял любой другой тег, заголовок <h2> к примеру, то псевдокласс first-child уже не действовал бы к первому параграфу. . так как хоть параграф то он и первый, но элемент в блоке родителе уже второй.
Применяют данный псевдокласс в тех случаях , если требуется задать разный стиль для первого и последующих элементов, например сделать «буквицу»- одну единственную в начале документа или обозначить первый абзац текста на всех страницах сайта , выделить первый пункт в списках…и т.д.
Псевдокласс lang определяет язык текста того или иного элемента или документа в целом.
Если Вы помните из курса HTML, язык документа определяют атрибуты: charset — кодировка документа и content — язык документа для тега <meta>.
<meta http-equiv=»Content-Type» Content=»text/html; Charset=Windows-1251″>
<meta http-equiv=»Content-Language» Content=»ru»>
Так вот для того чтобы определить язык отдельно взятого текстового блока используют псевдокласс lang() — в круглых скобках которого собственно и указывается язык.
Язык может быть:
ru — Русский
en — Английский
de — Немецкий
fr — Французский
it — Итальянский
Всё вместе пишется так:
span:lang(en) {font-style: italic}
— здесь мы указали, что текст взятый в контейнер <span> английский и что он должен отображаться курсивом.
Пример:
<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01//EN» «http://www.w3.org/TR/html4/strict.dtd»>
<html>
<head>
<title>Псевдокласс lang</title>
<meta http-equiv=»Content-Type» Content=»text/html; Charset=Windows-1251″>
<meta http-equiv=»Content-Language» Content=»ru»>
<style type=»text/css»>
p:lang(ru) {color: #00f;}
p:lang(en) {color: #f00;}
</style>
</head>
<body>
<p lang=»ru»>Русский текст выделен синим</p>
<p lang=»en»>English text is chosen red</p>
</body>
</html>
смотреть пример
Обратите внимание, что в теге, в нашем случая параграфе, мы указываем с помощью атрибута lang используемый язык и его стиль: <p lang=»en»>текст</p> прописанный в блоке CSS.
Так же псевдокласс lang позволяет определять вид кавычек для цитат (тег <q>) с помощью значения quotes — кавычки. В России привычно использовать двойные кавычки, в других странах дела обстоят иначе.
Пишется так:
q:lang(en) {quotes: «\201C» «\201D»}
В фигурных скобках после значения quotes указывается юникод символа/ов или просто смвол/ы для открывающей и закрывающей кавычки.
Пример:
<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01//EN» «http://www.w3.org/TR/html4/strict.dtd»>
<html>
<head>
<title>Псевдокласс lang. Цитаты.</title>
<meta http-equiv=»Content-Type» Content=»text/html; Charset=Windows-1251″>
<meta http-equiv=»Content-Language» Content=»ru»>
<style type=»text/css»>
div {
color:#000;
font-size: 24px;
}
q:lang(en) {quotes: «\201C» «\201D»}
q:lang(de) {quotes: «\201E» «\201C»}
q:lang(fr) {quotes: «\00AB» «\00BB»}
q:lang(ru) {quotes: «ёклмн. .» «..ёпрст»}
</style>
</head>
<body>
<div>
<p>Обратите внимание на вид кавычек для цитат:<p>
<q>Цитата по умолчанию</q><br>
<q lang=»fr»>Французская цитата</q><br>
<q lang=»de»>Немецкая цитата</q><br>
<q lang=»en»>Английская цитата</q><br>
<q lang=»ru»>Русская цитата</q><br>
</div>
</body>
</html>
смотреть пример
Псевдоклассы нельзя внедрять в HTML документ с помощью атрибута style. Можно только с помощью тега <style> в голове документа или внешнего CSS файла.
Если селектор, какого либо псевдокласса, явно не указывать, а написать вот так, например:
:hover {color: #ff0}
— то это будет значить, что действие данного псевдокласса будет распространятся на все элементы документа.
Браузер IE6 и ниже игнорирует практически все псевдоклассы.

Псевдоклассы в CSS. Оформление ссылок
В CSS псевдоклассы используются для изменения свойств элементов, когда они находятся в определенном состоянии. Например, если на картинку навести курсор мыши, то у нее появляется состояние hover. В таблице стилей может быть правило изменения каких-либо свойств элемента img в этом состоянии (размеров, затенения, рамок).
Селектор превдокласса элемента имеет следующий синтаксис:
тег:превдокласс { … }
То есть псевдоклассам предшествует двоеточие.
Если псевдокласс описывается для класса, выглядеть это может так:
тег.класс:превдокласс { … }
В отличие от классов, в элементах HTML превдоклассы не упоминаются. То или иное состояние элемента случается или нет, независимо от html-кода страницы. Ряд состояний может быть характерным только для определенного типа элементов.
Так для ссылок (гиперссылок) выделяют четыре состояния:
link – непосещенная ссылка (в истории браузера не хранится ее адрес),
visited – посещенная ссылка (в истории есть адрес),
hover – курсор мыши находится над ссылкой,
active – ссылка в момент, когда на нее наведен курсор мыши, и зажата левая кнопка мыши.
По умолчанию во всех четырех состояниях ссылки имеют подчеркивание. Непосещенная ссылка окрашена в синий цвет, посещенная – в фиолетовый. При наведении на ссылку курсора, он меняется со стрелки на иконку руки. Ссылка в момент «активации» приобретает красный цвет.
В настоящее время оформление ссылок по-умолчанию используется редко. Обычно его изменяют в таблице стилей, стилизуя ссылки под цветовую схему сайта. При этом последовательность описания состояний, приведенная выше, должна сохраняться. Некоторые могут быть пропущены. Общие свойства обычно выносят в селектор-тег (без псевдокласса).
Часто у ссылок убирают подчеркивание, а между посещенной и непосещенной не делают различий.
a { margin: 10px; text-decoration: none; color: Green; } a:hover, a:active { border-bottom: dashed 1px Green; }
Когда любые селекторы группируются через запятую, это значит, что правило применяется ко всем в группе по отдельности. Так делают, чтобы избежать повторений, когда разные элементы оформляются одинаково.
В примере выше добавлять в правило селектор с псевдоклассом active не обязательно. Состояние active переопределяет hover. Поэтому если для active нет правила, то в этом состоянии ссылка будет выглядеть также, как в состоянии hover.
Для главного меню сайта ссылки часто стилизуют под кнопки:
a:link, a:visited { background: Green; color: White; text-decoration: none; padding: 15px 20px; text-align: center; display: inline-block; width: 200px; } a:hover, a:active { background-color: OliveDrab; }
На одной веб-странице ссылки могут быть не только в меню, также встречаться в теле статьи и другом контенте. Как сделать так, чтобы часть ссылок на странице была оформлена в одном стиле, а другая часть в другом?
Конечно, мы можем назначить одним ссылкам один класс, другим – иной, или оставить без класса.
Однако упоминание класса в каждой ссылке, особенно если их много, делает код грязным. Должно быть какое-то более экономичное решение.
В CSS есть возможность выбирать из html-документа элементы, которые вложены (то есть являются потомками) в определенный внешний элемент (предок), по-сути являющийся для них html-контейнером. Селектор, с помощью которого выполняется такой выбор, называется селектором потомка. Он относится к комбинированным селекторам, которые создаются с помощью различных так называемых комбинаторов.
Комбинатор потомка обозначается пробелом. В селекторе пробел ставится между внешним контейнером и вложенным в него элементом, для которого описывается правило. В данном случае потомками называют элементы HTML на любом уровне вложенности: сразу или вложенные во вложенные в предка – неважно.
В примере на скрине выше ссылки меню заключены в контейнер <nav></nav>. Nav относится к семантическим элементам HTML и предназначен для основного меню сайта, навигации по сайту. В то же время для ссылок в статье в качестве предка мы можем выделить контейнер <main></main>.
CSS-код ниже дает такое же оформление ссылок, как на скрине выше:
a { text-decoration: none; } main a { color: DarkGreen; } main a:hover { border-bottom: dashed 1px Green; } nav a { background: Green; color: White; padding: 15px 20px; text-align: center; display: inline-block; width: 200px; } nav a:hover { background-color: OliveDrab; }
Здесь четыре селектора потомка. В частности, селектор main a применяет свойства своего правила ко всем ссылкам, которые находятся в контейнере main. Таким образом, мы можем разделить стилизацию ссылок в зависимости от их обрамляющего html-элемента. При этом общее свойство было вынесено в селектор a. Его значение применяется для всех ссылок до их стилизации в зависимости от предка.
В отличие от примера, в котором использовался селектор класса, при использовании селектора потомка в коде HTML нет необходимости писать атрибут class в ссылках навигации, что делает код чище:
<nav> <a href="python">Программирование</a> <a href="web">Web-Дизайн</a> <a href="blender">3D-моделирование</a> </nav>
Заметим, что селектор потомка может комбинировать классы и иные типы селекторов:
.имя_класса вложенный_элемент { … }
внешний_элемент .имя_класса { … }
Псевдоклассы
Псевдокласс присоединяется к CSS селекторам, чтобы определить особое состояние данного элемента.
Например, псевдоклассы могут использоваться, чтобы определять
стили элементов, когда пользователь наводит на них курсор мыши,
разные стили для посещенных и не посещенных ссылок,
стиль элемента, когда он получает фокус.
Наведи сюда мышь
Синтаксис
Декларация селектора с псевдоклассом имеет следующий синтаксис:
селектор:псевдокласс { свойство: значение; }
Т.е. псевдокласс ставится после селектора и отделяется от него двоеточием.
Псевдоклассы ссылок
Ссылки могут отображаться разными способами.
Есть четыре псевдокласса ссылки:
:link — обычная, не посещенная ссылка
:visited — ссылка, которую пользователь уже посетил
:hover — ссылка, на которую наведен курсор мыши
:active — ссылка в момент нажатия
a:link { color: blue; } a:visited { color: purple; } a:active { color: red; } a:hover { text-decoration: none; color: blue; background-color: yellow; }
Примечание: Чтобы CSS определения состояния ссылки были эффективными, необходимо соблюдать некоторые правила: a:hover должна стоять после a:link и a:visited, а a:active должна стоять после a:hover!
Назначение иного цвета для посещенных ссылок – это хорошая практика, поскольку многие пользователи этого ожидают, хотя CSS предоставляет возможность этого не делать.
Традиционно, не посещенные текстовые ссылки отображаются синим цветом, а посещенные – пурпурным, и есть причины думать, что это наиболее эффективные цвета в данном случае, хотя опять же из-за постоянно растущей популярности CSS среднестатистический пользователь уже больше не ожидает, что ссылка будет синего или пурпурного цвета.
Псевдоклассы и HTML классы
Псевдоклассы можно комбинировать с HTML классами:
a.highlight:hover { color: #ff0000; }
Псевдокласс :hover с другими элементами
Кроме всего прочего псевдокласс :hover может использоваться с любыми элементами, а не только со ссылками.
В следующем примере псевдокласс :hover используется с элементом <div>:
div:hover { background-color: blue; }
К сожалению, браузер Internet Explorer не поддерживает такой вариант использования данного псевдокласса. И это чрезвычайно прискорбно, так как лишает возможности применять различные визуальные трюки, которые так восхитительно смотрятся в других браузерах.
Простая появляющаяcя подсказка
Пример простой появляющейся подсказки. При наведении на элемент <div> отображается элемент <p>:
Наведите сюда, чтобы показать элемент <p>.
Тада! А вот и я!
p { display: none; background-color: yellow; padding: 20px; } div:hover p { display: block; }
Псевдокласс :first-child
Псевсдокласс :first-child соответствует заданному элементу, который является первым дочерним элементом другого элемента.
В следующем примере селектор соответствует любому элементу <p>, который является первым дочерним элементом любого элемента:
p:first-child { color: blue; }
В следующем примере селектор соответствует первому элементу <i> внутри всех элементов <p>:
p i:first-child { color: blue; }
В следующем примере селектор соответствует всем элементам <i> внутри элементов <p>, которые являются первыми дочерними элементами другого элемента:
p:first-child i { color: blue; }
Псевдокласс :lang
Псевдокласс :lang позволяет определять особые правила для разных языков.
В следующем примере :lang определяет цитатные символы для элемента <q> с атрибутом lang=»no»:
<html> <head> <style> q:lang(no) { quotes: "~" "~"; } </style> </head> <body> <p>Какой-то текст <q lang="no">Такая-то цитата</q> Какой-то текст.</p> </body> </html>
Другие псевдоклассы
Кроме описанных существуют и другие псевдоклассы, которые могут оказаться весьма полезны при определении стилей HTML элементов:
Псевдокласс Пример Описание
:checked input:checked Выбирает каждый элемент <input> со статусом «включен» (с атрибутом checked)
:disabled input:disabled Выбирает каждый заблокированный элемент <input> (с атрибутом disabled)
:empty p:empty Выбирает все заданные элементы, у которых нет дочерних элементов
:enabled input:enabled Выбирает все доступные элементы <input>
:first-of-type p:first-of-type Выбирает каждый элемент, который является первым дочерним заданным элементом своего родителя
:focus input:focus Выбирает элемент, на который переведен фокус
:in-range input:in-range Выбирает элемент <input> со значением в заданном диапазоне
:invalid input:invalid Выбирает все элементы <input>, значение которых не соответствует указанному типу
:last-child p:last-child Выбирает каждый элемент, который является последним дочерним элементом своего родителя
:last-of-type p:last-of-type Выбирает каждый элемент, который является последним дочерним заданным элементом своего родителя
:not(селектор) :not(p) Выбирает каждый элемент, который не является указанным элементом
:nth-child(n) p:nth-child(2) Выбирает каждый элемент, который n-й по счету дочерний элемент своего родителя
:nth-last-child(n) p:nth-last-child(2) Выбирает каждый элемент, который n-й по счету дочерний элемент своего родителя, считая от последнего дочернего элемента
:nth-last-of-type(n) p:nth-last-of-type(2) Выбирает каждый элемент, который n-й по счету дочерний заданный элемент своего родителя, считая от последнего дочернего элемента
:nth-of-type(n) p:nth-of-type(2) Выбирает каждый элемент, который n-й по счету дочерний заданный элемент своего родителя
:only-of-type p:only-of-type Выбирает каждый элемент, который является единственным элементом такого типа у своего родителя
:only-child p:only-child Выбирает каждый элемент, который является единственным дочерним элементом у своего родителя
:optional input:optional Выбирает элементы формы без атрибута «required»
:out-of-range input:out-of-range Выбирает элементы <input>, значения которых выходят за пределы заданного диапазона
:read-only input:read-only Выбирает элементы формы с атрибутом «readonly»
:read-write input:read-write Выбирает элементы формы без атрибута «readonly»
:required input:required Выбирает элементы формы с атрибутом «required»
:root root Выбирает корневой элемент документа
:target #news:target Выбирает текущий активный элемент (у которого было нажато на URL, содержащее это имя анкора)
:valid input:valid Выбирает все элементы <input> с вылидным значением
Псевдоклассы | Основы верстки контента
Зарегистрируйтесь для доступа к 15+ бесплатным курсам по программированию с тренажером
Псевдоклассы — краеугольный камень использования селекторов. Для начала определим, почему же такие селекторы имеют название псевдо. Псевдоклассами не выбирается элемент напрямую. Они указывают на какое-либо состояние элемента. Достаточно просто показать это на примере ссылок.
<a href="#">Обычная гиперссылка</a>
Что мы можем сказать об этом элементе? Это элемент HTML со стандартными стилями и возможностью переадресовать пользователя. Если попробовать перейти по ссылке, то случится целых 3 события!
Наведение на ссылку.
Момент клика по ссылке. Этот момент наступает при нажатии основной кнопки мыши, но до ее отпускания.
Браузер автоматически помечает ссылку, по которой мы уже переходили.
Есть еще одно событие, которое обрабатывает ссылка — событие фокуса. Оно возникает при переходе на ссылку с помощью клавиатуры.
Добейтесь воспроизведения всех событий и посмотрите, как будет меняться взаимодействие:
При наведении на ссылку изменится тип курсора мыши.
При нажатии основной клавиши мыши ссылка поменяет свой цвет.
При отпускании основной клавиши мыши ссылка еще раз поменяет цвет, указывая на то, что пользователь уже совершал переход по ней.
Нажмите клавишу Tab. Так вы увидите состояние фокуса, при котором вокруг ссылки появятся границы.
Можем ли мы, как разработчики, контролировать это поведение? Конечно да! В этом и кроется сила псевдоклассов — они позволяют задавать стили не напрямую для элементов, а для их состояний или для некоторых других условий.
Псевдоклассы имеют специальный синтаксис, который позволяет легко отличить их от других селекторов. Записываются они так: селектор:псевдокласс. Разберемся на примере.
Для стилизации элемента при наведении используется псевдокласс :hover. Стили, указанные в таком селекторе, будут применяться только при наведении на элемент и удаляться при снятии состояния. Попробуем стилизовать стили ссылки при наведении.
a:hover { color: #2196f3; text-decoration: none; }
Самое невероятное, что можно комбинировать уже изученные селекторы. Представьте, что при наведении на один элемент будет меняться совершенно другой! Помните про смежные и родственные селекторы? Никто не запрещает комбинировать их и получать интересные стили.
Для других состояний так же существуют свои псевдоклассы.
:active — Стиль при нажатии на ссылку, но до перехода по ней.
:visited — Стиль уже посещенной ссылки.
:focus — Стиль при событии фокуса на элементе.
Обратите внимание, что все эти псевдоклассы могут работать не только для ссылок. Не бойтесь экспериментировать 🙂
Структурные псевдоклассы
К структурным псевдоклассам можно отнести те, которые добавляют стили к элементу в зависимости от его месторасположения внутри HTML. Это мощное средство, позволяющее добиться сложных стилей без использования большого количества классов.
Основным структурным псевдоклассом является :nth-child(условие). Вы можете увидеть, что это целая функция, которая принимает условие, по которому будет выбран элемент или элементы. Разберемся, какие значения она может принимать и какие элементы будут выбраны.
Самое простое — указать конкретный элемент, который нужен. Для этого достаточно указать порядковый номер элемента. Обратите внимание, что элементы должны быть потомками одного родителя и выбираться по одному селектору.
<section> <p>Параграф 1</p> <p>Параграф 2</p> <p>Параграф 3</p> </section>
section p:nth-child(2) { color: #2196f3; }
Помимо прямого выбора элемента, можно передать специальные последовательности, которые смогут выбрать не один, а сразу несколько элементов.
:nth-child(2n) — выбрать каждый второй элемент. 2, 4, 6, 8… Число может стоять любое. Если поставить 3n, то будет выбран каждый третий элемент и так далее. Это касается всех последовательностей.
:nth-child(2n + 1) — выбрать каждый второй элемент, начиная c первого. 1, 3, 5, 7, 9…
:nth-child(even) — выбрать все четные элементы. То же самое, что и :nth-child(2n).
:nth-child(odd) — выбрать все нечетные элементы. То же самое, что и :nth-child(2n + 1).
Похожим псевдоклассом является :nth-of-type(условие). Попробуйте в примере выше заменить nth-child и результат останется тем же. Но зачем нужен еще один псевдокласс с тем же функционалом?
Приглядитесь внимательно. В случае с nth-child отсчет элементов начался с четного элемента. Но ведь 1 — это нечетное число. Вы будете правы с точки зрения математики, но не логики работы nth-child. Он выбрал все элементы и, при этом, учитывал на какой позиции они находятся относительно других элементов в блоке. По этой причине элементы 4 и 5 являются нечетными, хотя и идут подряд. Логика работы следующая:
Первый элемент внутри блока — h3. Он стоит на нечетной позиции относительно всех элементов внутри родителя.
Элементы 1 и 3 являются четными, так как внутри родителя являются вторым и четвертым элементом соответственно.
Элементы 2 и 4 являются нечетными, так как внутри родителя являются третьим и пятым элементом.
Заголовок «Вторая часть цифр» — четный элемент внутри родителя.
Элемент 5 теперь тоже нечетный, так как идет после четного заголовка.
Псевдокласс nth-of-type распознает не только позицию элемента, но и его тип. В нашем случае для этого селектора не существует заголовков. Выборка идет только по элементам <div> вне зависимости от того, какие еще элементы находятся внутри родителя.
Не всегда есть потребность использовать такие сложные псевдоклассы. Для некоторых стандартных ситуаций существуют специальные псевдоклассы:
:first-child — выбирает первый элемент внутри родителя.
:last-child — выбирает последний элемент внутри родителя.
Псевдоклассы CSS
❮ Предыдущая Далее ❯
Что такое псевдоклассы?
Псевдокласс используется для определения специального состояния элемента.
Например, его можно использовать для:
стилизации элемента при наведении на него указателя мыши
Стиль посещенных и непосещенных ссылок по-разному
Стиль элемента, когда он получает фокус
Mouse Over Me
Синтаксис
Синтаксис псевдоклассов:
селектор: псевдокласс {
  свойство: значение;
}
Anchor Псевдоклассы
Ссылки могут отображаться по-разному:
Пример
/* непросмотренная ссылка */
a:link {
color: #FF0000;
}
/* посещено ссылка */
a:visited {
color: #00FF00;
}
/* указатель мыши над ссылкой */
a:hover {
  color: #FF00FF;
}
/* выбранная ссылка */
a:active {
  color: #0000FF;
}
Попробуйте сами »
Примечание: a:hover ДОЛЖЕН идти после a:link и a: посетил в определении CSS, чтобы быть эффективным! a:active ДОЛЖЕН идти после a: наведите курсор на в определении CSS, чтобы быть эффективным! Имена псевдоклассов не чувствительны к регистру.
Псевдоклассы и HTML-классы
Псевдо-классы можно комбинировать с HTML-классами:
При наведении курсора на ссылку в примере она меняет цвет:
Пример
a.highlight:hover {
  color: #ff0000;
}
Попробуйте сами »
Наведите курсор на
Пример использования псевдокласса :hover на элементе
:
Пример
div-2color background : синий;
}
Попробуйте сами »
Простая всплывающая подсказка
Наведите указатель мыши на элемент
, чтобы отобразить элемент
(например, всплывающую подсказку):
Наведите на меня курсор, чтобы отобразить элемент
.
Тада! А вот и я!
Пример
p {
отображение: нет;
цвет фона: желтый;
отступ: 20 пикселей;
}
div:hover p {
display: block;
}
Попробуйте сами »
CSS — Псевдокласс :first-child
Псевдокласс :first-child соответствует указанному элементу, который является первым потомком другого элемента.
Соответствует первому элементу
В следующем примере селектор соответствует любому элементу
, который является первым дочерним элементом любого элемента:
Пример
p:first-child {
цвет синий;
}
Попробуйте сами »
Соответствует первому элементу
во всех элементах
В следующем примере селектор соответствует первому элементу во всех элементах
:
Пример
p i: первый ребенок {
цвет синий;
}
Попробуйте сами »
Соответствует всем элементам
во всех первых дочерних элементах
В следующем примере селектор соответствует всем элементам в элементах
, которые являются первыми дочерними элементами другого элемента:
Пример
p:first-child i {
  цвет: синий;
}
Попробуйте сами »
CSS — Псевдокласс :lang
:lang 9Псевдокласс 0064 позволяет вам определять специальные правила для разных языков.
В приведенном ниже примере :lang определяет кавычки для элементов с lang="no":
Пример
Некоторый текст Цитата в абзаце Немного текста.
Попробуйте сами »
Дополнительные примеры
Добавление различных стилей к гиперссылкам В этом примере показано, как добавить другие стили к гиперссылкам.
Использование :focus В этом примере показано, как использовать псевдокласс :focus.
Проверьте себя с помощью упражнений
Упражнение:
Установите красный цвет фона при наведении указателя мыши на ссылку.
<стиль> { цвет фона: красный; } <тело> Это заголовок. Это абзац. com">Это ссылка.
Начать упражнение
Все псевдоклассы CSS
Селектор Пример Пример описания
:активный а:активный Выбирает активную ссылку
:проверено ввод:проверено Выбирает каждый проверенный элемент
: отключено ввод: отключен Выбирает каждый отключенный элемент
:пусто р:пусто Выбирает каждый элемент
, у которого нет дочерних элементов
: включено ввод: включен Выбирает каждый включенный элемент
:первый ребенок р: первый ребенок Выбирает все элементы
, которые являются первыми дочерними элементами своего родителя
:первый тип p: первый в своем роде Выбирает каждый элемент
, который является первым элементом
своего родителя
:фокус ввод:фокус Выбирает элемент с фокусом
:наведение а: зависание Выбирает ссылки при наведении мыши
:в диапазоне ввод: в диапазоне Выбирает элементы со значением в указанном диапазоне
: неверный ввод: неверный Выбирает все элементы с недопустимым значением
:язык( язык ) p:язык(ит) Выбирает каждый элемент
со значением атрибута lang, начинающимся с "it"
:последний ребенок p:последний ребенок Выбирает все элементы
, которые являются последними дочерними элементами своего родителя
:последний тип p:последний тип Выбирает каждый элемент
, который является последним элементом
своего родителя
: ссылка а: ссылка Выбирает все непросмотренные ссылки
:нет (селектор) :не (р) Выбирает каждый элемент, который не является элементом
:n-й ребенок (n) p:n-й ребенок(2) Выбирает каждый элемент
, который является вторым дочерним элементом своего родителя
: n-последний ребенок (n) p:n-последний-потомок(2) Выбирает каждый элемент
, который является вторым дочерним элементом своего родителя, считая от последнего дочернего элемента
:n-последний тип(n) p:n-последний тип(2) Выбирает каждый элемент
, который является вторым элементом
своего родителя, считая от последнего дочернего элемента
:n-й тип(n) p:n-й тип(2) Выбирает каждый элемент
, который является вторым элементом
своего родителя
:только тип p: только тип Выбирает каждый элемент
, который является единственным элементом
своего родителя
: единственный ребенок p: единственный ребенок Выбирает каждый элемент
, который является единственным потомком своего родителя
: опционально ввод: опционально Выбирает элементы без обязательного атрибута
:вне диапазона ввод: вне диапазона Выбирает элементы со значением вне указанного диапазона
: только для чтения ввод: только для чтения Выбирает элементы с указанным атрибутом "только для чтения"
: чтение-запись ввод: чтение-запись Выбирает элементы без атрибута "только для чтения"
: требуется ввод: требуется Выбирает элементы с указанным обязательным атрибутом
: корень корень Выбирает корневой элемент документа
: цель #новости:цель Выбирает текущий активный элемент #news (щелчок по URL-адресу, содержащему это имя привязки)
: действительный ввод: действительный Выбирает все элементы с допустимым значением
:посетили а: посетил Выбирает все посещенные ссылки
Все псевдоэлементы CSS
Селектор Пример Пример описания
::после р::после Вставлять содержимое после каждого элемента
::до р::до Вставить содержимое перед каждым элементом
:: первая буква p:: первая буква Выбирает первую букву каждого элемента
:: первая линия p::первая строка Выбирает первую строку каждого элемента
:: выбор p::выбор Выбирает часть элемента, выбранную пользователем
❮ Предыдущий Далее ❯
НОВИНКА Мы только что запустили Видео W3Schools Узнать ВЫБОР ЦВЕТА КОД ИГРЫ Играть в игру Top Tutorials Учебное пособие по HTML Учебное пособие по CSS Учебное пособие по JavaScript Учебное пособие Учебное пособие по SQL Учебное пособие по Python Учебное пособие по W3. CSS Учебное пособие по Bootstrap Учебник по PHP Учебник по Java Учебник по C++ Учебник по jQuery Лучшие ссылки Справочник по HTML Справочник по CSS Справочник по JavaScript Справочник по SQL Справочник по Python Справочник по W3.CSS Справочник по Bootstrap Справочник по PHP Цвета HTML Справочник по Java Справочник по Angular Справочник по jQuery Top3 Examples Примеры HTML Примеры CSS Примеры JavaScript Как сделать Примеры Примеры SQL Примеры Python Примеры W3.CSS Примеры Bootstrap Примеры PHP Примеры Java Примеры XML Примеры jQuery FORUM | О W3Schools оптимизирован для обучения и обучения. Примеры могут быть упрощены для улучшения чтения и обучения. Учебники, ссылки и примеры постоянно пересматриваются, чтобы избежать ошибок, но мы не можем гарантировать полную правильность всего содержания. Используя W3Schools, вы соглашаетесь прочитать и принять наши условия использования, куки-файлы и политика конфиденциальности. Copyright 1999-2022 Refsnes Data. Все права защищены. W3Schools использует W3.CSS. :активный | Коддропс :active — это псевдокласс CSS . Он задает и выбирает элемент на основе состояния — активного состояния — и используется для применения стилей к элементу, когда он соответствует этому состоянию. Псевдокласс :active — это динамический класс, который применяется, когда элемент активируется пользователем. Он часто используется для таргетинга и стиля элемента, когда он равен 9.0630 активен (как следует из названия). В частности, он нацелен на элемент (обычно это якорная ссылка ) между моментом нажатия на него и временем его отпускания. Стилизация элемента в его активном состоянии позволяет улучшить взаимодействие с пользователем, поскольку страница будет давать обратную связь пользователю при нажатии на элемент. Без такого рода обратной связи пользователь может предположить, что его действие было неудачным, поскольку у него не будет визуальных подсказок, подтверждающих, был ли щелчок успешным, и в конечном итоге он может щелкнуть элемент несколько раз подряд. Псевдокласс :active в основном используется для стилизации якорных ссылок, но его также можно использовать для стилизации любого другого элемента на странице, даже корневого элемента ( html ). Например, в следующем примере ко всем абзацам текста при щелчке будет применен светло-серый фон: р: активный { цвет фона: #ааа; } Когда : активен используется для стилизации ссылок, предпочтительно, чтобы он использовался вместе с тремя другими псевдоклассами, которые также используются для стилизации различных состояний ссылок: :link , :visited и :hover . Обратитесь к отдельным записям каждого из псевдоклассов для получения дополнительной информации и примеров. Общая информация и заметки Элемент может быть как :visited , так и :active (или :link 9).0064 и : активный ). Когда используются четыре псевдокласса стиля ссылок, они предпочтительно используются в следующем порядке: :ссылка , :visited , :hover и :active . Например: ссылка { /* стили ссылок */ } а: посетил { /* стиль посещенной ссылки */ } а: наведите { /* стили наведения */ } а: активный { /* стили активного состояния */ } Приведенный выше порядок можно легко запомнить, используя мнемоники типа « L ast V intage H at A доступный». Вы можете создать свой собственный на spacefm.com. Этот порядок предпочтителен, потому что в противном случае некоторые стили состояния могут переопределить другие стили состояния, что приведет к тому, что они не будут работать должным образом. Например, если бы вы стилизовали состояние :visited последним, оно переопределило бы состояние 9.0063 :hover и :active состояния ссылки, а стили :visited будут применяться независимо от того, происходит ли наведение или щелчок по ссылке. В дополнение к четырем упомянутым состояниям вы можете (читай: должны, для лучшей доступности) также стилизовать ссылки, когда они находятся в фокусе. Для этого используется псевдокласс :focus . А чтобы запомнить порядок, вы можете добавить «мех» между предыдущим предложением: « L ast V intage F ur H at A в наличии». Подробнее о псевдоклассе :focus можно прочитать в его статье. В системах с более чем одной кнопкой мыши :active применяется только к основной кнопке активации (обычно «левой» кнопке мыши) и любым ее псевдонимам. Примеры Следующее устанавливает :active стили состояния для якорных ссылок и других элементов на веб-странице. Вы можете применять любые стили к состояниям :active . а: активный { цвет фона: черный; белый цвет; } р: активный { граница: 2 пикселя с точками BlanchedAlmond; } тело: активный { граница: сплошная 5px } Живая демонстрация Посмотреть эту демонстрацию на игровой площадке Codrops Поддержка браузера Поддержка псевдокласса :active зависит от элемента, к которому он применяется. Применение :active к элементу привязки поддерживается во всех основных браузерах: Chrome, Firefox, Safari, Opera, Internet Explorer, а также на Android и iOS. Применение :active к любому элементу на странице поддерживается в: Chrome, Firefox, Opera, Internet Explorer 8+ и на Android. Дополнительная литература Модуль CSS-селекторов Модуль CSS-селекторов, уровень 3 Автор Сара Суэйдан. Последнее обновление: Мэри Лу, 3 февраля 2015 г., 12:34. У вас есть предложение, вопрос или вы хотите внести свой вклад? Отправить вопрос. CSS: активный псевдокласс, узнайте об этом с Career Karma При разработке веб-сайта может потребоваться применить стиль к элементу, когда он активируется пользователем. Например, вы можете захотеть, чтобы цвет кнопки или ссылки менялся, когда пользователь нажимает кнопку или ссылку. Вот тут-то и появляется псевдокласс CSS :active. Псевдокласс :active позволяет вам выбирать элементы, которые были активированы пользователем, к которым вы затем можете применить стили. В этом руководстве на примерах обсуждаются основы псевдоклассов CSS и то, как вы можете использовать псевдокласс :active в своем коде. К концу чтения этого руководства вы станете экспертом в использовании псевдокласса :active. Найдите свой матч для буткемпа Career Karma подберет для вас лучшие учебные курсы по технологиям Получите доступ к эксклюзивным стипендиям и подготовительным курсам Выберите свой интерес Программная инженерия Дизайн Наука о данных Аналитика данных Продажи Кибербезопасность Цифровой маркетинг Имя Фамилия Эл. адрес Номер телефона Продолжая, вы соглашаетесь с нашими условия обслуживания а также Политика конфиденциальности , и вы соглашаетесь получать предложения и возможности от Career Karma по телефону, текстовым сообщениям и электронной почте. Псевдоклассы CSS В CSS селекторы используются для выбора элементов, к которым следует применить стиль или набор стилей. Например, селектор может выбрать все теги или Использование модификаторов для такого рода вещей может уменьшить количество условной логики в ваших шаблонах, позволяя вам использовать один и тот же набор классов независимо от того, в каком состоянии находится ввод, и позволяя браузеру применять правильные стили для вас. . Попутный ветер также включает модификаторы для других состояний формы, таких как :только чтение , :неопределенный , :проверено и другие. Полный список доступных модификаторов псевдокласса см. в справочнике по псевдоклассу. Стили, основанные на родительском состоянии (группа-{модификатор}) Когда вам нужно стилизовать элемент на основе состояния какого-либо родительского элемента , пометьте родительский элемент классом group и используйте group-* модификаторы, такие как group-hover для стилизации целевого элемента: Наведите указатель мыши на карточку, чтобы увидеть, как оба текстовых элемента меняют цвет Новый проект Создайте новый проект из множества начальных шаблонов. <дел> Новый проект
Создайте новый проект из множества начальных шаблонов. Этот шаблон работает с любым модификатором псевдокласса, например, group-focus , group-active или даже group-odd . Стили, основанные на состоянии родственного элемента (peer-{modifier}) Когда вам нужно стилизовать элемент на основе состояния родственного элемента , пометьте родственного элемента одноранговым классом и используйте Модификаторы peer-* , такие как peer-invalid для стилизации целевого элемента: Попробуйте сделать адрес электронной почты действительным, чтобы предупреждение исчезло <метка> Электронная почта Пожалуйста, представьте действующий адрес электронной почты. Это позволяет делать всевозможные изящные трюки, такие как плавающие метки, например, без использования JS. Этот шаблон работает с любым модификатором псевдокласса, например peer-focus , одноранговый требуется и одноранговый отключен . Важно отметить, что маркер однорангового узла может использоваться только на предыдущих родственных элементах из-за того, как работает общий комбинатор родственных элементов в CSS. Не работает, только предыдущие братья и сестры могут быть отмечены как одноранговые Электронная почта Псевдоэлементы До и после Стиль ::before и ::after псевдоэлементы с использованием модификаторов before и after : <диапазон> Эл. адрес com" /> При использовании этих модификаторов Tailwind автоматически добавит содержимое : '' по умолчанию, поэтому вам не нужно указывать его, если вы не хотите другое значение: Когда ты все время выглядишь раздраженным, люди думают, что ты занят. <цитата> когда ты смотришь <диапазон> раздражен все время люди думают, что ты занят. Стоит отметить, что вам не нужны псевдоэлементы ::before и ::after для большинства вещей в проектах Tailwind — обычно проще просто использовать настоящий HTML-элемент. Например, вот тот же дизайн сверху, но с использованием вместо ::before псевдоэлемент, который немного легче читать и на самом деле меньше кода: когда ты смотришь <диапазон> раздражен все время люди думают, что ты занят. Сохраните перед и после для ситуаций, когда важно, чтобы содержимое псевдоэлемента фактически не было в DOM и не могло быть выбрано пользователем. Обратите внимание, что если вы отключили наши базовые стили предварительной проверки, свойство содержимого не будет установлено в пустую строку по умолчанию, и вам нужно будет включать content-[''] каждый раз, когда вы используете до . и после модификаторов . Если вы отключили предварительную проверку, обязательно установите содержимое вручную Текст-заполнитель Стиль текста-заполнителя любого ввода или текстовой области с помощью заполнитель модификатор: Поиск <метка> Поиск <диапазон> .." type="text" name="search"/> Кнопки ввода файлов Стиль кнопки ввода файлов с использованием модификатора file : Выбрать фото профиля <форма> <дел>
Обратите внимание, что сброс границ Tailwind не применяется к кнопкам ввода файлов. Это означает, что для добавления рамки к кнопке ввода файла вам необходимо явно установить стиль рамки, используя класс, подобный 9.0063 file:border-solid рядом с любой утилитой border-width:

Маркеры списков
Стиль счетчиков или маркеров в списках с использованием модификатора маркер :
Ингредиенты
5 чашек нарезанных белых грибов
1/2 стакана оливкового масла
3 фунта сельдерея

5 стаканов нарезанных белых грибов

1/2 стакана оливкового масла

3 фунта сельдерея

5 стаканов нарезанных белых грибов 1/2 стакана оливкового масла 3 фунта сельдерея
Мы разработали модификатор marker с возможностью наследования, поэтому, хотя вы можете использовать его непосредственно на элементе
, вы также можете использовать его на родительском элементе, чтобы не повторяться.
Выделенный текст
Стиль выделения активного текста с использованием выделения 9Модификатор 0064:
Попробуйте выделить часть этого текста мышью
Так я начал ходить в воду. Я не буду лгать вам, мальчики, я был в ужасе. Но я шел дальше, и когда я пробирался мимо прибоя, на меня снизошло странное спокойствие. Я не знаю, было ли это божественным вмешательством или родством всех живых существ, но скажу тебе, Джерри, в тот момент я был морским биологом.
<дел> Так я начал ходить в воду. Я не буду лгать вам, мальчики, я был испуганный. Но я продолжал, и когда я пробирался мимо бурунов странное спокойствие охватило меня. Я не знаю, было ли это божественным вмешательством или родство всех живых существ, но я скажу тебе Джерри в тот момент, Я был морским биологом.
Мы разработали модификатор selection с возможностью наследования, поэтому вы можете добавить его в любом месте дерева, и он будет применяться ко всем элементам-потомкам.
Это позволяет легко установить цвет выделения в соответствии с вашим брендом на всем сайте:
<голова> <тело>
Первая строка и первая буква
Оформите первую строку в блоке контента с помощью модификатор первой строки и первая буква с использованием модификатора первой буквы :
Что ж, позволь мне сказать тебе кое-что, смешной мальчик. Знаешь эту маленькую марку, на которой написано «Публичная библиотека Нью-Йорка»? Ну, это может ничего не значить для вас, но это много значит для меня. Один чертовски много.
Конечно, давай, смейся, если хочешь. Я уже видел ваш тип: кричащий, устраивающий сцену, щеголяющий условностями. Да, я знаю, о чем ты думаешь. Что это за парень поднимает такую вонь из-за старых библиотечных книг? Что ж, позволь мне дать тебе подсказку, младший.

Что ж, позволь мне сказать тебе кое-что, смешной мальчик. Ты знаешь эту маленькую марку, ту, там написано "Публичная библиотека Нью-Йорка"? Ну, это может ничего не значить для вас, но это много значит для меня. Один чертовски много.
Что ж, позволь мне сказать тебе кое-что, смешной мальчик. Ты знаешь эту маленькую марку, ту, там написано "Публичная библиотека Нью-Йорка"? Ну, это может ничего не значить для вас, но это много значит для меня. Один чертовски много.
Диалоговые фоны
Стилизуйте фон собственного элемента
с помощью модификатора background :
<метод формы="диалог">
Если вы используете собственные элементы
в своем проекте, вы также можете прочитать о стилизации открытых/закрытых состояний с помощью модификатора open .
Медиа-запросы
Отзывчивые точки останова
Чтобы стилизовать элемент в определенной точке останова, используйте адаптивные модификаторы, такие как md и lg .
Например, будет отображаться сетка из 3 столбцов на мобильных устройствах, сетка из 4 столбцов на экранах средней ширины и сетка из 6 столбцов на экранах большой ширины:

Ознакомьтесь с документацией по адаптивному дизайну, чтобы подробно изучить, как работают эти функции.
Предпочитает цветовую схему
предпочитает цветовую схему медиа-запрос сообщает вам, предпочитает ли пользователь светлую или темную тему, и обычно настраивается на уровне операционной системы.
Используйте утилиты без модификатора для выбора светлого режима и используйте модификатор dark для переопределения темного режима:
Светлый режим
Запись вверх ногами
Перо Zero Gravity Pen можно использовать для письма в любой ориентации, в том числе вверх ногами. Он работает даже в открытом космосе.
Темный режим
Запись в перевернутом виде
Перо Zero Gravity Pen можно использовать для письма в любой ориентации, в том числе вверх ногами. Он работает даже в открытом космосе.
<дел> <дел> <диапазон>

Пишет вверх ногами

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

Ознакомьтесь с документацией по темному режиму, чтобы узнать, как работает эта функция.
Предпочитает уменьшенное движение
Медиа-запрос предпочитает уменьшенное движение сообщает вам, попросил ли пользователь свести к минимуму несущественное движение.
Используйте модификатор motion-reduce для условного добавления стилей, когда пользователь запросил уменьшение движения:
Попробуйте эмулировать `prefers-reduced-motion: reduce` в инструментах разработчика, чтобы скрыть счетчик
<тип кнопки = "кнопка" отключена> Обработка...
Попутный ветер также включает модификатор Motion-Safe , который добавляет стили только тогда, когда пользователь , а не запросил уменьшение движения. Это может быть полезно, когда использование помощника motion-reduce означает необходимость «отмены» многих стилей:
<кнопка> Сохранить изменения <кнопка> Сохранить изменения
Предпочитает контраст
Медиа-запрос Prefers-Contrast сообщает вам, запросил ли пользователь больше или меньше контраста.
Используйте модификатор convert-more для условного добавления стилей, когда пользователь запросил больше контраста:
Попробуйте эмулировать `prefers-contrast: more` в инструментах разработчика, чтобы увидеть изменения

<метка> Номер социального страхования <ввод/>
Нам нужно это, чтобы украсть вашу личность.

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

<дел>
<дел>
Этот опыт предназначен для просмотра в пейзаже. Пожалуйста, поверните ваш устройство для просмотра сайта.

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

<статья>
Мой секретный рецепт пиццы

Этот рецепт является секретным, и его нельзя никому передавать
<дел> Вы серьезно пытаетесь это напечатать? Это секрет!

Спецификация	Статус	Комментарий
HTML Living Standard Определение ':active' в этой спецификации.	Уровень жизни
Селекторы уровня 4 Определение ':active' в этой спецификации.	Рабочий проект	Без изменений.
Селекторы уровня 3 Определение ':active' в этой спецификации.	Рекомендация	Без изменений.
CSS уровня 2 (редакция 1) Определение ':active' в этой спецификации.	Рекомендация	Без изменений.
Уровень CSS 1 Определение ':active' в этой спецификации.	Рекомендация	Исходное определение.

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari на iOS	Samsung Internet
`:активный`	Chrome Полная поддержка 1	Край Полная поддержка 12	Firefox Полная поддержка 1	ИЭ Полная поддержка 4	Опера Полная поддержка 5	Сафари Полная поддержка 1	Веб-просмотр Android Полная поддержка 1	Хром Android Полная поддержка 18	Firefox Android Полная поддержка 4	Opera Android Полная поддержка 10. 1	Сафари iOS Полная поддержка 1	Samsung Интернет Android Полная поддержка 1.0
Не- `поддержка элемента`	Хром Полная поддержка 1	Край Полная поддержка 12	Firefox Полная поддержка 1	ИЭ Полная поддержка 8	Опера Полная поддержка 7	Сафари Полная поддержка 1	Веб-просмотр Android Полная поддержка 1	Хром Android Полная поддержка 18	Firefox Android Полная поддержка 4	Опера Android Полная поддержка 14	Сафари iOS Полная поддержка 1 Примечания Полная поддержка 1 Notes Notes По умолчанию Safari на iOS не использует состояние `:active` , если нет `touchstart 9обработчик события 0064 на соответствующем элементе или на элементе .`	Самсунг Интернет Android Полная поддержка 1.0

Псевдокласс	Пример	Описание
:checked	input:checked	Выбирает каждый элемент <input> со статусом «включен» (с атрибутом checked)
:disabled	input:disabled	Выбирает каждый заблокированный элемент <input> (с атрибутом disabled)
:empty	p:empty	Выбирает все заданные элементы, у которых нет дочерних элементов
:enabled	input:enabled	Выбирает все доступные элементы <input>
:first-of-type	p:first-of-type	Выбирает каждый элемент, который является первым дочерним заданным элементом своего родителя
:focus	input:focus	Выбирает элемент, на который переведен фокус
:in-range	input:in-range	Выбирает элемент <input> со значением в заданном диапазоне
:invalid	input:invalid	Выбирает все элементы <input>, значение которых не соответствует указанному типу
:last-child	p:last-child	Выбирает каждый элемент, который является последним дочерним элементом своего родителя
:last-of-type	p:last-of-type	Выбирает каждый элемент, который является последним дочерним заданным элементом своего родителя
:not(селектор)	:not(p)	Выбирает каждый элемент, который не является указанным элементом
:nth-child(n)	p:nth-child(2)	Выбирает каждый элемент, который n-й по счету дочерний элемент своего родителя
:nth-last-child(n)	p:nth-last-child(2)	Выбирает каждый элемент, который n-й по счету дочерний элемент своего родителя, считая от последнего дочернего элемента
:nth-last-of-type(n)	p:nth-last-of-type(2)	Выбирает каждый элемент, который n-й по счету дочерний заданный элемент своего родителя, считая от последнего дочернего элемента
:nth-of-type(n)	p:nth-of-type(2)	Выбирает каждый элемент, который n-й по счету дочерний заданный элемент своего родителя
:only-of-type	p:only-of-type	Выбирает каждый элемент, который является единственным элементом такого типа у своего родителя
:only-child	p:only-child	Выбирает каждый элемент, который является единственным дочерним элементом у своего родителя
:optional	input:optional	Выбирает элементы формы без атрибута «required»
:out-of-range	input:out-of-range	Выбирает элементы <input>, значения которых выходят за пределы заданного диапазона
:read-only	input:read-only	Выбирает элементы формы с атрибутом «readonly»
:read-write	input:read-write	Выбирает элементы формы без атрибута «readonly»
:required	input:required	Выбирает элементы формы с атрибутом «required»
:root	root	Выбирает корневой элемент документа
:target	#news:target	Выбирает текущий активный элемент (у которого было нажато на URL, содержащее это имя анкора)
:valid	input:valid	Выбирает все элементы <input> с вылидным значением

Селектор	Пример	Пример описания
:активный	а:активный	Выбирает активную ссылку
:проверено	ввод:проверено	Выбирает каждый проверенный элемент
: отключено	ввод: отключен	Выбирает каждый отключенный элемент
:пусто	р:пусто	Выбирает каждый элемент , у которого нет дочерних элементов
: включено	ввод: включен	Выбирает каждый включенный элемент
:первый ребенок	р: первый ребенок	Выбирает все элементы , которые являются первыми дочерними элементами своего родителя
:первый тип	p: первый в своем роде	Выбирает каждый элемент , который является первым элементом своего родителя
:фокус	ввод:фокус	Выбирает элемент с фокусом
:наведение	а: зависание	Выбирает ссылки при наведении мыши
:в диапазоне	ввод: в диапазоне	Выбирает элементы со значением в указанном диапазоне
: неверный	ввод: неверный	Выбирает все элементы с недопустимым значением
:язык( язык )	p:язык(ит)	Выбирает каждый элемент со значением атрибута lang, начинающимся с "it"
:последний ребенок	p:последний ребенок	Выбирает все элементы , которые являются последними дочерними элементами своего родителя
:последний тип	p:последний тип	Выбирает каждый элемент , который является последним элементом своего родителя
: ссылка	а: ссылка	Выбирает все непросмотренные ссылки
:нет (селектор)	:не (р)	Выбирает каждый элемент, который не является элементом
:n-й ребенок (n)	p:n-й ребенок(2)	Выбирает каждый элемент , который является вторым дочерним элементом своего родителя
: n-последний ребенок (n)	p:n-последний-потомок(2)	Выбирает каждый элемент , который является вторым дочерним элементом своего родителя, считая от последнего дочернего элемента
:n-последний тип(n)	p:n-последний тип(2)	Выбирает каждый элемент , который является вторым элементом своего родителя, считая от последнего дочернего элемента
:n-й тип(n)	p:n-й тип(2)	Выбирает каждый элемент , который является вторым элементом своего родителя
:только тип	p: только тип	Выбирает каждый элемент , который является единственным элементом своего родителя
: единственный ребенок	p: единственный ребенок	Выбирает каждый элемент , который является единственным потомком своего родителя
: опционально	ввод: опционально	Выбирает элементы без обязательного атрибута
:вне диапазона	ввод: вне диапазона	Выбирает элементы со значением вне указанного диапазона
: только для чтения	ввод: только для чтения	Выбирает элементы с указанным атрибутом "только для чтения"
: чтение-запись	ввод: чтение-запись	Выбирает элементы без атрибута "только для чтения"
: требуется	ввод: требуется	Выбирает элементы с указанным обязательным атрибутом
: корень	корень	Выбирает корневой элемент документа
: цель	#новости:цель	Выбирает текущий активный элемент #news (щелчок по URL-адресу, содержащему это имя привязки)
: действительный	ввод: действительный	Выбирает все элементы с допустимым значением
:посетили	а: посетил	Выбирает все посещенные ссылки

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

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

Псевдокласс :active | CSS | WebReference

Синтаксис

Обозначения

Пример

Примечание

Спецификация

Спецификация

Браузеры

Браузеры

См. также

Рецепты

Практика

Автор и редакторы

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

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

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

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

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

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

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

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

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

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

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

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

Вывод

Псевдоклассы. Учебник CSS.