Css3 селекторы и псевдоклассы

Приветствую вас, дорогой читатель. Ранее я уже писал статью, в которой перечислил все основные css селекторы. Сегодняшний же пост будет выступать определенным дополнением, я расскажу вам о новых css3 селекторах, о которых не писал в прошлых статьях.

Улучшение работы с формами

Все, о чем я сегодня напишу – это новые псевдоклассы. В основном все они касаются новых возможностей форм.
:enabled – псевдокласс выберет все активные поля. То есть те, в которые можно что-то записать или они хотя бы доступны для чтения.
:disabled – противоположный псевдокласс, выбирает все заблокированные поля. Соответственно, с его помощью вы можете добавить дополнительные стили таким полям.
:read-only – выбор всех input, которые доступны только для чтения.
:read-write – выбираются все поля, которые доступны для редактирования.

Добавление стилей с учетом валидности

Также появились очень интересные псевдоклассы, с помощью которых вы можете назначить стили в зависимости от валидности или невалидности введенного значения. Раньше это можно было сделать только с помощью JavaScript.
:valid – выбирает все поля, введенное значение в которых удовлетворяет требованиям. Сами требования обычно задают с помощью атрибута pattern. Также может зависеть от типа поля. Например, поле, в котором пишется адрес электронной почты, будет считаться невалидным, если во введенном значении нет @.
:invalid – соответственно, выбирает все невалидные поля, в которых значение не соответствует тому, что ожидается. Например, вы можете сделать цвет текста в таких полях красным:

Input:invalid{
	Color: red;
}

1
Теперь если мы пишем неправильные значения в полях, текст становится красным. Соответственно, можно также использовать картинки галочки и крестика для того, чтобы показывать пользователю, правильно ли он заполнил все.

Стили для обязательных полей

Также хотел бы отметить, что соответствующий псевдокласс появился и для обязательных полей.
: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. А я с вами прощаюсь до следующих статей на этом блоге.

Платное/бесплатное по HTML/HTML5 и CSS/CSS3 на других сайтах

Слегка устаревший, но неплохой бесплатный курс по HTML

Бесплатный курс по современным технологиям HTML5 и CSS3

Платный курс по HTML5 и CSS3, в котором верстается 3 сайта (от простого к сложному)

Платный курс по HTML5 и CSS3 с теорией и примерами сложной верстки

Платные премиум уроки по HTML/CSS и другим технологиям

Добавить комментарий

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!: