Псевдоэлемент - это селекторы, которые определяют область элементов, которые изначально отстутсвуют в передеве элемента.
Эта область создается при помощи CSS.
Псевдоэлементы ::before и ::after
::before
Псевдоэлемент#before позволяет с помощью CSS добавить псевдотег внутрь другого элемента и оформить его. Содержимое псевдотега задаётся с помощью свойства content.
Ведёт себя псевдотег так же, как обычный span с текстом.
Ему можно задавать дополнительные стили.
Чтобы псевдоэлемент появился, ему необходимо задать свойство content. Достаточно даже пустой строки в значении свойства — content: "";.
::after
Псевдоэлемент#after аналогичен before. Отличие заключается в том, что он добавляет псевдотег не в начало, а в конец элемента.
Псевдоэлементы before и after можно использовать одновременно.
Псевдоэлементы ::first-line и ::first-letter
Псевдоэлемент#first-line задает стиль первой строки форматированного текста. В правилах стиля допустимо использовать только свойства, относящиеся к шрифту, изменению цвета текста и фона.
Пример использования:
p::first-line { }Аналогично псевдоэлемент#first-letter определяет стиль первого символа в тексте элемента, к которому добавляется. К этому псевдоэлементу могут применяться только стилевые свойства, связанные со свойствами шрифта, полями, отступами, границами, цветом и фоном.
Пример использования:
p::first-letter { }Псевдоэлементы взаимодействия с элементами форм
Псевдоклассы enabled и disabled
- :#enabled: выбирает элемент, если он доступен для выбора (то есть у него не установлен атрибут disabled)
- :#disabled: выбирает элемент, если он не доступен для выбора (то есть у него установлен атрибут disabled
1
2 <!DOCTYPE html>
3 <html>
4 <head>
5 <meta charset="utf-8">
6 <title>Селекторы в CSS3</title>
7 <style>
8 :enabled {
9 border: 2px black solid;
10 color: red;
11 }
12 </style>
13 </head>
14 <body>
15 <p><input type="text" value="Enabled" /></p>
16 <p><input type="text" disabled value="Disabled" /></p>
17 </body>
</html>Псевдокласс checked
- :#checked: выбирает элемент, если у него установлен атрибут checked (для флажков и радиокнопок)
1
2 <!DOCTYPE html>
3 <html>
4 <head>
5 <meta charset="utf-8">
6 <title>Селекторы в CSS3</title>
7 <style>
8 :checked + span {
9 color: red;
10 font-weight: bold; /* выделение жирным */
11 }
12 </style>
13 </head>
14 <body>
15 <h2>Выберите технологию</h2>
16 <p>
17 <input type="checkbox" checked name="html5"/><span>HTML5</span>
18 </p>
19 <p>
20 <input type="checkbox" name="dotnet"/><span>.NET</span>
21 </p>
22 <p>
23 <input type="checkbox" name="java"/><span>Java</span>
24 </p>
25
26 <h2>Укажите пол</h2>
27 <p>
28 <input type="radio" value="man" checked name="gender"/><span>мужской</span>
29 </p>
30 <p>
31 <input type="radio" value="woman" name="gender"/><span>женский</span>
32 </p>
33 </body>
</html>Селектор :checked + span позволяет выбрать элемент, соседний с отмеченным элементом формы.
Псевдокласс default
- :#default: выбирает элементы по умолчанию
1
2 <!DOCTYPE html>
3 <html>
4 <head>
5 <meta charset="utf-8">
6 <title>Селекторы в CSS3</title>
7 <style>
8 :default {
9 border: 2px solid red;
10 }
11 </style>
12 </head>
13 <body>
14 <form>
15 <input name="login"/>
16 <input type="submit" value="Войти" />
17 </form>
18 </body>
</html>Псевдоклассы valid и invalid
- :#valid: выбирает элемент, если его значение проходит валидацию HTML5
- :#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: выбирает элемент, если его значение не находится в определенном диапазоне
1
2 <!DOCTYPE html>
3 <html>
4 <head>
5 <meta charset="utf-8">
6 <title>Селекторы в CSS3</title>
7 <style>
8 :in-range {
9 border: 2px solid green;
10 }
11 :out-of-range {
12 border: 2px solid red;
13 }
14 </style>
15 </head>
16 <body>
17 <form>
18 <p>
19 <label for="age">Ваш возраст:</label>
20 <input type="number" min="1" max="100" value="10" id="age" name="age"/>
21 </p>
22 <input type="submit" value="Отправить" />
23 </form>
24 </body>
</html>Здесь атрибуты min и max задают диапазон, в которое должно попадать вводимое в поле значение:
Псевдоклассы required и optional
- :#required: определяет, что для отправки формы данное поле предварительно должно быть заполнено.
Зайдите на любой популярный сайт, имеющий форму регистрации. Вы заметите, что при вводе данных в неправильном формате, пользователя сразу уведомляют о наличии проблемы. Вы получите примерно такое сообщение:
- “Обязательное поле” (Вы не можете оставить поле пустым).
- “Пожалуйста, введите номер телефона в формате xxx-xxxx” (Чтобы данные считались корректными, их необходимо указать в определённом формате).
- “Пожалуйста, введите корректный email-адрес” (вы ввели данные в неправильном формате).
- “Длина пароля должна быть от 8 до 30 символов и включать одну заглавную букву, один символ, и одну цифру.” (Требования к формату данных достаточно конкретные).
Это называется валидацией формы. По мере ввода, браузер и/или сервер проверяют данные, чтобы определить, соответствуют ли они требуемому формату. Валидация, выполняемая в браузере, называется валидацией на стороне клиента, а выполняемая на сервере — валидацией на стороне сервера. В этом разделе мы сосредоточимся на валидации, выполняемой на стороне клиента.
- :#optional: выбирает элемент, если у него не установлен атрибут required В формах важно визуально отмечать, какие поля следует обязательно заполнить, а какие можно пропустить. Так пользователям не придётся заполнять лишнее.
Псевдокласс :optional помогает улучшить опыт взаимодействия с формой. Визуально отмечаем, что нам не так уж нужно знать, и экономим драгоценное время и нервы пользователя.
1
2 <!DOCTYPE html>
3 <html>
4 <head>
5 <meta charset="utf-8">
6 <title>Селекторы в CSS3</title>
7 <style>
8 :optional {
9 border: 2px solid blue;
10 }
11 :required {
12 border: 2px solid red;
13 }
14 </style>
15 </head>
16 <body>
17 <form>
18 <p>
19 <label for="login">Логин:</label>
20 <input type="text" id="login" name="login" required />
21 </p>
22 <p>
23 <label for="password">Пароль:</label>
24 <input type="password" id="password" name="password" required />
25 </p>
26 <p>
27 <label for="name">Имя:</label>
28 <input type="text" id="name" name="name"/>
29 </p>
30 <input type="submit" value="Регистрация" />
31 </form>
32 </body>
</html>