Псевдоэлемент - это селекторы, которые определяют область элементов, которые изначально отстутсвуют в передеве элемента.
Эта область создается при помощи 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>