Будущее состояние селекторов CSS

CSS многое делает со своими селекторами, но он может сделать гораздо больше, чтобы облегчить жизнь разработчикам. В этом руководстве мы рассмотрим некоторые из основных изменений, появившихся в Спецификации селекторов CSS 4, и то, как они могут упростить вашу жизнь при разработке.

По большей части они в настоящее время не поддерживаются браузерами!. Чтобы получить более полное представление о текущих селекторах, прочтите Полное руководство по началу работы с селекторами CSS.

:имеет

Выбор родителей. Мы все этого хотим, и :has пытается решить эту проблему. В настоящее время не поддерживается никакими браузерами, в основном из-за частых изменений синтаксиса, :has позволяет выбирать как родительский, так и предыдущий одноуровневый элемент. Вы когда-нибудь хотели выбрать элемент, а затем вернуться в DOM к его родителю? Это именно то, что делает этот элемент.

Чтобы привести пример этого, вот пример. Приведенный ниже CSS будет нацелен на абзац p, который имеет дочерний диапазон.

<p>
    I am targeted by the CSS
    <span>
        I am a span
    </span>
</p>
css Copy
p:has(> span) {
    color: red;
}

Точно так же :has() решает проблему предыдущих родственных селекторов. Приведенное ниже будет нацелено на абзац p, чей следующий брат или сестра - p.

<p>I am targeted</p>
<p>I am not</p>

div:has(:not(h1)) {
    color: red;
}

:is()

Обычно пишут много строк для выбора определенных элементов в CSS. Что-то вроде этого не редкость:

div span,
section span,
h1 span {
    color: red;
}

Наверняка есть способ проще? Что ж, :is() ЯВЛЯЕТСЯ более простым способом. Вышеизложенное можно свести к следующему:

:is(div, section, h1) span {
    color: red;
}

как насчет :где

:where() — это еще один селектор уровня 4, единственное отличие которого состоит в том, что его специфичность всегда равна 0. Специфика в CSS определяет, какие стили переопределяют какие. Наличие нулевой специфичности означает, что никогда не сделает стиль более конкретным, что может быть полезно в некоторых случаях, например, для обеспечения того, чтобы одни стили не перезаписывали другие.

В будущем этот пункт может включать число, которое позволит нам установить специфичность, для чего раньше люди использовали !important.

:is(div, section, h1) span {
    color: red;
}

Более сложный :нет

:not() поддерживается большинством браузеров, но только для простых селекторов. Что такое простой селектор? Это всего лишь один элемент. С этим обновлением мы сможем выбрать элемент, который не содержится внутри элемента. Например, ниже будут нацелены только элементы div, не содержащиеся в разделе:

div:not(section div) {
    color: red;
}

Выбор столбца сетки

Планируется ряд селекторов столбцов для следующего уровня селекторов CSS. Важно отметить, что это относится не только к таблицам, но и к сеткам. Это означает, что мы, наконец, сможем стилизовать определенные столбцы или элементы сетки, чего мы не могли делать раньше.

В новой спецификации есть 3 селектора для столбцов: E || F, который выбирает ячейку F в столбце E, и nth-col(n)/nth-last-col(n), оба из которых выбирают номер столбца.

Как и следовало ожидать, мы можем затем объединить их, чтобы стилизовать ячейки в этом столбце:

css Copy
.grid:nth-col(2n) || .title-cell {
    color: red;
}

В целом, эти изменения в CSS окажут значительное влияние на то, как мы используем язык.

Если вас это заинтересовало, вы можете узнать больше о CSS здесь или подписаться на меня в твиттере здесь.