Псевдокласс :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)
1 year ago | 10. 2K
Всем приветствую, с вами Сергей Никонов и в этой статье я расскажу про псевдоклассы (pseudo classes), псевдоэлементы (pseudo elements) и как с помощью них задавать CSS-стили для вашего сайта. На примерах мы рассмотрим как с работают самые часто используемые псевдоклассы и псевдоэлементы при верстке сайтов.
Это один из уроков курса по верстке веб-сайтов HTML/CSS Advanced и если вы хотите научиться верстать веб-сайты на профессиональном уровне, я рекомендую проходить этот курс на сайте FructCode с интерактивными упражнениями для закрепления ваших знаний полученных из курса верстки сайтов.
Только на сайте FructCode вы можете найти актуальных версии моих курсов!
Содержание
- Что такое псевдоклассы (pseudo classes)
- Псевдокласс :hover
- Псевдокласс :active
- Псевдокласс :focus
- Псевдоклассы :first-child и :last-child
- Псевдоклассы :first-of-type и :last-of-type
- Псевдокласс :nth-child
- Псевдокласс :not
- Что такое псевдоэлементы (pseudo elements)
- Псевдоэлементы ::before и ::after
Что такое псевдоклассы (pseudo classes)
Псевдокласс (pseudo class) — это специальное ключевое слово, которое добавляется к css-селектору (css selector), с помощью которого можно задавать стили для отображения HTML-элементов при различных факторах. К примеру, можно задать CSS-стили для HTML-элемента на который пользователь навел курсор мыши.
Если вы еще не знакомы с понятием CSS-селектор (css selector) и не знаете, что такое CSS-селекторы (css selectors), прочитайте об этом статью или посмотрите видеоурок из курса HTML/CSS Advanced, а для закрепления ваших знаний, пройдите интерактивные упражнения.
Псевдоклассы задаются через двоеточие “:”, далее идет название псевдокласса, например, так задается псевдокласс :hover для HTML-тега <a>: a:hover {…}.
Смотрите видео «Что такое псевдоклассы(pseudo classes) и псевдоэлементы(pseudo elements)»
Подпишитесь на YouTube канал FructCode, чтобы не пропустить полезные видео!
Псевдокласс :hover
Псевдокласс :hover позволяет задавать CSS-стили при наведении курсора мыши на HTML-элемент.
Посмотрите на этот пример. Наведите курсор мыши на ссылку Link и вы увидите, что цвет ссылки, при наведении на него курсора мыши, изменился на цвет “brown”:
Псевдокласс :active
С помощью псевдокласса :active мы можем задавать CSS-стили в момент клика на HTML-элемент мышью.
Посмотрите пример ниже. Наведите курсор мыши на надпись Link, затем нажмите левой кнопкой мыши на надпись Link и не отпускайте кнопку мыши. Вы увидите, что ссылка в момент клика мышью стала зеленого цвета:
Псевдоклассы :hover и :active работают не только с HTML-тегом <a>. Вы можете заменить в CSS-стилях “a” на любой другой HTML-тег или название классы и стили применятся к этому HTML-элементу.
Псевдокласс :focus
Псевдокласс :focus позволяет задавать стили для HTML-тегов таких как <input>, <textarea>, <checkbox> и других при установке курсора мыши в этот элемент.
Посмотрите пример ниже с HTML-формой. Если вы установите курсор мыши в поле <input>, фоновый цвет поля изменится:
Псевдоклассы :first-child и :last-child
С помощью псевдокласса :first-child вы можете задавать стили для первого HTML-элемента, который является первым у своего родителя (parent).
Чтобы было проще понять как работает :first-child, посмотрите пример ниже. В маркированном списке выделяется цветом первый элемент <li>, а его родителем (parent) является тег <ul>:
А с помощью псевдокласса :last-child вы можете задавать CSS-стили для последнего HTML-элемента.
Посмотрите пример ниже. Благодаря псевдоклассу :last-child выделяется цветом последний HTML-элемент <li> в маркированном списке:
Кстати, если вы еще не знаете, что такое маркированные списки (html теги <ul> <li>), которые используются в этих примерах или что такое нумерованные списки (html теги <ol> <li>), посмотрите этот видеоурок из курса HTML/CSS Advanced.
Как я говорил ранее, для того, чтобы применялись стили к HTML-элементу, заданных с помощью псевдоклассов :first-child и :last-child, у элемента должен быть родитель (parent). Если родитель отсутствует, тогда стили не сработают.
Посмотрите пример ниже. У тега <span> есть родительский тег <div> и стили с :first-child работают, а для <span> без родительского тега :first-child и :last-child не будут работать:
Обратите внимание, что в текущей спецификации Selectors Level 3, при использовании псевдоклассов :first-child и :last-child элемент должен иметь родителя (parent), чтобы сработали css-стили. В новой разрабатываемой версии спецификации Selectors Level 4 для срабатывания стилей заданных с помощью :first-child, :last-child, элемент может не иметь родителя.
Псевдоклассы :first-of-type и :last-of-type
С помощью псевдоклассов :first-of-type и :last-of-type можно задавать стили для первого и последнего потомка (child) соответсвенно своего типа среди детей (child) его родителя (parent).
Определение звучит сложно и не очень понятно. Поэтому лучше сразу перейти к примерам, чтобы вы быстро поняли как работают псевдоклассы :first-of-type и :last-of-type.
В этом примере, с помощью псевдокласса :first-of-type можно выделить цветом все первые элементы <li> в маркированном списке с текстом “First”:
Точно такой же результат вы можете получить и с помощью псевдокласса :first-child, но не сможете выделить все последние элементы маркированного списка с надписью Third во всех вложенностях с помощью :last-child, зато такой результат вы сможете получить с помощью псевдокласса :last-of-type:
Псевдокласс :nth-child
С помощью псевдокласса :nth-child вы можете задавать стили для одного или более HTML-элементов, которые будут основываться на их позиции среди HTML-элементов соседей.
Звучит сложно и непонятно, согласен. Но не будем отчаиваться и очень быстро все поймем на примерах ниже.
Например, в нашем любимом маркированном списке мы хотим выделить цветом какой-то определенный элемент <li> под номером три. Для этого в CSS-стилях нам достаточно добавить псевдокласс :nth-child к <li> вот таким образом: li:nth-child(3) и в результате мы сделаем то, что хотели:
Но этим возможности псевдокласса :nth-child не ограничиваются и мы можем выделить все нечетные HTML-элементы <li> из нашего маркированного списка, написав несколько символов кода: li:nth-child(odd). Ключевое слово “odd” внутри скобок псевдокласса :nth-child как раз задает этот правило:
А с помощью ключевого слова even внутри скобок псевдокласса :nth-child мы можем наоборот выделить цветом все четные HTML-элементы <li> из нашего маркированного списка:
И на этом возможности псевдокласса :nth-child не заканчиваются и мы можем писать даже сложные правила выборки HTML-элементов к которым применить CSS-стили с помощью формул. Об этом вы можете прочитать в документации к псевдоклассу :nth-child.
Псевдокласс :not
С помощью псевдокласса :not вы можете задать CSS-стили для которые не будут соответствовать заданному селектору.
Простыми словами, вы можете в псевдокласс :not, в его скобки, указать любой класс или элемент и CSS-стили будут заданы всем соседям данного элемента, кроме него самого.
Если все еще непонятно, что такое псевдокласс :not, вот вам наглядный пример, с моим любимым маркированным списком. В четвертый HTML-элемент <li> мы задали класс .not-color и задали стили для <li>, указав в скобках название класса — :not(.not-color). И в результате у нас окрашиваются все другие элементы <li>, кроме <li> с классом .not-color:
И если вы переместите класс .not-color соседний <li>, выше или ниже, будут закрашиваться цветом все <li>, кроме <li> с классом .not-color.
Что такое псевдоэлементы (pseudo elements)
Псевдоэлемент (pseudo element) — это это специальное ключевое слово, которое добавляется к css-селектору и позволяет задавать стили для части выбранного HTML-элемента.
Псевдоэлементы ::before и ::after
Псевдоэлементы ::before и ::after используются очень часто при верстке сайтов на профессиональном уровне.
Суть этих псевдоэлементов очень простая: С помощью псевдоэлемента ::before вы можете присоединить к существующему HTML-тегу какой-то контент ДО этого HTML-элемента, а с помощью псевдоэлемента ::after ПОСЛЕ HTML-элемента.
И сразу давайте перейдем к примеру ::before и ::after. У нас есть HTML-тег <p> и в него помещен текст “Have a good day!”. И с помощью псевдоклассов ::before и ::after мы добавляем “сердечки” слева и справа от надписи “Have a good day!”:
Обратите внимание, что в отличии от псевдоклассов, перед псевдоэлементами ставится два двоеточия. Прочитать о других псевдоэлементах вы можете в документации.
Вывод
В этой статье мы рассмотрели самые используемые псевдоклассы и псевдоэлементы, которые используют frontend-разработчики создавая верстку сайтов на профессиональном уровне.
А если вы хотите научиться верстать с нуля до уровня профессионала, я рекомендую пройти мой интерактивный курс HTML/CSS Advanced. Курс HTML/CSS Advanced разделен на две части, на теоретическую часть, где вы познакомитесь с основами HTML и CSS и на практическую часть, где мы будем создавать верстку сайта KinoMonster (КиноМонстер).
Кстати, у меня есть YouTube канал FructCode, где я переодически публикую полезные видео о верстке веб-сайтов и программировании. Подпишитесь на YouTube канал FructCode, чтобы не пропустить полезные видео!
С вами был Сергей Никонов,
Успехов в обучении!
Псевдоклассы. Учебник CSS.
Глава 15
Псевдоклассы — это особые свойства, которые позволяют менять стиль элемента в зависимости от действий пользователя, а так же положения этого элемента (тега) в общем потоке документа, что позволяет разбавить дизайн страницы некой динамикой и логикой. Классическим примером применения псевдоклассов является ссылка, которая меняет свой цвет при наведении на неё курсором.
Вот список всех псевдоклассов:
- hover — Стиль элемента на который наведён курсор мыши.
- active
— Стиль для ссылки которая становится активной, но переход по ней еще не совершен. - visited — Стиль для недавно посещённой ссылки.
- link — Стиль для нечасто посещаемой ссылки.
- focus — Стиль элемента находящегося в фокусе.
- first-child — Стиль первого дочернего элемента.
- lang — Определяет язык, который используется в фрагменте документа.
О каждом псевдоклассе мы отдельно поговорим ниже, а сейчас пару слов о синтаксисе.
Для того чтобы применить тот или иной псевдокласс к элементу и определить его стиль нужно следовать следующим правилам синтаксиса:
a:hover { color:#ff0000}
где:
a — элемент (селектор), а проще тег к которому мы решили применить псевдокласс в нашем случае это ссылка.
:hover — после двоеточия собственно нужный нам псевдокласс.
{color:#ff0000} — ну и блок объявления стилей в фигурных скобках.
А вся эта запись вместе будет говорить о том, что если навести курсором на такую ссылку — то она покраснеет.
Так собственно мы подошли к первому, самому популярному, псевдоклассу 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;
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 селекторы используются для выбора элементов, к которым следует применить стиль или набор стилей. Например, селектор может выбрать все теги
или
Вы также можете стилизовать элемент, если он является нечетным или четным дочерним элементом, используя модификаторы нечетных
и четных
:
Имя | Заголовок | Эл. адрес |
---|---|---|
Джейн Купер | Региональный техник парадигмы | [email protected] |
Коди Фишер | Сотрудник по директивам по продуктам | cody. [email protected] |
Леонард Краснер | Старший дизайнер | [email protected] |
Эмили Селман | вице-президент по аппаратному обеспечению | [email protected] |
Анна Робертс | Директор по стратегии | [email protected] |
<таблица> {#каждый человек как личность}{/каждый} {person. name} {person.title} {person.email}
Tailwind также включает модификаторы для других структурных псевдоклассов, таких как :only-child
, :first-of-type
, :empty
и другие.
Полный список доступных модификаторов псевдокласса см. в справочнике по псевдоклассу.
Состояния формы
Стиль элементов формы в разных состояниях с использованием модификаторов, таких как обязательный
, недопустимый
и отключенный
:
Попробуйте сделать адрес электронной почты действительным, чтобы увидеть изменения стилей
Имя пользователя
Пароль
<форма>
<метка>
Имя пользователя
Использование модификаторов для такого рода вещей может уменьшить количество условной логики в ваших шаблонах, позволяя вам использовать один и тот же набор классов независимо от того, в каком состоянии находится ввод, и позволяя браузеру применять правильные стили для вас. .
Попутный ветер также включает модификаторы для других состояний формы, таких как :только чтение
, :неопределенный
, :проверено
и другие.
Полный список доступных модификаторов псевдокласса см. в справочнике по псевдоклассу.
Стили, основанные на родительском состоянии
(группа-{модификатор}) Когда вам нужно стилизовать элемент на основе состояния какого-либо родительского элемента , пометьте родительский элемент классом group
и используйте group-*
модификаторы, такие как group-hover
для стилизации целевого элемента:
Наведите указатель мыши на карточку, чтобы увидеть, как оба текстовых элемента меняют цвет
Новый проект
Создайте новый проект из множества начальных шаблонов.
<дел>Новый проект
Создайте новый проект из множества начальных шаблонов.
Этот шаблон работает с любым модификатором псевдокласса, например, group-focus
, group-active
или даже group-odd
.
Стили, основанные на состоянии родственного элемента
(peer-{modifier}) Когда вам нужно стилизовать элемент на основе состояния родственного элемента , пометьте родственного элемента одноранговым классом
и используйте Модификаторы peer-*
, такие как peer-invalid
для стилизации целевого элемента:
Попробуйте сделать адрес электронной почты действительным, чтобы предупреждение исчезло
Это позволяет делать всевозможные изящные трюки, такие как плавающие метки, например, без использования JS.
Этот шаблон работает с любым модификатором псевдокласса, например peer-focus
, одноранговый требуется
и одноранговый отключен
.
Важно отметить, что маркер однорангового узла
может использоваться только на предыдущих родственных элементах из-за того, как работает общий комбинатор родственных элементов в CSS.
Не работает, только предыдущие братья и сестры могут быть отмечены как одноранговые
Псевдоэлементы
До и после
Стиль ::before
и ::after
псевдоэлементы с использованием модификаторов before
и after
:
При использовании этих модификаторов 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` в инструментах разработчика, чтобы увидеть изменения
Стили печати
Используйте модификатор print
для условного добавления стилей, которые применяются только при печати документа:
<статья>Мой секретный рецепт пиццы
Этот рецепт является секретным, и его нельзя никому передавать
<дел> Вы серьезно пытаетесь это напечатать? Это секрет!