| Fullscreen API | Живой стандарт | Определён :fullscreen. |
| HTML Living Standard | Живой стандарт | Нет изменений от HTML5. |
| Selectors Level 4 | Рабочий черновик | Определены :any-link, :local-link, :scope, :active-drop-target, :valid-drop-target, :invalid-drop-target, :current, :past, :future, :placeholder-shown, :user-error, :blank, :nth-match(), :nth-last-match(), :nth-column(), :nth-last-column() и :matches().Нет существенных изменений для псевдоклассов, определённых в Selectors Level 3 и HTML5 (не рассматрия семантическое значение). |
| HTML5 | Рекомендация | Определено семантическое значение в HTML контексте для :visited, :active, :enabled, :disabled, :checked и :indeterminate.Определены :default, :valid, :invalid, :in-range, :out-of-range, :required, :optional, :read-only, :read-write и :dir(). |
| CSS Basic User Interface Module Level 3 | Рекомендация | Определены :default, :valid, :invalid, :in-range, :out-of-range, :required, :optional, :read-only:read-write, но без связанного семантического значения. |
| Selectors Level 3 | Рекомендация | Определены :target, :root, :nth-child(), :nth-last-of-child(), :nth-of-type(), :nth-last-of-type(), :last-child, :first-of-type, :last-of-type, :only-child, :only-of-type, :empty и :not().Определён синтаксис для :enabled, :disabled, :checked и :indeterminate, но без связанного семантического значения.Нет значительных изменений для псевдоклассов, определённых в CSS Level 2 (Revision 1). |
| CSS Level 2 (Revision 1) | Рекомендация | Определены :lang(), :first-child, :hover и :focus.Нет значительных изменений для псевдоклассов, определённых в CSS Level 1. |
| CSS Level 1 | Рекомендация | Определены :link, :visited и :active, но без связанного семантического значения. |
CSS3 | Псевдоклассы форм
Псевдоклассы форм
Последнее обновление: 21.04.2016
Ряд псевдоклассов используется для работы с элементами форм:
:enabled: выбирает элемент, если он доступен для выбора (то есть у него не установлен атрибут disabled)
:disabled: выбирает элемент, если он не доступен для выбора (то есть у него установлен атрибут disabled)
:checked: выбирает элемент, если у него установлен атрибут checked (для флажков и радиокнопок)
:default: выбирает элементы по умолчанию
:valid: выбирает элемент, если его значение проходит валидацию HTML5
:invalid: выбирает элемент, если его значение не проходит валидацию
:in-range: выбирает элемент, если его значение находится в определенном диапазоне (для элементов типа ползунка)
:out-of-range: выбирает элемент, если его значение не находится в определенном диапазоне
:required: выбирает элемент, если у него установлен атрибут required
:optional: выбирает элемент, если у него не установлен атрибут required
Псевдоклассы enabled и disabled
Псевдоклассы enabled и disabled выбирают элементы форм в зависимости от того, установлен ли у них атрибут disabled:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Селекторы в CSS3</title>
<style>
:enabled {
border: 2px black solid;
color: red;
}
</style>
</head>
<body>
<p><input type="text" value="Enabled" /></p>
<p><input type="text" disabled value="Disabled" /></p>
</body>
</html>
Псевдокласс checked
Псевдокласс checked стилизует элементы формы, у которых установлен атрибут checked:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Селекторы в CSS3</title>
<style>
:checked + span {
color: red;
font-weight: bold; /* выделение жирным */
}
</style>
</head>
<body>
<h3>Выберите технологию</h3>
<p>
<input type="checkbox" checked name="html5"/><span>HTML5</span>
</p>
<p>
<input type="checkbox" name="dotnet"/><span>.NET</span>
</p>
<p>
<input type="checkbox" name="java"/><span>Java</span>
</p>
<h3>Укажите пол</h3>
<p>
<input type="radio" value="man" checked name="gender"/><span>мужской</span>
</p>
<p>
<input type="radio" value="woman" name="gender"/><span>женский</span>
</p>
</body>
</html>
Селектор :checked + span позволяет выбрать элемент, соседний с отмеченным элементом формы.
Псевдокласс default
Псевдокласс :default выбирает стандартный элемент на форме. Как правило, в роли такого элемента выступает кнопка отправки:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Селекторы в CSS3</title>
<style>
:default {
border: 2px solid red;
}
</style>
</head>
<body>
<form>
<input name="login"/>
<input type="submit" value="Войти" />
</form>
</body>
</html>
Псевдоклассы valid и invalid
Псевдоклассы :valid и :invalid стилизуют элементы формы в зависимости от того, проходят они валидацию или нет.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Селекторы в CSS3</title>
<style>
input:invalid {
border: 2px solid red;
}
input:valid {
border: 2px solid green;
}
</style>
</head>
<body>
<form>
<p><input type="text" name="login" placeholder="Введите логин" required /></p>
<p><input type="password" name="password" placeholder="Введите пароль" required /></p>
<input type="submit" value="Войти" />
</form>
</body>
</html>
Псевдоклассы in-range и out-of-range
Псевдоклассы :in-range и :out-of-range стилизуют элементы формы в зависимости от того, попадает ли
их значение в определенный диапазон. Это в первую очередь относится к элементу
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Селекторы в CSS3</title>
<style>
:in-range {
border: 2px solid green;
}
:out-of-range {
border: 2px solid red;
}
</style>
</head>
<body>
<form>
<p>
<label for="age">Ваш возраст:</label>
<input type="number" min="1" max="100" value="10" name="age"/>
</p>
<input type="submit" value="Отправить" />
</form>
</body>
</html>
Здесь атрибуты min и max задают диапазон, в которое должно попадать вводимое в поле значение:
Псевдоклассы required и optional
Псевдоклассы :required и :optional стилизуют элемент в зависимости от того, установлен ли у него атрибут required:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Селекторы в CSS3</title>
<style>
:optional {
border: 2px solid blue;
}
:required {
border: 2px solid red;
}
</style>
</head>
<body>
<form>
<p>
<label for="login">Логин:</label>
<input type="text" name="login" required />
</p>
<p>
<label for="password">Пароль:</label>
<input type="password" name="password" required />
</p>
<p>
<label for="name">Имя:</label>
<input type="text" name="name"/>
</p>
<input type="submit" value="Регистрация" />
</form>
</body>
</html>
Псевдоклассы в 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 задается указанному элементу, который является дочерним элементом другого.
Чтобы :first-child работал в IE <!DOCTYPE> должен объявляться в верхней части документа.
Например, для создания отступа для первого абзаца всех элементов <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
Псевдоклассы описывают различные состояния элементов. Например, какой цвет будет у активной ссылки или при наведении. Чем псевдокласс отличается от обычного класса?
- названия псевдоклассов нам не нужно самим придумывать, их надо просто знать.
- имя псевдокласса добавляется через двоеточие к селектору, тогда как название обычного класса указывается внутри тега HTML разметки.
Псевдоклассы для ссылок
:hover – при наведении курсора
:link – не посещенная ссылка
:active – состояние при нажатой ссылке
:visited — посещенная ссылка
Идея состоит в том, что для каждого состояния ссылки, задаются свои CSS стили. Например, изменим цвет ссылки при наведении курсора, на красный.
a:hover {
color: red;
}
Чаще всего верстальщики сталкиваются с псевдоклассами работающими с ссылками, потому и знают их лучше всех.
Псевдоклассы для input
Однако больше всего псевдоклассов используется для работы с элементами формы, особенно для input.
:focus – меняет стиль для поля, получившего фокус (клик внутри поля).
По умолчанию браузер делает обводку внутри инпута, попадающего в фокус. Мы отменяем дефолтную обводку и устанавливаем свои стили.
input:focus {
outline: none;
border: 2px solid green;
}
:checked – применяется к checkbox и radio элементам формы, когда они находятся во включенном состоянии.
:empty – представляет пустой элемент, например <span></span>
span:empty {
background: blue;
width: 30px;
height: 30px;
display: block;
}
:invalid – применяется к полям формы, когда вводимые пользователем данные не подходят под заданный тип (невалидные данные).
Например, в поле с типом данных tel, пользователь ввел имя и тогда это поле станет красным.
<input type="tel" required>input:invalid {
background: red;
}
:valid – если валидация была успешна, то цвет поля станет зеленым.
input:valid {
background: green;
}
Псевдокласс first-child
:first-child – задает CSS стили первому дочернему элементу в группе элементов одного родителя.
<ul>
<li>child 1</li>
<li>child 2</li>
<li>child 3</li>
<li>child 4</li>
<li>child 5</li>
</ul>
li:first-child {
background: grey;
}
У первого элемента списка появился серый фон.
:last-child – задает CSS стили последнему дочернему элементу в группе элементов одного родителя.
li:last-child {
background: orange;
}
У последнего элемента списка появился оранжевый фон.
Псевдокласс nth-child
Для примера возьмем все тот же список. Как быть, если нужно выбрать не первый и не последний элемент списка, а например второй? Так вот, псевдокласс nth-child позволяет обращаться к элементу через порядковый номер, расположения в HTML-разметке или через выражение.
Выбор через порядковый номер, начиная с 1-го.
// второй элемент белый
li:nth-child(2) {
color: #fff;
}// третий элемент черный
li:nth-child(3) {
color: #000;
}
Через ключевые слова:
:even – выбирает все четные номера:odd – выбирает все нечетные номера
.li:nth-child(even) {
background: white;
}
li:nth-child(odd) {
background: blue;
}
Через выражение:
n – это счетчик, который может увеличивается от 0 до количества дочерних элементов. Выражение позволяет делать более сложную выборку элементов.
:nth-child(3n) // каждый третий элемент (3, 6, 9)
:nth-child(3n+4) // каждый третий элемент, начиная с четвертого (4, 7, 10)
Специфичные псевдоклассы
target: — применяется к id, который указан в адресной строке браузера.
<div>Заголовок раздела</div>
h2:target {
color: red;
font-weight: 500;
}
Комбинирование псевдоклассов
Можно на один селектор навесить несколько псевдоклассов, при этом порядок не важен. Однако в одной комбинации нельзя использовать взаимоисключающие псевдоклассы.
При наведении курсора на последний дочерний элемент списка, сделаем текст зеленым.
li:last-child:hover{
color:green;
}
Не стоит изучать псевдоклассы просто по справочнику, в отрыве от реального макета. Только верстая макет, быстро придет понимание, где и какой использовать псевдокласс. Посмотрите, как верстают сайты профессионалы в этом видеокурсе.
- Создано 04.10.2019 10:35:19
- Михаил Русаков
Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!
Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.
Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления
Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.
Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):
Псевдоклассы | w3.org.ua
Что такое псевдоклассы?
Псевдоклассы используются для определения специальных состояний элемента. Например, можно определить:
- стили для элемента, когда на него наведена мышь;
- стили для гиперссылок.
Также, можно сказать, что псевдоклассы, это классы которые описаны в CSS, но не присутствуют в HTML коде, хотя и влияют на оформление элементов. Применение псевдоклассов позволяет расширить возможности оформления элементов на странице.
Пример использования
селектор:псевдокласс { свойство: значение; }
селектор:псевдокласс { свойство: значение; } |
Обратите внимание, что селектор:псевдокласс пишутся слитно! Без пробелов!
Псевдоклассы для оформления гиперссылок
Гиперссылки могут быть оформлены различными способами, так чаще всего используются следующие псевдоклассы:
- :link — псевдокласс описывающий обычное отображение гиперссылки;
- :visited — посещенная гиперссылка, часто отображают серым цветом, последнее время наметилась тенденция не оформлять посещенные гиперссылки;
- :hover — состояние ссылки, когда на нее наведен курсор мыши. Псевдокласс hover можно применять и на других элементах;
- :active — состояние ссылки в момент клика мышью. Данный класс можно применять и на других элементах, чтобы обозначить клик мышью. Например на кнопках.
Применение псевдоклассов для оформления ссылок:
/* непосещенная ссылка*/ a:link { color: #FF0000; } /* посещенная ссылка */ a:visited { color: #00FF00; } /* наведение мыши на ссылку */ a:hover { color: #FF00FF; } /* клик по ссылки */ a:active { color: #0000FF; }
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
/* непосещенная ссылка*/ a:link { color: #FF0000; }
/* посещенная ссылка */ a:visited { color: #00FF00; }
/* наведение мыши на ссылку */ a:hover { color: #FF00FF; }
/* клик по ссылки */ a:active { color: #0000FF; } |
Обратите внимание, что псевдокласс :hover должен следовать после описания :link и :visited, для правильного срабатывания приоритета. Также, псевдокласс :active должен располагаться ниже класса :hover.
Псевдоклассы не являются регистрозависимыми.
В HTML5 переосмыслили понятие гиперссылки, которая теперь может выступать как блочный элемент.
Псевдоклассы и классы в CSS
Выше мы описывали применение псевдоклассов к тегам HTML. Однако, можно определить псевдоклассы и CSS классам, в таком случае описание выглядит следующим образом:
a.hello:hover { color: red; }
a.hello:hover { color: red; } |
.one:hover { background: green; }
.one:hover { background: green; } |
Псевдокласс :first-child
Псевдокласс :first-child позволяет оформить первый элемент вложенный внутри родителя.
Например, данный код выделит синим цветом первый параграф на странице:
p:first-child { color: blue; }
p:first-child { color: blue; } |
Чтобы выделить первые элементы span во всех параграфах необходимо использовать код:
p span:first-child { color: red; }
p span:first-child { color: red; } |
Для выделения всех элементов span внутри первого элемента p необходимо использовать:
p:first-child span { color: blue; }
p:first-child span { color: blue; } |
C псевдоклассами очень удобно работать в препроцессоре Sass
Еще псевдоклассы
| Селектор | Пример | Описание |
|---|---|---|
| :active | a:active | Выбор активной ссылки |
| :checked | input:checked | Все выбранные (отмеченные) элементы input |
| :checked | input:checked | Все выбранные (отмеченные) элементы input |
| :empty | p:empty | Все элементы p которые не имеет дочерних элементов |
| :focus | input:focus | Выбрать элемент input находящийся в фокусе |
| :invalid | input:invalid | Выбрать все элементы input с неправильными значениями |
| :last-child | p:last-child | Выбрать все элементы p, которые являются последним дочерним элементом родителя |
| :checked | input:checked | Все выбранные (отмеченные) элементы input |
| :required | input:required | Выбрать все обязательные к заполнению элементы input |
Псевдоклассы — Клеверенс — База знаний
Последние изменения: 10.12.2018
Выберите уточнение:
Псевдоклассы — это специальные команды, которые позволяют менять стиль элемента в зависимости от действий пользователя, а также положения этого элемента (тега) в общем потоке документа, что позволяет разбавить дизайн страницы некой динамикой и логикой.
Классическим примером применения псевдоклассов является ссылка, которая меняет свой цвет при наведении на неё курсора или ссылка, меняющая свой цвет после того, как по ней осуществили переход.
В Mobile SMARTS используются следующие псевдоклассы:
hover (для кнопок и списков) — определяет стиль элемента, на который наведён курсор мыши.
active (для кнопок и списков) — определяет стиль ссылки (элемента), которая становится активной, но переход по ней еще не совершен.
disabled (для кнопок) — определяет стиль кнопки с атрибутом enabled=»False».
С помощью псевдоклассов в Mobile SMARTS можно делать динамичными кнопки и элементы списка. Рассмотрим подробнее.
Для кнопок
Возьмем за образец кнопку «Выйти» в окне успешной активации лицензии для продукта Frontol Simple Mobile. С помощью псевдоклассов можно сделать эту кнопку всегда активной, всегда неактивной или подсвечивать другим цветом в момент длительного нажатия.
Код кнопки
CSS
<button direction="return" ><r color="#EF5981">ВЫЙТИ</r></button>Css-класс white_button
CSS
} .white_button:active { background-color: #FFFFFF; corner-radius: 4%; font-size:14dp; border: 0px solid #1F3C5B; color: white; padding: 10dp 16dp 9dp 16dp;Кнопка неактивна
CSS
} white_button:disabled { background-color: #6A7F8D; corner-radius: 4%; font-size:14dp; border: 0px solid #1F3C5B; color: white; padding: 10dp 16dp 9dp 16dp; }Кнопка меняет цвет при длительном нажатии.
CSS
} .white_button:hover { background-color: #FFFFFF; corner-radius: 4%; font-size:14dp; border: 0px solid #1F3C5B; color: white; padding: 10dp 16dp 9dp 16dp;Для элементов списка.
При длительном нажатии элемент списка подсвечивается другим цветом. Реализуется с помощью псевдоклассов active, disabled.
CSS
.list_item_custom { background-color: #EDF2F6; padding:0dp 0dp 5dp 0dp; } .list_item_custom:active { background-color: #919191; padding:0dp 0dp 5dp 0dp; } .list_item_custom:disabled { background-color: #6A7F8D; padding:0dp 0dp 5dp 0dp; }
В данном случае псевдоклассами являются hover, active, disabled. Для каждого случая задан свой атрибут background-color, что позволяет гибко регулировать цвет фона кнопки для разных случаев.
Псевдоклассы CSS — Примеры
Помимо CSS селекторами рассмотрим псевдоклассы.| a | :hover | { color: | #333333; } |
| ⇑ | ⇑ | ⇑ | ⇑ |
| селектор | :псевдокласс | свойство | значение |
Псевдоклассы, применимые только к ссылкам
<style type="text/css">
a:link { color: blue; } /* не посещённые ссылки */
a:visited { color: green; } /* посещённые ссылки */
</style>
<a href="#">анкор</a>анкорПсевдоклассы, благодаря которым осуществляется динамическое изменение элемента
<style type="text/css">
div { width: 50%; }
div:hover { width: 100%; } /* изменение происходит при наведении (увеличивается ширина блока) */
div:active { /* изменение происходит при нажатии (блок смещается вниз) */
position: relative;
top: 10px;
}
</style>
<div>содержимое</div>навести мышку и нажать
Теперь вспомним о хэш-ссылках. Тег a также можно вынести за пределы div.
<style type="text/css">
div { width: 50%; }
div:target { width: 100%; } /* при переходе на URL с символом # (http://shpargalkablog.ru/2012/02/psevdoklassy-css.html#target) */
</style>
<div><a href="#target">нажать</a></div>Для элементов формы, таких как input, select и textarea
Псевдокласс :focus также функционирует для других элементов, но нужны дополнительные атрибуты.<style type="text/css">
input { width: 50%; }
input:focus { width: 100%; } /* изменение происходит при фокусе (увеличивается ширина блока) */
</style>
<input type="text" placeholder="подсказка"/><style type="text/css">
input:valid { border: 3px groove green; } /* при соответствии указанному типу */
input:invalid { border: 3px groove red; } /* при несоответствии указанному типу */
</style>
<input type="email"/><input type="url"/><style>
input:in-range { border: 3px groove green; } /* в пределах диапазона допустимых значений */
input:out-of-range { border: 3px groove red; } /* за пределами диапазона допустимых значений */
</style>
<input type="number" max="10" min="1" value="5"><input type="number" max="10" min="1" value="11"><style type="text/css">
input[type="radio"] + label ~ input[type="checkbox"],
input[type="radio"] + label ~ input[type="checkbox"] + label,
input[type="radio"] + label ~ input[type="checkbox"] + label + br { display: none; }
input[type="radio"]:checked + label ~ input[type="checkbox"],
input[type="radio"]:checked + label ~ input[type="checkbox"] + label,
input[type="radio"]:checked + label ~ input[type="checkbox"] + label + br { display: inline-block; } /* изменение видно при установлении галочки */
:default{ background: yellow; } /* выделенный по умолчанию элемент формы */
</style>
<form>
<input type="radio" name="odin"/> <label>пункт</label>
<input type="checkbox"/> <label>подпункт</label>
<input type="checkbox"/> <label>подпункт</label>
<input type="radio" name="odin"/> <label>пункт</label>
<button>Кнопка 1</button>
</form>
выбрать пункт
подпункт
подпункт
выбрать пункт
Помимо :checked есть ещё :indeterminate. Но он может найти своё применение разве что с помощью jQuery (автор). А вместо остальных можно применить селектор с соответствующим атрибутом.
| в теге есть атрибут | в теге отсутствует атрибут | описание атрибута | ||
|---|---|---|---|---|
| :read-only | [readonly] | :read-write | :not([readonly]) | не может изменяться пользователем |
| :required | [required] | :optional | :not([required]) | обязательное для заполнения |
| :disabled | [disabled] | :enabled | :not([disabled]) | недоступным для активации, не может получить фокус |
Структурные псевдоклассы
Пропускаю :root в связи с его заменой на html.
<style type="text/css">
b:nth-child(1) { color: red; } /* или */ b:first-child { color: red; }
b:nth-child(4) { color: blue; } /* или */ b:nth-last-child(12) { color: blue; }
b:nth-child(8) { background: green; display: inline-block; padding: 3px; } /* или */ b:empty { background: green; display: inline-block; padding: 3px; }
b:nth-child(15) { color: orange; } /* или */ b:last-child { color: orange; }
</style>
<b>1</b> <b>2</b> <b>3</b> <b>4</b> <b>5</b> <b>6</b> <b>7</b> <b></b> <b>9</b> <b>10</b> <b>11</b> <b>12</b> <b>13</b> <b>14</b> <b>15</b>1 2 3 4 5 6 7 9 10 11 12 13 14 15 стиль присваивается одному (порядковый номер в скобках :nth-child) из одинаковых тегов, :first-child — для первого из однородных тегов, :last-child — для последнего, :empty — для пустого.
<style type="text/css">
b:not(.izo) { color: red; } /* или */ b:not([title="без стиля"]) { color: red; }
</style>
<b>1</b> <b>2</b> <b title="без стиля">3</b> <b>4</b> <b>5</b> <b>6</b> <b>7</b> <b>8</b> <b>9</b> <b>10</b> <b>11</b> <b>12</b> <b>13</b> <b>14</b> <b>15</b>1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 стиль присваивается всем элементам, кроме того, который содержит в первом случае или title=»без стиля» во втором.
<style type="text/css">
b:nth-child(n+9) { color: red; }
b:nth-child(-n+5) { color: orange; }
</style>
<b>1</b> <b>2</b> <b>3</b> <b>4</b> <b>5</b> <b>6</b> <b>7</b> <b>8</b> <b>9</b> <b>10</b> <b>11</b> <b>12</b> <b>13</b> <b>14</b> <b>15</b>1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 стиль присваивается всем после/до определённого номера.
<style type="text/css">
b:nth-child(4n) { color: red; }
</style>
<b>1</b> <b>2</b> <b>3</b> <b>4</b> <b>5</b> <b>6</b> <b>7</b> <b>8</b> <b>9</b> <b>10</b> <b>11</b> <b>12</b> <b>13</b> <b>14</b> <b>15</b>1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 стиль присваивается элементам, чередующимся на 4, другими словами 4, 4*2, 4*3 …
<style type="text/css">
b:nth-child(4n+5) { color: red; }
</style>
<b>1</b> <b>2</b> <b>3</b> <b>4</b> <b>5</b> <b>6</b> <b>7</b> <b>8</b> <b>9</b> <b>10</b> <b>11</b> <b>12</b> <b>13</b> <b>14</b> <b>15</b>1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 стиль присваивается элементам, чередующимся на 4, но начинающимся спустя 5 цифр, а именно 5, 5+4, 5+4*2, 5+4*3 …
<style type="text/css">
b:nth-child(4n-5) { color: red; }
</style>
<b>1</b> <b>2</b> <b>3</b> <b>4</b> <b>5</b> <b>6</b> <b>7</b> <b>8</b> <b>9</b> <b>10</b> <b>11</b> <b>12</b> <b>13</b> <b>14</b> <b>15</b>1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 сразу перейдём к расчётам, а именно 4-5 (отрицательное число пропускается), 5-4*2, 5-4*3, 5-4*4 …
<style type="text/css">
b:nth-child(even) { color: red; }
b:nth-child(odd) { color: blue; }
</style>
<b>1</b> <b>2</b> <b>3</b> <b>4</b> <b>5</b> <b>6</b> <b>7</b> <b>8</b> <b>9</b> <b>10</b> <b>11</b> <b>12</b> <b>13</b> <b>14</b> <b>15</b>1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 стиль применим ко всем чётным/нечётным.
Чтобы не утруждать себя подсчётами, можно воспользоваться nth-child tester page.
:nth-last-child действует аналогично, только подсчёт ведёт от последнего элемента.
<style type="text/css">
b:nth-of-type(3n) { color: red; }
</style>
<b>1</b> <span>☆</span> <b>2</b> <span>☆</span> <b>3</b> <span>☆</span> <b>4</b> <span>☆</span> <b>5</b> <span>☆</span> <b>6</b> <span>☆</span> <b>7</b> <span>☆</span> <b>8</b>1 ☆ 2 ☆ 3 ☆ 4 ☆ 5 ☆ 6 ☆ 7 ☆ 8 нужно выбрать цифры, заключённые в тег b, и среди них присвоить стиль только цифрам, заключённые в тег b и идущим через 3. То есть :nth-of-type осуществляет выборку элементов из указанного типа (их в примере выше 8).
<style type="text/css">
b:nth-child(3n) { color: red; }
</style>
<b>1</b> <span>☆</span> <b>2</b> <span>☆</span> <b>3</b> <span>☆</span> <b>4</b> <span>☆</span> <b>5</b> <span>☆</span> <b>6</b> <span>☆</span> <b>7</b> <span>☆</span> <b>8</b>1 ☆ 2 ☆ 3 ☆ 4 ☆ 5 ☆ 6 ☆ 7 ☆ 8 :nth-child берёт в расчёт все 15 элементов, но стиль присваивает в том случае, когда порядковая цифра и тег, в данном случае b, совпадают. То есть он выбрал бы и звезду между цифрами 3 и 4, если бы она была заключена в тег b.
:nth-last-of-type действует аналогично :nth-of-type, только подсчёт ведёт от последнего элемента.
<style type="text/css">
b:only-child { color: red; }
</style>
☆ <span><b>1.1</b> <b>1.2</b></span> ☆ <span><b>2.1</b></span> ☆ <span><b>3.1</b> <b>3.2</b></span> ☆
☆ 1.1 1.2 ☆ 2.1 ☆ 3.1 3.2 ☆ стиль действует, когда в родителе присутствует только один элемент. То есть в теге span содержится лишь один тег b.
Разницу между :first-child (см. первый пример Структурных псевдоклассов) и :first-of-type, :last-child и :last-of-type, :only-child и :only-of-type в отображении браузерами я не увидела.
Языковой псевдокласс
<style type="text/css">
:lang(en){ font-style: italic; }
</style>
<span lang="en"> ru - Russian; en - English; de - German; fr - French; it - Italian </span>ru — Russian; en — English; de — German; fr — French; it — Italian для слов на английском языке будет присвоен наклонный стиль. Для большинства браузеров требуется атрибут lang.
CSS Псевдоклассы
Что такое псевдоклассы?
Псевдокласс используется для определения особого состояния. элемента.
Например, его можно использовать для:
- Стиль элемента, когда пользователь наводит курсор мыши на него
- Различный стиль посещенных и непосещенных ссылок
- Стиль элемента, когда он получает фокус
Синтаксис
Синтаксис псевдоклассов:
селектор: псевдокласс {
свойство: значение;
}
Псевдоклассы якоря
Ссылки могут отображаться по-разному:
Пример
/ * непосещенная ссылка * /a: link {
color: # FF0000;
}
/ * посетил
ссылка * /
a: посетил {
color: # 00FF00;
}
/ * наведение указателя мыши на ссылку * /
a: hover {
color: # FF00FF;
}
/ * выбранная ссылка * /
a: активна {
цвет: # 0000FF;
}
Примечание: a: hover ДОЛЖЕН стоять после a: link и a: посетил в определении CSS, чтобы быть эффективным! a: активный ДОЛЖЕН быть после a: наведите указатель мыши на в определении CSS для повышения эффективности!
Имена псевдоклассов не чувствительны к регистру.
Псевдоклассы и классы CSS
Псевдоклассы можно комбинировать с классами CSS:
Когда вы наводите курсор на ссылку в примере, она меняет цвет:
Наведите курсор на
Пример использования псевдокласса : hover в элементе
Простая всплывающая подсказка
Наведите указатель мыши на элемент
(например, всплывающую подсказку):
Наведите указатель мыши на меня, чтобы показать элемент.
Тада! А вот и я!
Пример
p {дисплей: нет;
цвет фона: желтый;
отступ: 20 пикселей;
}
div: hover p {
display: block;
}
CSS — Псевдокласс: first-child
Псевдокласс : first-child соответствует указанному элементу, который является первым дочерним элементом другого элемента.
Соответствует первому элементу
В следующем примере селектор соответствует любому элементу
, который является первым дочерним элементом любого элемента:
Соответствует первому элементу
во всех элементахВ следующем примере селектор соответствует первому элементу во всех элементах
:
Сопоставить все элементы
во всех первых дочерних элементахВ следующем примере селектор соответствует всем элементам в элементах
, которые являются первым дочерним элементом другого элемента:
CSS — Псевдокласс: lang
Псевдокласс : lang позволяет определять специальные правила для разных языков.
В приведенном ниже примере : lang определяет кавычки для элементов с lang = «no»:
Пример
q: lang (no) {
цитаты: «~» «~»;
}
Некоторый текст Цитата в абзаце
Немного текста.