Приветствую вас, дорогой читатель. Ранее я уже писал статью, в которой перечислил все основные css селекторы. Сегодняшний же пост будет выступать определенным дополнением, я расскажу вам о новых css3 селекторах, о которых не писал в прошлых статьях.
Улучшение работы с формами
Все, о чем я сегодня напишу – это новые псевдоклассы. В основном все они касаются новых возможностей форм.
:enabled – псевдокласс выберет все активные поля. То есть те, в которые можно что-то записать или они хотя бы доступны для чтения.
:disabled – противоположный псевдокласс, выбирает все заблокированные поля. Соответственно, с его помощью вы можете добавить дополнительные стили таким полям.
:read-only – выбор всех input, которые доступны только для чтения.
:read-write – выбираются все поля, которые доступны для редактирования.
Добавление стилей с учетом валидности
Также появились очень интересные псевдоклассы, с помощью которых вы можете назначить стили в зависимости от валидности или невалидности введенного значения. Раньше это можно было сделать только с помощью JavaScript.
:valid – выбирает все поля, введенное значение в которых удовлетворяет требованиям. Сами требования обычно задают с помощью атрибута pattern. Также может зависеть от типа поля. Например, поле, в котором пишется адрес электронной почты, будет считаться невалидным, если во введенном значении нет @.
:invalid – соответственно, выбирает все невалидные поля, в которых значение не соответствует тому, что ожидается. Например, вы можете сделать цвет текста в таких полях красным:
Input:invalid{
Color: red;
}
Теперь если мы пишем неправильные значения в полях, текст становится красным. Соответственно, можно также использовать картинки галочки и крестика для того, чтобы показывать пользователю, правильно ли он заполнил все.
Стили для обязательных полей
Также хотел бы отметить, что соответствующий псевдокласс появился и для обязательных полей.
:required – выберет элементы, у которых есть данный атрибут. То есть все поля, обязательные к заполнению.
:optional – противоположный класс, выберет поля, которые являются необязательными.
На этом у меня, пожалуй, все. О селекторах атрибутов, которые тоже относятся к CSS3, я уже писал ранее, читайте эту статью.
Псевдокласс :not
Напоследок я хотел бы вам еще продемонстрировать работу с селектором :not, потому что о нем я вообще не писал.
Итак, :not является своего рода антиселектором, который позволяет определить, к каким элементам НЕ ПРИМЕНЯТЬ стили. Чтобы вам было понятнее, я приведу пару примеров.
A:not(:last-child){} – выберет все ссылки на странице, кроме последней.
.nav:not(li){} – выберет все элементы с классом nav, но это не должны быть пункты списка (li).
#article p:not(.special:first-child) – выберет все абзацы в блоке article, кроме первого абзаца с классом special.
Как видите, в круглых скобках для псевдокласса записывается условие: что именно нужно исключить из выбора. В условии также можно записывать комбинированные селекторы, так что вы можете выбрать и исключить все, что угодно.
Вот такой вот нужный иногда псевдокласс, он нужен не только в теории, но и на практике. Его практическую пользу я показываю, например, в этой статье, где нужно добавить псевдоэлемент всем ссылкам, кроме последней. Ах да, еще же вы можете продолжить составление селектора после :not(). Например:
Div:not(#header) .wrap – выбирает все дивы c классом wrap, кроме дива с id = “header”
Я думаю, сказал все, ничего не пропустил. Это были селекторы, которые появились в CSS3. А я с вами прощаюсь до следующих статей на этом блоге.