Несколько CSS псевдоселекторов о которых я не знал

Привет. Хочу рассказать о нескольких псевдоселекторах. Вы наверняка уже знаете о :hover, :last-child. Сегодня же пойдёт речь о: empty, in-range или :out-of-range, optional, fullscreen, not.

:empty

Данный селетор выбирает элементы которые на данный момент полностью пустые. Никаких вложенных элементов, пробелов или текста, за исключением комментариев. Поддержка этого правила очень хорошая caniuse, работает во всех браузерах кроме нашего любимого IE8 и ниже.

Кстати, данный селектор не работает для одиночных тегов, то есть нельзя его использовать для input, но можно для textarea.

:in-range

Представьте вам надо разместить поле для ввода возраста. Например, такое: input type=’number’ min=’18’. Теперь чтобы стилизовать его, вы можете использовать псевдоселектор :in-range, который вызовет необходимое оформление когда пользователь введёт любое число больше 18.

Поддерживаются все современные браузеры и IE начиная с 10.

:optional

В HTML5 поля ввода мы можем использовать специальный параметр – required, который означает обязательное заполнение этого поля. Чтож, а как бы нам средствами CSS выделить поля необходимые к заполнению, и опциональные ? Для этого существуют псевдоклассы – :required и :optional. В деле они работают так:

Используйте в любых браузерах, и в IE начиная с 10.

:fulscreen

В недавнем времени мы получили в распоряжение FullScreen API, который позволяет показать в полноэкранном режиме какой-то отдельный элемент. Благодаря этому стало ещё проще делать фото и видео-галереи. Вместе с javascript методами, появился и новый псевдокласс – :fullscreen. Используйте его для оформления элементов которые перешли в полноэкранный режим.

:not

Пожалуй это самый используемый и мощный из представленных в этом списке псевдоклассов. Комбинируя его с другими селекторами можно добиться впечатляющих результатов. Я приведу самые простые примеры:

Leave a Reply

Your email address will not be published. Required fields are marked *