Познакомьтесь с селекторами CSS4

Возможно, вы уже знаете, что, говоря о веб-разработке, CSS3 и HTML5 являются двумя основными модными словами. Этот вопрос может измениться в будущем, поскольку почти два месяца назад консорциум World Wide Web (W3C) выпустил последний рабочий проект CSS Selector Level 4 .

В этой статье вы узнаете некоторые интересные вещи о новых селекторах CSS4.

В качестве вступления вы должны знать, что эти спецификации селекторов CSS4 являются довольно новыми, и ни один браузер на самом деле не поддерживает ни одну из перечисленных ниже функций. Далее, я надеюсь, что это изменится.

Итак, давайте посмотрим ниже некоторые отличные новые CSS4 вещи:

«Родительский» селектор

Раньше не было возможности выбрать родителя элемента в CSS (даже CSS3). В CSS4 самой важной новостью в текущем проекте W3C является поддержка родительского селектора.

$ul li:hover{
    background: #fff;
}

Используя вышеизложенное, при наведении указателя на элемент списка весь неупорядоченный список будет каким-то образом выделен путем добавления к нему белого фона.

Другой пример, о котором я сейчас думаю, — это использование форм HTML: например, мы могли бы выделить набор полей HTML, когда один из его входов сфокусирован:

Fieldset подсвечивается, когда внутренний вход сфокусирован

$fieldset input:focus{
    background: #f3eab1;
}

Матчи-Любой Псевдо-класс

CSS4-селектор: match () — это стандартизированная версия псевдо-класса Mozilla : -moz-any () . Это новое предложение может упростить процесс написания сложных CSS.

Вот быстрый пример:

:matches(section, article, aside) h1 {
    font-size: 2em;
}

как сокращение для:

section h1, article h1, aside h1 {
    font-size: 2em;
}

Другие CSS4 псевдоклассы

: Неопределенный псевдо-класс применяется к элементам пользовательского интерфейса , которые имеют значение в неопределенном состоянии. Например, элементы radio и checkbox можно переключать между проверенным и непроверенным состояниями, но иногда они находятся в неопределенном состоянии, не отмечены и не проверены. Аналогично, индикатор выполнения может находиться в неопределенном состоянии, когда процент выполнения неизвестен.