Вольный перевод статьи Intriguing CSS Level 4 Selectors нашим frontend разработчиком Сэмом Булатовым.
CSS селекторы массово прогрессировали на протяжении многих лет и давали все новые возможности разработчикам, для построения своих страниц. Примеры в этой статье являются частью спеки о селекторах 4го уровня CSS. Давайте рассмотрим лучше 7 интригующих селекторов, некоторые из которых я уверен вы использовали на практике.
Селекторы 4-го уровня
4-й уровень содержит знакомые псевдо-классы такие как nth-child, last-childи другие.
Спека описывает много нового, а также некоторые крайне удобные псевдо-классы и псевдо-элементы, по этой теме мы быстро разберемся в чем разница между одиночным и двойным двоеточиями.
Одиночное vs Двойного двоеточия
На данный момент, главным правилом считается: двойное двоеточие :: следует использовать вместо одиночного :, чтобы различать псевдо-классы и псевдо-элементы.
Псевдо-классы vs Псевдо-элементы
Псевдо-класс всегда начинается с одного двоеточия :, затем идет название псевдо-класса ( так называемый keyword ), далее по возможности идут круглые скобки в которые передают один или несколько аргументов ( как CSS функции )
Псевдо-классы позволяют применить стили к элементу не только по отношению к древу документа, но и по отношению внешних факторов таких как “история браузера” ( :visited, к примеру ), статус содержимого ( :checked, на определенных элементах форм ), расположение мыши ( :hover, который позволяет узнать, над элементом ли мышь или нет ) - MDN Web Docs
Псевдо-элементы предоставляют нам возможность, дополнять контент текстом, которого не существует в исходном документе, это такие псевдо-элементы как ::before и ::after
Теперь, когда мы понимаем, как все это работает давайте, уже перейдем к самому интересному.
1. :matches()
:matches() безусловно очень мощный селектор 4 уровня, но браузеры все еще дискутируют на тему поддержки этого псевдо-класса, за из исключением Safari (WebKit)
/* Chrome */
:-webkit-any(:hover, :focus, :active) {
color: #222;
}
/* Firefox */
:-moz-any(:hover, :focus, :active) {
color: #222;
}
/* Safari */
:matches(:hover, :focus, :active) {
color: #222;
}
Этот сниппет объединяет 3 состояния: :hover, :focus, :activeв один селектор, но это все равно не раскрывает полный потенциал этого псевдо-класса.
Если вы знакомы с нестингом(nesting) в препроцессорах, то вас приятно удивит, что теперь подобные вещи есть в ванильном CSS.
:matches(section, article) :matches(h1, h2, h3, h4, h5, h6) {
color: goldenrod;
}
/* равен: */
section h1,
section h2,
section h3,
section h4,
section h5,
section h6,
article h1,
article h2,
article h3,
article h4,
article h5,
article h6 {
color: goldenrod;
}
Вы даже можете объединить их вместе, что бы получить новые возможности
/* Firefox */
:-moz-any(a):-moz-any(:link, :visited) {
color: blue;
}:-moz-any(a):-moz-any(:hover, :focus, :active) {
color: red;
text-decoration: none;
}
/* Chrome */
:-webkit-any(a):-webkit-any(:link, :visited) {
color: blue;
}
:-webkit-any(a):-webkit-any(:hover, :focus, :active) {
color: red;
text-decoration: none;
}
/* Safari */
:matches(a):matches(:link, :visited) {
color: blue;
}:matches(a):matches(:hover, :focus, :active) {
color: red;
text-decoration: none;
}
Этот сниппет, эквивалентен этому:
a:link,
a:visited {
...
}
a:hover,
a:focus,
a:active {
...
}
Имейте введу, что :matches() не работает с нестингом (:matches(:matches())), так же не работает с псевдо-селектором:not (:matches(:not()), :not(:matches())).
К сожалению, поддержка этого псевдо-класса есть только в Safari, а в других браузерах поддержка до сих пор под префиксами, так же вы должны использовать разные имена одного и того же псевдо-класса плюс вендорные префиксы. Сейчас, инструменты такие как Autoprefixer не поддерживают matches(). Но не стоит беспокоиться, недавно я попросил решить эту проблему через репозиторий на GitHub.
2. :placeholder-shown
Тег input имеет атрибут placeholder значение, которого показывает подсказку, что нужно ввести в поле.
/* свойства для input */
:placeholder-shown {
opacity: 1; /* работает */
color: gold; /* не плоностью*/
background: blue; /* работает */
font-weight: bold; /* работает */
border: 1px solid red; /* работает */
}
/* только для placeholder текста */
::placeholder {
opacity: 1; /* работает */
color: gold; /* работает */
background: goldenrod; /* работает */
font-weight: bold; /* работает */
border: 1px solid red; /* работает */
}
Короче говоря, :placeholder-shown стилизует тег input полностью, если у него есть атрибут placeholder, в то время как псевдо-элемент ::placeholderстилизует только текст placeholder'a. Этот факт задокументирован в CSS Pseudo-Elements Module Level 4 Editors Draft.
Имейте введу :placeholder-shown это псевдо-класс (элемент в определенном состоянии), а ::placeholderпсевдо-элемент (объект который видно, но он не находится в конечном DOM)
3. :any-link
:any-link представляет якорь гиперссылки
:any-link {
...
}
Для примера, в HTML5 любые <a>, <area> или <link> имеют атрибут href, выступает как эквивалент :matches(:link, :visited). Я думаю это очень своеобразный псевдо-класс и еще ожидает более лучшего названия. Поддерживается практически везде, за исключением Edge.
4. :indeterminate
Псевдо-класс :indeterminate стилизует любые элементы форм, у которых состояние (state) находится в неопределенном.
:indeterminate {
background: lime;
}
Обычно этот псевдо-класс используется для тега input типа радио или чекбокса, у которых не установлен атрибут checked.
Он так же может стилизовать, тег progress, у котого не поставлен атрибут value
Заметка от переводчика
Обратите внимание, что бы псевдо-класс заработал, нужно получить определенный тег, через JS и поставить свойство indeterminate в true
let input = document.querySelector('input');input.indeterminate = true;
5. :user-error
Псевдо-класс :user-error представляет, состояние не корректности тега input, но только после пользовательского взаимодействия. Например, с момента, когда пользователь попытался отправить форму и перед тем, как пользователь снова взаимодействует с элементом формы.
:user-error {
background: red;
color: red;
border: 2px solid red;
}
Поддержка, однако, ее просто нету и нет способа узнать, будет ли вообще поддержка популярных браузеров. Лучше всего будет использовать :invalidили :required, если вам нужно стилизовать ошибки в ваших формах.
:invalid {
background: red;
color: red;
border: 2px solid red;
}
6. :optional
Делает выборку любого тега input или textarea, у которого нетатрибута required. Это позволяет легко стилизовать элементы форм, которые не обязательны.
:optional {
...
}
Это один из легко описанных псевдо-классов спеки 4-го уровня. Поддерживается всеми популярными браузерами.
7. :scope
Псевдо-класс :scope, ограничивает стили только на той части страницы в которой был использован тег style с атрибутом scoped
<ul>
<style scoped>
:scope {
color: red;
}
</style>
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</ul>
К сожалению, популярные браузеры не поддерживают этот псевдо-класс, или поддерживали какое то время, но потом выпилили в новых версиях.
По исследованиям, Chrome 35 и FF 55 уже не поддерживают этот псевдо-класс. Однако, было время, когда Chrome и FF поддерживали :scope.Сейчас, Chrome не поддерживает :scope, а в FF поддержка осталась за флагами (думаю и там, скоро ее уберут).
Заключение
Это определенно многообещающие псевдо-классы из 4 уровня спеки и еще множество других было не упомянуто. в спецификации, много еще чего может поменяться или вовсе исчезнуть, так что все зависит от разработчиков, которые следят за развитием спеки. Если у вас есть, какие либо идеи или примеры кода с перечисленными псевдо-классами, то оставляйте их в комментариях. Всем удачного кодинга !
Спецификации:
От переводчика
Очень интересный доклад на тему спек в CSS был от Антона Немцевана WSD в Минске
