Псевдокласс :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 только для ссылок.
Спецификация ?
Спецификация
Каждая спецификация проходит несколько стадий одобрения.
- Recommendation (Рекомендация) — спецификация одобрена W3C и рекомендована как стандарт.
- Candidate Recommendation (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
- Proposed Recommendation (Предлагаемая рекомендация) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
- Working Draft (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
- Editor’s draft (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
- Draft (Черновик спецификации) — первая черновая версия стандарта.
Браузеры
В таблице браузеров применяются следующие обозначения.
- — свойство полностью поддерживается браузером со всеми допустимыми значениями;
- — свойство браузером не воспринимается и игнорируется;
- — при работе возможно появление различных ошибок, либо свойство поддерживается лишь частично, например, не все допустимые значения действуют или свойство применяется не ко всем элементам, которые указаны в спецификации.
Число указывает версию браузера, начиная с которой свойство поддерживается.
×Автор и редакторы
Автор: Влад Мержевич
Последнее изменение: 05.09.2017
Редакторы: Влад Мержевич
Кроссбраузерные проблемы псевдокласса :active / Habr
С появлением множества нововведений в технологиях вёрстки веб страниц, у разработчиков появилась возможность отчасти заменить JavaScript, применяя HTML/CSS для большей производительности и расширяемости интерфейса своих порталов.
Задача
Кроссбраузерно декорировать потомка активного элемента (родителя), с возможностью активировать родителя кликом на любого потомка (мой пример на jsfiddle, и на dabblet).
Прототип
Учитывая потенциальные сложности и несостыковки поведения в разных браузерах, делаем рабочий прототип, для кроссбраузерной проверки.
span {
display: block;
position: relative;
width: 60px;
height: 60px;
background: red;
}
b {
position: absolute;
left: 10px;
top: 10px;
width: 40px;
height: 40px;
background: blue;
}
i {
position: absolute;
left: 10px;
top: 10px;
width: 20px;
height: 20px;
background: green;
}
<span><b><i></i></b></span>В сферическом вакууме
В спецификации указано, что активным элементом (прим. div:active), является тот, на который производится клик, но ничего не сказано как наследуется активное состояние. Делаем эксперимент, и смотрим, как же в реальном мире, ведут себя активные элементы, ссылка на страницу с экспериментом на Jsfiddle (на dabblet).
Первые проблемы
В первом случае, в webkit, FF 3.6+ и opera мы видим, что активное состояние наследуется всеми родителями, вплоть до , но когда требуется отследить более 1ого активного элемента, опера уже не справляется, и активное состояние наследует только первый родитель в DOM, декорированный псевдоклассом :active (span:active)
html:active { background: #ededed; } /* Light gray */
.test1-2 span:active { background: yellow; }
<div><span><b><i></i></b></span></div>В Interner Explorer активное состояние вообще не наследуется, и работает только при клике на элемент декорированный :active псевдокласом (в эксперименте это <span>), а в версиях до 7ого, включительно, :active работает только на ссылки.
Это еще не всё
Во втором случае я использовал каскад от активного элемента (span:active b), как видим в примере, webkit и ff, всё работает как и предполагалось, кликая на любой элемент вниз по DOM от декорированного псевдоклассом стиля, подсвечивается нужный элемент, определённый через каскад. Опера в этом случае начинает вести себя как IE, переставая наследовать активное состояние и работая только с элементом, на которые непосредственно происходит клик.
html:active { background: #ededed; } /* Light gray */
.test2 span:active b { background: yellow; }
<div><span><b><i></i></b></span></div>Оружие к бою
В третьем примере удалось заставить оперу наследовать активное состояние от потомка для использования в каскаде, используя абсолютно позиционированный элемент (), опирающийся от элемента декорированного псевдоклассом :active. FF и webkit тут по прежнему работают предсказуемо, но IE8+ до сих пор не при делах.
html:active { background: #ededed; } /* Light gray */
.test3 span:active b { background: yellow; }
em.pseudo {
content:"";
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
}
<div><span><b><i></i></b><em></em></span></div>Что бы заставить работать IE как нам требуется, и улучшить немного код, заменяем абсолютный элемент псевдоэлементом. Как выяснилось, в IE активное состояние всё таки наследуется, но только на псевдоэлементы ::before, ::after. К сожалению, в IE8 псевдоэлементы игнорируют z-index, что может не подойти в большинстве случаев (как и в моём), но в IE9+ всё в порядке.
html:active { background: #ededed; } /* Light gray */ .test4 span:active b { background: yellow; } .test4 span:after { content:""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; }
<div><span><b><i></i></b></span></div>Миссия закончена, возвращаемся домой
В итоге, мы заставили все элементы одинакого наследовать активное состояние кроссбраузерно (IE9+, FF 3.6+, Opera 9.64+, Chrome, Safari и другие вебкиты) и теперь спокойно можем реализовать функционал на портале.
Так как функционал несёт чисто декоративную роль, мы решил отказаться от IE6-8, оставив им мягкий fallback, а остальное сделать на CSS.
Постскриптум.
Без каскада
Можно проще решить проблему в IE8 и Опере, отказавшись от каскада, что в моём случае не подходило, и снижало расширяемость функционала, поэтому решил отказаться от реализуемой красивости в IE8.
Пояснение к задаче
Единственный нормальный способ отслеживать клик на CSS, в моём примере, без использования Java Script, оказался псевдокласс :active. Можно было использовать :focus, подставляя элементы формы под существующие блоки, но такое решение много тяжелее по нагрузке, и в итоге всё равно требовало Java Script напильника.
Тачпад
При клике с тачпэда элемент заметно меньше времени находится в активном состоянии, в отличии от клика с мыши.
CSS: Псевдоклассы | CSS
Псевдоклассы используются для добавления специальных эффектов для некоторых селекторов. Чтобы применить эти эффекты, не нужно использовать JavaScript или любой другой скрипт.
Простой синтаксис псевдоклассов выглядит следующим образом:
selector:pseudo-class {property: value}Классы CSS также могут использоваться с псевдоклассами:
selector.class:pseudo-class {property: value}Наиболее часто используемые CSS псевдоклассы:
| Значение | Описание |
| :link | Класс открывавшейся ранее ссылки. |
| :visited | Класс открытой ранее ссылки. |
| :hover | Класс элемента, когда на него наведен курсор мыши. |
| :active | Класс для активного элемента. |
| :focus | Класс для элемента, который находится в фокусе. |
| :first-child | Класс элемента, который является дочерним элементом другого. |
| :lang | Класс, чтобы указать язык, применяемый для конкретного элемента. |
При определении псевдоклассов CSS3 в блоке <style>…</style> следует помнить:
- a:hover должен располагаться после a:link и a:visited, иначе он не будет работать;
- a:active должен располагаться после a:hover, иначе он не будет работать;
- Имена псевдоклассов не чувствительны к регистру;
- Псевдоклассы отличаются от классов CSS, но они могут быть объединены.
В следующем примере показано, как использовать псевдокласс ссылки, чтобы задать цвет ссылки. Возможные значения — цвет в любом допустимом формате:
<html>
<head>
<style type="text/css">
a:link {color:#000000}
</style>
</head>
<body>
<a href="">Черная ссылка</a>
</body>
</html>Этот код создает следующую черную ссылку:
Ниже приведен пример того, как использовать псевдокласс HTML :visited, чтобы задать цвет открытой ранее ссылки. Возможные значения — цвет в любом допустимом формате:
<html>
<head>
<style type="text/css">
a:visited {color: #006600}
</style>
</head>
<body>
<a href="">Нажмите эту ссылку</a>
</body>
</html>Этот код создает следующую ссылку. После того, как вы нажмете на нее, она изменит свой цвет на зеленый:
В следующем примере показано, как использовать псевдокласс hover, чтобы изменить цвет ссылки при наведении на нее курсора мыши. Возможные значения — цвет в любом допустимом формате:
<html>
<head>
<style type="text/css">
a:hover {color: #FFCC00}
</style>
</head>
<body>
<a href="">Наведите мышь на эту ссылку</a>
</body>
</html>Этот код создает следующую ссылку. Теперь наведите курсор мыши на эту ссылку, и вы увидите, что она поменяет свой цвет на желтый:
В следующем примере показано, как использовать класс :active, чтобы изменить цвет активной ссылки. Можно использовать значение цвета в любом допустимом формате:
<html>
<head>
<style type="text/css">
a:active {color: #FF00CC}
</style>
</head>
<body>
<a href="">Нажмите на эту ссылку</a>
</body>
</html> Этот код создает следующую ссылку. Когда пользователь нажимает на нее, цвет меняется на розовый:
В следующем примере показано, как использовать псевдокласс focus, чтобы изменить цвет ссылки, находящейся в фокусе ввода. Возможные значения — цвет в любом допустимом формате:
<html>
<head>
<style type="text/css">
a:focus {color: #0000FF}
</style>
</head>
<body>
<a href="">Нажмите на эту ссылку </a>
</body>
</html>Этот код создает следующую ссылку. Когда эта ссылка находится в фокусе ввода, ее цвет меняется на оранжевый. Цвет возвращается обратно, когда ссылка находится вне фокуса:
Псевдокласс child задается указанному элементу, который является дочерним элементом другого.
Например, для создания отступа для первого абзаца всех элементов <div>, нужно использовать следующее определение:
<html>
<head>
<style type="text/css">
div > p:first-child
{
text-indent: 25px;
}
</style>
</head>
<body>
<div>
<p>Первый параграф блока div. Этот параграф будет иметь отступ</p>
<p>Второй параграф блока div. Этот параграф не будет иметь отступа</p>
</div>
<p>Однако этот стиль задается только для параграфов</p>
<div>
<h4>Заголовок</h4>
<p>Первый параграф в блоке div. Этот параграф не будет иметь отступа.</p>
</div>
</body>
</html>Этот код дает следующий результат:
Псевдокласс :lang позволяет составлять селекторы для отдельных тегов на основе настроек языка.
Этот класс полезен при создании документов, которые должны содержать текст на нескольких языках, имеющих различные конвенции для некоторых языковых конструкций. Например, во французском языке для обозначения цитаты, как правило, используются угловые скобки (<and>), в то время как в английском языке используются одинарные кавычки (‘and‘).
В таком документе вы можете использовать псевдокласс :lang, чтобы изменить кавычки надлежащим образом. Приведенный ниже код изменяет тег <blockquote> надлежащим образом для каждого языка:
<html>
<head>
<style type="text/css">
/* Два уровня кавычек для двух языков*/
:lang(en) { quotes: '"' '"' "'" "'"; }
:lang(fr) { quotes: "<<" ">>" "<" ">"; }
</style>
</head>
<body>
<p>...<q lang="fr">Кавычки в абзаце</q>...</p>
</body>
</html>Селекторы :lang будут применяться ко всем элементам в документе. Но не все элементы используют свойство quotes, так что для большинства элементов эффект будет незаметен.
Этот код дает следующий результат:
Данная публикация представляет собой перевод статьи «CSS — Pseudo Classes» , подготовленной дружной командой проекта Интернет-технологии.ру
CSS псевдокласс :is() — как и где его использовать
Новый CSS псевдокласс :is() — это отличный способ выбирать нужные элементы, при этом не писать много лишнего кода, сохранять код читабельным. По сути :is() — следующая ступень эволюции псевдоклассов :matches() и :any(). Давайте начнем с того, что рассмотрим как работает этот селектор и как он заменяет оба :matches() и :any().
Пример использования :is()
Вероятно, можно интуитивно понять что делает :is() просто посмотрев на него. По сути это средство проверки является ли элемент чем-либо. Как if в языках программирования. Посмотрите на примеры ниже, функционально оба этих селектора одинаковы.
CSS
div {
...
}
:is(div) {
...
}
В обоих случаях стили будут работать, если элемент является div-ом.
Псевдокласс также можно использовать для выбора нескольких элементов в одном объявлении через запятую. Опять же, два селектора в примерах ниже функционально одинаковы.
CSS
ul, li, a {
...
}
:is(ul, li, a) {
...
}
Да, по началу это может показаться не очень полезным, пока видны только дополнительные сложности с синтаксисом. :is() становится особенно полезным, когда вам нужно выбрать дочерние элементы. Предположим, вы хотите, чтобы все заголовки h2 были написаны жирным шрифтом, но только в том случае, если они являются дочерними элементами тегов article , section или aside. Для этого вам нужно написать:
CSS
article h2,
section h2,
aside h2 {
font-weight: bold;
}
Но используя :is() можно сжать селектор до такого вида:
CSS
:is(article, section, aside) h2 {
font-weight: bold;
}
Эффективность использования псевдокласса :is() увеличивается, если у вас есть несколько родительских и дочерних элементов. А что если вы захотите, чтобы жирным шрифтом были написаны не только заголовки h2, а вообще все заголовки? Без :is() вам нужно будет написать следующее:
CSS
article h2, article h3, article h4, article h5, article h5, article h6,
section h2, section h3, section h4, section h5, section h5, section h6,
aside h2, aside h3, aside h4, aside h5, aside h5, aside h6, {
font-weight: bold;
}
А с псевдоклассом достаточно будет вот этого:
CSS
:is(article, section, aside) :is(h2, h3, h4, h5, h5, h6) {
font-weight: bold;
}
Псевдоклассы :is() и :not()
В CSS есть псевдокласс :not(), который работает обратным образом. Он позволяет применить стили ко всему, кроме набора селекторов.
Ранее мы выбрали с помощью :is() все дочерние заголовки тегов article, section и aside. А с помощью :not() мы сможем выбрать все заголовки, которые не являются потомками этих элементов:
CSS
:not(article, section, aside) :is(h2, h3, h4, h5, h5, h6) {
font-weight: normal;
}
Конструкция из псевдоклассов :is() и :not() выглядит логичной и интуитивно понятной.
Поддержка браузерами
В данный момент псевдокласс уже имеет поддержку большинства браузеров.
Для обеспечения кроссбраузерности вы можете использовать :any() и :matches() как фоллбеки для :is(). Например:
CSS
:-webkit-any(article, section, aside) h2 {
font-weight: bold;
}
:-moz-any(article, section, aside) h2 {
font-weight: bold;
}
:matches(article, section, aside) h2 {
font-weight: bold;
}
:is(article, section, aside) h2 {
font-weight: bold;
}
В заключении
Новый псевдокласс :is() делает возможным обработку гораздо более сложных селекторов, чем раньше, при этом используя только ванильный CSS. Раньше нам бы, скорее всего, потребовался препроцессор для выполнения подобной задачи. Также, вероятно, уже в ближайшее время можно рассчитывать, что :is() достигнет полной поддержки браузеров.
seodon.ru | CSS справочник — :active
Опубликовано: 18.08.2010 Последняя правка: 10.12.2015
Псевдокласс CSS :active используется для изменения стиля элементов, предназначенных для взаимодействия с пользователем, в момент их активации. Например, ссылок или кнопок в момент нажатия.
Тип псевдокласса
Назначение: псевдоклассы.
Применяется: В CSS не определено к каким элементам можно применять псевдокласс :active, но все браузеры его поддерживают для тега <A>, а некоторые для тегов <INPUT> и <BUTTON>.
Псевдокласс :active должен указываться после :hover, если тот присутствует, а если он используется для ссылок то также после :link и :visited. В противном случае :active может не сработать.
Значения
Нет.
Синтаксис
селектор:active { }Пример CSS: использование :active
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>seodon.ru - CSS псевдокласс :active</title>
<style type="text/css">
a:link { color:#0066cc } /* цвет непосещенных ссылок */
a:visited { color:#810081 } /* посещенных */
a:hover { color:#66cc00 } /* ссылок под курсором */
a:active { color:#ff0000 } /* в момент активации */
</style>
</head>
<body>
<p><a href="http://spravka.seodon.ru/css/">Справочник по CSS</a></p>
<p><a href="http://spravka.seodon.ru/html/">Справочник по HTML</a></p>
</body>
</html>Результат примера
Результат. Использование псевдокласса CSS :active.
Версии CSS
| Версия: | CSS 1 | CSS 2 | CSS 2.1 | CSS 3 |
| Поддержка: | Да | Да | Да | Да |
Браузеры
| Браузер: | Internet Explorer | Google Chrome | Mozilla Firefox | Opera | Safari |
| Версия: | 6.0 и выше | 2.0 и выше | 2.0 и выше | 9.2 и выше | 3.1 и выше |
| Поддержка: | Да | Да | Да | Да | Да |
Псевдоклассы | htmlbook.ru
Псевдоклассы определяют динамическое состояние элементов, которое изменяется с помощью действий пользователя, а также положение в дереве документа. Примером такого состояния служит текстовая ссылка, которая меняет свой цвет при наведении на неё курсора мыши. При использовании псевдоклассов браузер не перегружает текущий документ, поэтому с помощью псевдоклассов можно получить разные динамические эффекты на странице.
Синтаксис применения псевдоклассов следующий.
Селектор:Псевдокласс { Описание правил стиля }
Вначале указывается селектор, к которому добавляется псевдокласс, затем следует двоеточие, после которого идёт имя псевдокласса. Допускается применять псевдоклассы к именам идентификаторов или классов (A.menu:hover {color: green}), а также к контекстным селекторам (.menu A:hover {background: #fc0}). Если псевдокласс указывается без селектора впереди (:hover), то он будет применяться ко всем элементам документа.
Условно все псевдоклассы делятся на три группы:
- определяющие состояние элементов;
- имеющие отношение к дереву элементов;
- указывающие язык текста.
Псевдоклассы, определяющие состояние элементов
К этой группе относятся псевдоклассы, которые распознают текущее состояние элемента и применяют стиль только для этого состояния.
:active
Происходит при активации пользователем элемента. Например, ссылка становится активной, если навести на неё курсор и щёлкнуть мышкой. Несмотря на то, что активным может стать практически любой элемент веб-страницы, псевдокласс :active используется преимущественно для ссылок.
:link
Применяется к непосещенным ссылкам, т. е. таким ссылкам, на которые пользователь ещё не нажимал. Браузер некоторое время сохраняет историю посещений, поэтому ссылка может быть помечена как посещенная хотя бы потому, что по ней был зафиксирован переход ранее.
Запись A {…} и A:link {…} по своему результату равноценна, поскольку в браузере даёт один и тот же эффект, поэтому псевдокласс :link можно не указывать. Исключением являются якоря, на них действие :link не распространяется.
:focus
Применяется к элементу при получении им фокуса. Например, для текстового поля формы получение фокуса означает, что курсор установлен в поле, и с помощью клавиатуры можно вводить в него текст (пример 15.1).
Пример 15.1. Применение псевдокласса :focus
HTML5CSS 2.1IECrOpSaFx
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Псевдоклассы</title>
<style>
INPUT:focus {
color: red; /* Красный цвет текста */
}
</style>
</head>
<body>
<form action="">
<p><input type="text" value="Черный текст"></p>
<p><input type="text" value="Черный текст"></p>
</form>
</body>
</html>Результат примера показан ниже (рис. 15.1). Во второй строке находится курсор, поэтому текстовое поле получило фокус.
Рис. 15.1. Изменение стиля текста при получении фокуса
В данном примере в текстовом поле содержится предварительный текст, он определяется значением атрибута value тега <input>. При щелчке по элементу формы происходит получение полем фокуса, и цвет текста меняется на красный. Достаточно щёлкнуть в любом месте страницы (кроме текстового поля, естественно), как произойдет потеря фокуса и текст вернётся к первоначальному чёрному цвету.
Результат будет виден только для тех элементов, которые могут получить фокус. В частности, это теги <a>, <input>, <select> и <textarea>.
:hover
Псевдокласс :hover активизируется, когда курсор мыши находится в пределах элемента, но щелчка по нему не происходит.
:visited
Данный псевдокласс применяется к посещённым ссылкам. Обычно такая ссылка меняет свой цвет по умолчанию на фиолетовый, но с помощью стилей цвет и другие параметры можно задать самостоятельно (пример 15.2).
Пример 15.2. Изменение цвета ссылок
HTML5CSS 2.1IECrOpSaFx
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Псевдоклассы</title>
<style>
A:link {
color: #036; /* Цвет непосещенных ссылок */
}
A:visited {
color: #606; /* Цвет посещенных ссылок */
}
A:hover {
color: #f00; /* Цвет ссылок при наведении на них курсора мыши */
}
A:active {
color: #ff0; /* Цвет активных ссылок */
}
</style>
</head>
<body>
<p>
<a href="1.html">Ссылка 1</a> |
<a href="2.html">Ссылка 2</a> |
<a href="3.html">Ссылка 3</a></p>
</body>
</html>Результат примера показан на рис. 15.2.
Рис. 15.2. Вид ссылки при наведении на неё курсора мыши
В данном примере показано использование псевдоклассов совместно со ссылками. При этом имеет значение порядок следования псевдоклассов. Вначале указывается :visited, а затем идёт :hover, в противном случае посещённые ссылки не будут изменять свой цвет при наведении на них курсора.
Селекторы могут содержать более одного псевдокласса, которые перечисляются подряд через двоеточие, но только в том случае, если их действия не противоречат друг другу. Так, запись A:visited:hover является корректной, а запись A:link:visited — нет. Впрочем, если подходить формально, то валидатор CSS считает правильным любое сочетание псевдоклассов.
Браузер Internet Explorer 6 и младше позволяет использовать псевдоклассы :active и :hover только для ссылок. Начиная с версии 7.0 псевдоклассы в этом браузере работают и для других элементов.
Псевдокласс :hover не обязательно должен применяться к ссылкам, его можно добавлять и к другим элементам документа. Так, в примере 15.3 показана таблица, строки которой меняют свой цвет при наведении на них курсора мыши. Это достигается за счёт добавления псевдокласса :hover к селектору TR.
Пример 15.3. Выделение строк таблицы
HTML5CSS 2.1IECrOpSaFx
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Псевдоклассы</title>
<style>
table { border-spacing: 0; }
td { padding: 4px; }
tr:hover {
background: #fc0; /* Меняем цвет фона строки таблицы */
}
</style>
</head>
<body>
<table border="1">
<tr>
<th></th>
<th>Пики</th>
<th>Трефы</th>
<th>Бубны</th>
<th>Червы</th>
</tr>
<tr>
<td>Чебурашка</td>
<td>5</td><td>2</td><td>4</td><td>2</td>
</tr>
<tr>
<td>Крокодил Гена</td>
<td>2</td><td>7</td><td>1</td><td>3</td>
</tr>
<tr>
<td>Шапокляк</td>
<td>5</td><td>4</td><td>3</td><td>1</td>
</tr>
<tr>
<td>Крыса Лариса</td>
<td>1</td><td>0</td><td>5</td><td>7</td>
</tr>
</table>
</body>
</html>Результат примера показан ниже (рис. 15.3).
Рис. 15.3. Выделение строк таблицы при наведении на них курсора мыши
Псевдоклассы, имеющие отношение к дереву документа
К этой группе относятся псевдоклассы, которые определяют положение элемента в дереве документа и применяют к нему стиль в зависимости от его статуса.
:first-child
Применяется к первому дочернему элементу селектора, который расположен в дереве элементов документа. Чтобы стало понятно, о чем речь, разберём небольшой код (пример 15.4).
Пример 15.4. Использование псевдокласса :first-child
HTML5CSS 2.1IECrOpSaFx
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Псевдоклассы</title>
<style type="text/css">
B:first-child {
color: red; /* Красный цвет текста */
}
</style>
</head>
<body>
<p><b>Lorem ipsum</b> dolor sit amet, <b>consectetuer</b>
adipiscing <b>elit</b>, sed diem nonummy nibh euismod tincidunt
ut lacreet dolore magna aliguam erat volutpat.</p>
<p><b>Ut wisis enim</b> ad minim veniam, <b>quis nostrud</b>
exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea <b>commodo
consequat</b>.</p>
</body>
</html>Результат примера показан ниже (рис. 15.4).
Рис. 15.4. Использование псевдокласса :first-child
В данном примере псевдокласс :first-child добавляется к селектору B и устанавливает для него красный цвет текста. Хотя контейнер <b> встречается в первом абзаце три раза, красным цветом будет выделено лишь первое упоминание, т. е. текст «Lorem ipsum». В остальных случаях содержимое контейнера <b> отображается чёрным цветом. Со следующим абзацем всё начинается снова, поскольку родительский элемент поменялся. Поэтому фраза «Ut wisis enim» также будет выделена красным цветом.
Браузер Internet Explorer поддерживает псевдокласс :first-child начиная с версии 7.0.
Псевдокласс :first-child удобнее всего использовать в тех случаях, когда требуется задать разный стиль для первого и остальных однотипных элементов. Например, в некоторых случаях красную строку для первого абзаца текста не устанавливают, а для остальных абзацев добавляют отступ первой строки. С этой целью применяют свойство text-indent с нужным значением отступа. Но чтобы изменить стиль первого абзаца и убрать для него отступ потребуется воспользоваться псевдоклассом :first-child (пример 15.5).
Пример 15.5. Отступы для абзаца
HTML5CSS 2.1IECrOpSaFx
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Псевдоклассы</title>
<style>
P {
text-indent: 1em; /* Отступ первой строки */
}
P:first-child {
text-indent: 0; /* Для первого абзаца отступ убираем */
}
</style>
</head>
<body>
<p>Историю эту уже начали забывать, хотя находились горожане, которые
время от времени рассказывали ее вновь прибывшим в город посетителям.</p>
<p>Легенда обрастала подробностями и уже совсем не напоминала произошедшее
в действительности событие. И, тем не менее, ни один человек не решался
заикнуться о ней с наступлением темноты.</p>
<p>Но однажды в город вновь вошел незнакомец. Он хромал на левую ногу.</p>
</body>
</html>Результат примера показан ниже (рис. 15.5).
Рис. 15.5. Изменение стиля первого абзаца
В данном примере первый абзац текста не содержит отступа первой строки, а для остальных он установлен.
Псевдоклассы, задающие язык текста
Для документов, одновременно содержащих тексты на нескольких языках имеет значение соблюдение правил синтаксиса, характерные для того или иного языка. С помощью псевдоклассов можно изменять стиль оформления иностранных текстов, а также некоторые настройки.
:lang
Определяет язык, который используется в документе или его фрагменте. В коде HTML язык устанавливается через атрибут lang, он обычно добавляется к тегу <html>. С помощью псевдокласса :lang можно задавать определённые настройки, характерные для разных языков, например, вид кавычек в цитатах. Синтаксис следующий.
Элемент:lang(язык) { … }
В качестве языка могут выступать следующие значения: ru — русский; en — английский ; de — немецкий ; fr — французский; it — итальянский.
Пример 15.6. Вид кавычек в зависимости от языка
HTML5CSS 2.1IECrOpSaFx
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>lang</title>
<style>
P {
font-size: 150%; /* Размер текста */
}
q:lang(de) {
quotes: "\201E" "\201C"; /* Вид кавычек для немецкого языка */
}
q:lang(en) {
quotes: "\201C" "\201D"; /* Вид кавычек для английского языка */
}
q:lang(fr), q:lang(ru) { /* Вид кавычек для русского и французского языка */
quotes: "\00AB" "\00BB";
}
</style>
</head>
<body>
<p>Цитата на французском языке: <q lang="fr">Ce que femme veut,
Dieu le veut</q>.</p>
<p>Цитата на немецком: <q lang="de">Der Mensch, versuche die Gotter nicht</q>.</p>
<p>Цитата на английском: <q lang="en">То be or not to be</q>.</p>
</body>
</html>Результат данного примера показан на рис. 15.6. Для отображения типовых кавычек в примере используется стилевое свойство quotes, а само переключение языка и соответствующего вида кавычек происходит через атрибут lang, добавляемый к тегу <q>.
Рис. 15.6. Разные кавычки для разных языков
Вопросы для проверки
1. Олег сделал ссылки, которые меняют цвет фона при наведении на них курсора мыши. Для этого он использовал следующий стиль.
A { color: blue; background: orange; }
A:hover { background: yellow; color: black; }
A:visited { color: white; }
A:active { color: red; }
Однако некоторые ссылки при наведении на них курсора не меняли свой цвет на чёрный. Почему?
- Код CSS не валидный.
- К селектору A не добавлен псевдокласс :link.
- Псевдокласс :visited стоит после :hover.
- Псевдокласс :active стоит после :visited.
- Неверное значение свойства color у A:hover.
2. Требуется выделить фоновым цветом первую строку таблицы. Какой псевдокласс для этой цели подойдёт?
- :active
- :first-child
- :focus
- :hover
- :lang
3. К каким элементам добавляет стиль следующая конструкция — A:link:visited:hover ?
- К непосещённым ссылкам.
- К посещённым ссылкам.
- К любым ссылкам при наведении на них курсора мыши.
- К посещённым ссылкам при наведении на них курсора мыши.
- Ни к одному элементу.
Ответы
1. Псевдокласс :visited стоит после :hover.
2. :first-child
3. Ни к одному элементу.
Учебник CSS 3. Статья «Псевдоклассы и псевдоэлементы»
Предыдущие статьи этого учебника преимущественно были посвящены применению CSS стилей непосредственно к HTML элементам через использование различных селекторов, таких как селектор типа, селектор класса, id селектора и селектора потомков.
Современный стандарт каскадных таблиц стилей позволяет форматировать не только элементы к которым можно явно обратиться, но и предоставляет возможность стилизовать такие части документа, которые явно не определены в дереве документа, либо стилизовать их в зависимости от внешних факторов. Например, изменение первой строки абзаца, или изменение вида ссылки, на которую в настоящий момент наведен указатель мыши, история навигации в документе, а так же размещение сгенерированного текстового содержимого после или до определенного элемента.
В этой статье учебника пойдет речь о специальных псевдоклассах и псевдоэлементах, которые дают возможность затронуть форматирование на странице такие особенности элементов, которые явным образом не указать.
Псевдоэлементы
Псевдоэлементы ::first-letter и ::first-line
В современном стандарте CSS 3 используются 5 (пять) основных псевдоэлементов, которые добавляются к селекторам и имеют следующий синтаксис:
/* синтаксис CSS 3 */
селектор::псевдоэлемент { /* двойное двоеточие */
CSS свойство: значение;
}
/* синтаксис CSS 2 */
селектор:псевдоэлемент { /* одинарное двоеточие */
CSS свойство: значение;
}
Обратите внимание, что в настоящее время используется синтаксис, который предусматривает двойное двоеточие перед псевдоэлементом. Не смотря на то, что браузеры поддерживают оба варианта, рекомендуется использовать синтаксис CSS 3.
Первыми псевдоэлементами, которые мы рассмотрим будут ::first-letter и ::first-line. Псевдоэлемент ::first-letter позволяет создавать инициал (буквицу) — начальный символ текстового блока. Такой метод часто можно встретить в печатных изданиях, например, в сказках.
Псевдоэлемент ::first-line позволяет стилизовать первую строку абзаца, которая будет отличаться от основного текста. Данный псевдоэлемент дает более широкие возможности для оформления текста.
Давайте рассмотрим пример их использования:
<!DOCTYPE html>
<html>
<head>
<meta charset = "UTF-8">
<title>Псевдоэлементы ::first-letter и ::first-line</title>
<style>
::first-letter { /* изменяем начальный символ текстового блока */
color: red; /* устанавливаем цвет шрифта красный */
font-size: 24px; /* задаем размер для первого символа */
}
.test::first-line{ /* изменяем первую строку элемента с классом test */
color: green; /* устанавливаем цвет шрифта первой строки зелёный */
font-family: Arial; /* устанавливаем шрифт Arial для первой строки */
}
</style>
</head>
<body>
<p>Яндекс. Найдется, всё.</p>
<pre class = "test">У лукоморья дуб зелёный;
Златая цепь на дубе том:
И днём и ночью кот учёный
Всё ходит по цепи кругом;
Идёт направо - песнь заводит,
Налево - сказку говорит.</pre>
</body>
</html>
В этом примере с помощью псевдоэлемента ::first-letter мы установили, что первая буква каждого текстового блока (в нашем случае абзаца — элемент <p>) будет красного цвета и размером 24 пикселя. Кроме того, с использованием псевдоэлемента ::first-line, мы указали, что первая строка в элементе с классом test (элемент <pre>) будет шрифтом Arial зеленого цвета.
Результат нашего примера:
Рис. 13 Пример использования псевдоэлементов :first-letter и :first-line.Псевдоэлемент ::selection
Следующий псевдоэлемент — ::selection, он позволяет добавлять тень к тексту, управлять цветом фона и цветом текста, выделенного пользователем (по умолчанию: фон голубой, цвет текста белый). Это основные CSS свойства, которые используются с этим псевдоэлементом. Работу с текстовой тенью мы подробно рассмотрим далее в учебнике в статье: «Текстовая тень в CSS».
В использовании этого псевдоэлемента есть небольшой нюанс. Браузер Firefox поддерживает этот псевдоэлемент только с префиксом производителя. Чтобы на Вашем сайте была поддержка этого псевдоэлемента всеми основными браузерами, то обязательно включайте описание и для Firefox:
::selection { /* описание псевдоэлемента для всех браузеров */
color: blue; /* устанавливаем цвет текста */
background-color: orange; /* устанавливаем цвет заднего фона */
}
::-moz-selection { /* описание псевдоэлемента для Firefox */
color: blue; /* устанавливаем цвет текста */
background-color: orange; /* устанавливаем цвет заднего фона */
}
Мы еще неоднократно в этом учебнике будем использовать CSS свойства, которые поддерживаются теми, или иными браузерами только со специальным вендорными префиксами производителей браузеров, они используются для того, чтобы задействовать то, или иное экспериментальное свойство. Работу с вендорными префиксами мы подробно рассмотрим далее в учебнике в статье: «CSS функции: линейные градиенты».
Псевдоэлемент ::selection был разработан для селекторов CSS уровня 3, но был удалён до того как получил рекомендательный статус. Так, в настоящее время он не принадлежит к какой-либо спецификации и возможно будет добавлен в будущей спецификации CSS.
Рассмотрим пример использования псевдоэлемента ::selection:
<!DOCTYPE html>
<html>
<head>
<meta charset = "UTF-8">
<title>Псевдоэлемент ::selection</title>
<style>
::selection { /* описание псевдоэлемента для всех браузеров */
color: blue; /* устанавливаем цвет текста */
background-color: orange; /* устанавливаем цвет заднего фона */
}
::-moz-selection { /* описание псевдоэлемента для Firefox */
color: blue; /* устанавливаем цвет текста */
background-color: orange; /* устанавливаем цвет заднего фона */
}
</style>
</head>
<body>
<p>Обыкновенный бегемот, или гиппопотам (лат. Hippopotamus amphibius) — млекопитающее из отряда парнокопытных, подотряда свинообразных (нежвачных), семейства бегемотовых, единственный современный вид рода Hippopotamus. Характерной особенностью бегемота является его полуводный образ жизни — большую часть времени он проводит в воде, выходя на сушу лишь ночью на несколько часов для кормёжки. Бегемот обитает только у пресной воды, хотя может изредка оказываться в море.</p>
</body>
</html>
Результат нашего примера:
Рис. 14 Пример использования псевдоэлемента ::selection.Псевдоэлементы ::before и ::after
Псевдоэлемент ::before добавляет определённое содержимое перед каждым указанным элементом. Псевдоэлемент ::before используется вместе со свойством content, которое необходимо для вставки сгенерированного контента.
Рассмотрим пример, в котором перед каждым блоком с изображением и перед каждым абзацем будет генерироваться (добавляться) определенная фраза:
<!DOCTYPE html>
<html>
<head>
<meta charset = "UTF-8">
<title>Пример использования псевдоэлемента ::before</title>
<style>
img { /* выбираем все изображения */
width: 100px; /* задаем ширину элемента */
height: 100px; /* задаем высоту элемента */
}
div.omg::before { /* выбираем все элементы <div> с классом omg и добавляем перед каждым содержимое */
content: "Внимание! Спасибо за внимание!"; /* содержимое, которое будет добавлено */
}
p::before { /* выбираем все элементы <p> и добавляем перед каждым содержимое */
content: "Ответ: "; /* содержимое, которое будет добавлено */
}
</style>
</head>
<body>
<div class = "omg">
<img src = "nich.jpg" alt = "nich">
</div>
<div class = "omg">
<img src = "nich.jpg" alt = "nich">
</div>
<p>Нет</p>
<p>Да</p>
</body>
</html>
В этом примере мы указали фиксированную ширину для всех изображений (ширина и высота 100 пикселей). Кроме того, мы выбрали все элементы <div> с классом omg и добавили перед ними определенную фразу. Перед абзацами (элементы <p>) также добавляется определенная фраза.
Обращаю Ваше внимание, что к таким элементам как <input> и <img> напрямую псевдоэлемент ::before применить нельзя. Один из выходов из этой ситуации – заключить элемент в блочный элемент <div>.
Результат нашего примера:
Рис. 15 Пример использования псевдоэлемента ::before.Псевдоэлемент ::after выступает прямой противоположностью ::before и добавляет содержимое после определенного элемента, а не до. Он также используется вместе со свойством content, которое используется для вставки сгенерированного контента.
Рассмотрим пример, в котором после каждого блока с изображением и после каждого абзаца будет генерироваться (добавляться) определенная фраза:
<!DOCTYPE html>
<html>
<head>
<meta charset = "UTF-8">
<title>Пример использования псевдоэлемента ::after</title>
<style>
img { /* выбираем все изображения */
width: 100px; /* задаем ширину элемента */
height: 100px; /* задаем высоту элемента */
}
div.omg::after { /* выбираем все элементы <div> с классом omg и добавляем после каждого содержимое */
content: "Спасибо за внимание!"; /* содержимое, которое будет добавлено */
}
p::after { /* выбираем все элементы <p> и добавляем после каждого содержимое */
content: " - Ваш ответ"; /* содержимое, которое будет добавлено */
}
</style>
</head>
<body>
<div class = "omg">
<img src = "nich.jpg" alt = "nich">
</div>
<div class = "omg">
<img src = "nich.jpg" alt = "nich">
</div>
<p>Нет</p>
<p>Да</p>
</body>
</html>
В этом примере мы указали фиксированную ширину для всех изображений (ширина и высота 100 пикселей). Кроме того, мы выбрали все элементы <div> с классом omg и добавили после них определенную фразу. После абзацев (элементы <p>) также добавляется определенная фраза.
Обращаю Ваше внимание, что к таким элементам как <input> и <img> напрямую псевдоэлемент ::after применить нельзя.
Результат нашего примера:
Рис. 16 Пример использования псевдоэлемента ::after.Применение псевдоэлементов ::before и ::after позволяют добавлять перед элементами не только текстовую информацию, но даже изображения, счетчики, разноцветные буллиты, которые используются в маркированных списках и так далее. Мы с Вами еще обязательно вернемся к этим пседоэлементам с более глубокими знаниями CSS.
Псевдоклассы
В настоящее время в CSS 3 существует более тридцати псевдоклассов, мы с Вами постараемся при обучении рассмотреть большинство из них.
В этой статье мы рассмотрим псевдоклассы, которые дают возможность форматировать ссылки в зависимости от состояния и рассмотрим псевдокласс, который позволяет изменить стиль элемента, когда элемент получает фокус, либо при выборе его пользователем при помощи клавиатуры.
Сразу хочу обратить Ваше внимание на то, что псевдоклассы в отличие от псевдоэлементов добавляются к селекторам с одним двоеточием:
селектор:псевдокласс { /* одинарное двоеточие */
CSS свойство: значение;
}
Фокус на элементе
Псевдокласс :focus производит выбор элементов, которые в настоящий момент находятся в фокусе (допускается использовать на элементы, которые принимают события клавиатуры или другие данные, вводимые пользователем).
Давайте рассмотрим пример использования псевдокласса:
<!DOCTYPE html>
<html>
<head>
<meta charset = "UTF-8">
<title>Псевдокласс :focus</title>
<style>
input:focus{ /* выбирает все элементы <input>, которые находятся в фокусе */
background-color: khaki; /* устанавливаем цвет заднего фона */
color: brown; /* устанавливаем цвет шрифта */
font-size: 18px; /* устанавливаем размер шрифта */
border: 2px solid orange; /* устанавливаем сплошную границу оранжевого цвета размером 2 пикселя */
}
</style>
</head>
<body>
<form>
Логин <input type = "text" name = "login"></input><br><br>
Пароль <input type = "password" name = "password"></input>
</form>
</body>
</html>
В данном примере мы создали два элемента <input>, первый с типом text (однострочное текстовое поле), а второй с типом password (поле с паролем).
Если пользователь производит выбор элементов <input> (поле получает фокус), то поле получает стиль, который мы задали, а если поле теряет фокус, то стиль возвращается на первоначальный.
Результат нашего примера:
Рис. 17 Пример использования псевдоэлемента :focus.Стилизация ссылок
link
Псевдокласс :link задаёт стиль всем ссылкам, по которым пользователь не произвёл переход (не посещенные ссылки). Как правило, используется с псевдоклассом :visited, который определяет стиль для посещённых пользователем ссылок.
<!DOCTYPE html>
<html>
<head>
<meta charset = "UTF-8">
<title>Псевдокласс :link</title>
<style>
a:link {
background-color: orange;
}
</style>
</head>
<body>
<p>Не посещённые ссылки:</p>
<a href = "https://ru.wikipedia.org/wiki/Квантовая_механика">Квантовая_механика</a>
<a href = "https://ru.wikipedia.org/wiki/Начертательная_геометрия">Начертательная_геометрия</a>
</body>
</html>
В этом примере с использованием псевдокласса :link мы указали, что ссылки (элементы <a>) по которым пользователь не переходил подсвечиваются оранжевым цветом:
Рис. 17а Пример использования псевдокласса :link.visited
Псевдокласс :visited задаёт стиль всем ссылкам, по которым пользователь производил переход (посещенные ссылки).
<!DOCTYPE html>
<html>
<head>
<meta charset = "UTF-8">
<title>Псевдокласс :visited</title>
<style>
a:visited {
color: orange;
}
</style>
</head>
<body>
<p>Cсылки, которые Вы уже посещали:</p>
<a href = "https://ru.wikipedia.org/wiki/Квантовая_механика"> Квантовая_механика</a>
<a href = "https://ru.wikipedia.org/wiki/Начертательная_геометрия"> Начертательная_геометрия</a>
</body>
</html>
В этом примере с использованием псевдокласса :visited мы указали, что ссылки (элементы <a>) по которым пользователь производил переход имеют красный цвет:
Рис. 17б Пример использования псевдокласса :visited.active
Псевдокласс :active используется для выбора активного элемента — элемента на который в данный момент пользователь кликнул мышкой. Стиль для элемента применится и будет работать пока удерживается кнопка мыши.
<!DOCTYPE html>
<html>
<head>
<meta charset = "UTF-8">
<title>Псевдокласс :active</title>
<style>
p.test:active, h4.test:active, a.test:active { /* групповой селектор */
background-color: orange; /* устанавливаем цвет заднего фона */
}
</style>
</head>
<body>
<h4 class = "test">Заголовок третьего уровня с классом test</h4>
<p class = "test">Абзац с классом test</p>
<a class = "test" href = "#">Ссылка с классом test</a>
</body>
</html>
Выберите любой элемент и удерживайте на нём кнопку мыши:
Заголовок третьего уровня с классом test
Абзац с классом test
Ссылка с классом testhover
Ну и заключительный псевдокласс, который мы рассмотрим в этой статье — :hover, он используется практически на каждой странице любого сайта. Псевдокласс :hover используется для стилизации любого элемента, на который в данный момент указывает курсор мыши. Чаще всего используют данный псевдокласс с ссылками, кнопками, в меню навигации и таблицами.
<!DOCTYPE html>
<html>
<head>
<meta charset = "UTF-8">
<title>Псевдокласс :hover</title>
<style>
table {
width: 50%; /* указываем ширину элемента в процентах от ширины области просмотра */
}
th, td {
text-align: left; /* горизонтальное выравнивание текста по левому краю */
border: 1px solid orange; /* сплошная граница размером 1 пиксель оранжевого цвета */
}
tr:hover {
background-color: khaki; /* устанавливаем цвет заднего фона */
}
</style>
</head>
<body>
<tr>
<th>Наименование</th><th>Модель</th><th>Цена</th>
</tr>
<tr>
<td>Кирпич</td><td>100</td><td>$15</td>
</tr>
<tr>
<td>Лабутены</td><td>krasnie</td><td>$1500</td>
</tr>
<tr>
<td>Штаны</td><td>voshititelnie</td><td>$200</td>
</tr>
<tr>
<td>Шапка</td><td>ushanka</td><td>$200</td>
</tr>
</body>
</html>
В этом примере с использованием псевдокласса :hover мы подсвечиваем строку на которую в настоящее время наведен курсор:
Обращаю Ваше внимание, что если вы используете псевдоклассы :link и :visited, то псевдокласс :hover должен быть расположен после них.
Результат нашего примера:
Рис. 17в Пример использования псевдокласса :hover.В этом примере были использованы относительные единицы измерения — процентные значения. Подробно о использовании различных единиц измерения в CSS будет рассмотрено в статье учебника «Единицы измерения CSS, размер шрифта».
Вопросы и задачи по теме
Перед тем как перейти к изучению следующей темы пройдите практическое задание:
- Для выполнения задания вам понадобится скачать архив и скопировать содержимое архива (HTML файл) в любую папку на вашем жестком диске:
- Составьте HTML страницу на которой:
- Ссылки по умолчанию имеют цвет текста черный.
- При наведении на ссылку цвет текста ссылки должен соответствовать её названию (red, green или blue).
- При выделении текста ссылки цвет заднего фона должен соответствовать её названию.
- Цвет первой буквы каждого абзаца должен соответствовать определенному цвету.
- При выделении текста абзаца цвет заднего фона должен соответствовать цвету первой буквы.
- Пока на абзаце удерживается кнопка мыши цвет текста должен соответствовать тематике абзаца (red, green или blue).
- Продвинутое задание: пока на абзаце удерживается кнопка мыши цвет первой буквы должен быть черный.
- Продвинутое задание: оптимизируйте (сократите) css код, образуя групповые селекторы, отвечающие за один и тот же цвет при том, или ином состоянии элемента, где это возможно.
- Перед выполнением практического задания внимательно изучите пример:
Практическое задание № 4.
После того как вы выполните упражнение проинспектируйте код страницы, открыв пример в отдельном окне, чтобы убедиться, что вы все выполнили правильно.