В этой статье рассказывается про селекторы 4 уровня в CSS, которые уже можно частично применять в разработке, про которые ещё мало кто знает и про те, которые только ожидают часа своего всеобщего признания. Но в любом случае знание и понимание этого материала значительно упростит ваш процесс работы как в настоящем, так и в будущем.
\n\n\n\n\n\n\n\nСелекторы это основная часть CSS. Они дают вам возможность делать такие вещи, как например, выборка всех элементов определенного типа:
\n\n\n\ndiv {\n /* some styles to apply to all div elements */\n}Или вы можете выбрать элемент, который является замыкающим дочерним элементом своего родителя:
\n\n\n\nul li:last-child {\n /* some styles to apply to only the last child of a list */\n}Конечно же они дают вам возможность делать куда более сложные вещи, например выбор всех дочерних элементов списка, кроме последнего.
\n\n\n\nПо факту, есть куда больше одного способа сделать это и куда более запутанные и сложные.
\n\n\n\nДля примера, сравним этот:
\n\n\n\nul li {\n /* Styles to apply to all children */\n}\nul li:last-child {\n /* Styles to reset the previous styles because they don’t apply to the last child */\n}С этим:
\n\n\n\nul li:nth-last-child(n+2) { \n /* Styles to apply to all children except the last one */\n}ul li это примеры селекторов первого уровня.
last-child и nth-last-child это примеры селекторов 3-го уровня.
Вы можете рассматривать уровни, как версии спецификаций CSS селекторов, в которых каждый уровень добавляет селекторы “помощнее”.
\n\n\n\nВ этой статье я предоставлю вам обзор последнего поколения селекторов, а именно 4 уровня, в соответствии со спецификацией Editors’s Draft на январь 2019 года, по следующим категориям:
\n\n\n\nЛогические комбинации\n\n\n\n
Селекторы атрибутов
Лингвистические псевдоклассы
Псевдоклассы положения
Пользовательские псевдоклассы
Псевдоклассы форм ввода
Древовидные псевдоклассы
Табличные селекторы
Во время написания, спецификация для селекторов 4 уровня находится в драфте. Ситуация может измениться, если они достигнут статуса официальной рекомендации и к своему сожалению, вы в итоге обнаружите, что многие селекторы либо не поддерживаются некоторыми браузерами или им нужен префикс с :-moz- или :-webkit-.
Для каждого селектора я дам ссылку на его Can I Use страничку, так что вы увидите какие браузеры его поддерживают (если это возможно), также дам краткое описание, пример и ссылку на Codepen, так что вы сможете попробовать его в действии (даже если он сейчас не работает, всё равно это может измениться в будущем).
\n\n\n\nУчитывая всё вышесказанное, давайте начнем с селекторов из категории логических комбинаций.
\n\n\n\nЭта категория включает в себя селекторы, которые комбинируют другие селекторы.
\n\n\n\nЭтот селектор выделяет все элементы, кроме тех, которые не подходят по селекторам из списка, который представлен в виде аргумента. К примеру:
\n\n\n\np:not(.beginning, .middle) {\n color: red;\n}Сделает все p элементы у которых нет классов beginning и middle красного цвета.
\n\n\n\nВерсия 3 уровня для этого селектора позволяет включить только один селектор, вместо списка из нескольких. Для примера, вышеупомянутый селектор может быть записан как:
\n\n\n\np:not(.beginning):not(.middle) {\n color: red;\n}Он выбирает элементы, которые подходят по выборке селекторов из списка аргументов. Для примера:
\n\n\n\np:is(.beginning, .middle) {\n color: blue;\n}Сделает все элементы p у которых есть классы beginning и middle синим цветом.
Одним из самых примечательных изменений с последнего рабочего драфта является то, что селектор :matches() был переименован в :is() и убран из Safari (который был единственным браузером с его полной поддержкой), так что теперь он куда более совместимый со своей противоположностью, такой как :not().
:matches можно применять как алиас для :is(), если нужно для обратной совместимости. Хотя, :matches() ранее назывался :any(), так что многие браузеры поддерживают этот псевдокласс с префиксом:
p:-webkit-any(.beginning, .middle) {\n color: blue;\n}\n\np:-moz-any(.beginning, .middle) {\n color: blue;\n}На время написания, этот селектор не поддерживался ни одним браузером.
\n\n\n\nУ него такой же синтаксис и функционал, как и у :is(), но ни сам селектор и ни какой из его аргументов влияют на его специфичность, которая всегда равна нулю.
Специфичность это “вес” CSS правила. Если два селектора применены к одному и тому же элементу, то выигрывает тот у которого наивысшая специфичность. Всё понятно. А если у нескольких правил одинаковая специфичность, то последнее правило в CSS будет применено к элементу.
\n\n\n\nЭтот селектор можно использовать как фильтр или для перезаписи стилей связанных с элементом.
\n\n\n\nВ спецификации приводится следующий пример:
\n\n\n\na:not(:hover) {\n text-decoration: none;\n}\n\nnav a {\n /* Has no effect */\n text-decoration: underline;\n}\n\n/* With the new :where Level 4 selector */\na:where(:not(:hover)) {\n text-decoration: none;\n}\n\nnav a {\n /* Should work */\n text-decoration: underline;\n}Поддержка браузерами. На время написания, этот селектор не поддерживался ни одним браузером.
\n\n\n\nЭтот селектор берет список родственных селекторов как список аргументов. Он выделяет элемент, если любой из его родственных селекторов (в его области видимости) подходит по критерию. Для примера:
\n\n\n\np:has(strong, em) {\n color: red;\n}Тут всем элементам p, в которых есть <strong> или <em> теги, выставится красный свет.
Эта категория включает в себя селекторы, которые работают с селекторами атрибутов.
\n\n\n\nЭтот селектор выберет тот элемент, чьё значение атрибута foo равно bar, вне зависимости от регистра.
Для примера:
\n\n\n\np[class=\"text\" i] {\n color: green;\n}Сделает зеленым всем элементы p, чей атрибут class имеет значения text, TEXT, text или другую комбинацию.
\n\n\n\n\n\n\n\nНа время написания, этот селектор пока не поддерживался ни одним браузером.
\n\n\n\nВыбирает элемент, чью имя атрибута foo, точно соответствует bar, в соответствии с регистром.
Для примера:
\n\n\n\np[class=\"text\" s] {\n color: green;\n}Сделает зеленым все элементы p, у которых атрибут class имеет значение text (и не Text или тп).
Эта категория включает в себя селекторы, которые работают с лингвистическими установками, основанными на тонкостях каждого языка или правописания.
\n\n\n\nВыбирает элементы написанные слева направо, там где указана направленность написания. И напротив, :dir(rtl) выбирает элементы, которые написаны справа налево.
Для примера:
\n\n\n\np:dir(ltr) {\n background-color: red;\n}Тут фоновый цвет выставится на красный всем элементам p, написанным слева направо.
\n\n\n\n\n\n\n\nПоддержка браузерами. На время написания, версия 4-го уровня для этого селектора не поддерживалась ни одним браузером.
\n\n\n\nВыбирает элемент, отмеченный как китайский (или другой язык, просто поменяйте zh на нужный) или написанный традиционными китайскими символами (или любой другой системой символов, просто поменяйте *-hant на любой другой код символов)
На самом деле, этот селектор можно использовать с CSS2, однако, структуризация поиска по языку и разделение запятой в аргументах, являются нововведениями в селекторах 4-го уровня.
\n\n\n\nЭтот селектор может принимать список из одного языка или диапазон языков, как аргумент. Если диапазон языков содержит звездочки, то они должны быть либо экранированы (:lang(es-\\*)), либо указаны как строка (:lang(\"es-*\")).
Для примера:
\n\n\n\np:lang(\"*-CH\") {\n background-color: red;\n}Выставит фоновый цвет красным, всем элементам p, в которых есть текст, написанный на одном из языков Швейцарии (CH указывает Швейцарию).
Эта категория включает в себя селекторы, относящиеся к ссылкам.
\n\n\n\nПока что нет странички на Can I Use, но он поддерживается большинством основных браузеров.
\n\n\n\nЭтот селектор выделяет все элементы, у которых есть атрибут href (такие как <a> или <link>). Другими словами, все элементы, которые подходят псевдоклассам :link и :visited.
Для примера:
\n\n\n\na:any-link {\n color: red;\n}Выдаст всем элементам a c атрибутом href, красный цвет.
\n\n\n\n\n\n\n\nНа момент написания, этот селектор не поддерживается ни одним из браузеров.
\n\n\n\nЭтот элемент выбирает элементы, которые ссылаются на эту же страницу. Если ссылка включает в себя фрагмент настоящей ссылки, то она тоже подпадает под селектор. Если же нет, то фрагмент части ссылки настоящего URL не рассматривается.
\n\n\n\nДля примера:
\n\n\n\na:local-link {\n text-decoration: none;\n}Этот селектор сделает все ссылки с атрибутом href, которые ссылаются на эту же страницу, без подчеркнутыми.
Это категория включает в себя селекторы для тех элементов, с которыми взаимодействует пользователь.
\n\n\n\nВыбирает элементы, который либо подходят под псевдокласс :focus (когда элемент в фокусе), либо когда у них есть потомки, которые подходят под :focus.
Для примера, рассмотрим следующую форму:
\n\n\n\n<form>\n<input type=\"text\" id=\"name\" placeholder=\"Enter your name\" />\n</form>Она добавит рамку вокруг поля ввода при фокусе.
\n\n\n\nform:focus-within {\n border: 2px solid;\n}Выбирает элемент, если он в фокусе (как псевдокласс :focus) и браузер определяет, что фокус сделан прямо явным образом, обычно это делается с помощью кольца фокусировки (в браузерах такая штука в настройках есть).
Однако, разница с :focus довольно тонкая, но всё же есть.
Если :focus-visible что-то выбирает, то :focus делает это тоже, но на самом деле это не всегда так и зависит от браузера (включена ли у него отрисовка кольца фокуса) и того, как элемент попал в фокус (мышкой или клавиатурой).
У Firefox есть свой такой селектор, как псевдокласс :-moz-focusring.
Для примера, в некоторых случаях, следующая стилизация:
\n\n\n\n/* Standard Level 4 selector */\n:focus-visible {\n background-color: lightgray;\n}\n\n/* Level 4 selector for Firefox*/\n:-moz-focusring {\n background-color: lightgray;\n}Применится только к элементу, если на нем сфокусировались через клавиатурную навигацию (tabbing navigation).
\n\n\n\n\n\n\n\nЭта категория включает в себя селекторы, которые применяются к элементам имеющем отношение к формам ввода.
\n\n\n\n:read-write выбирает элементы, чьё значение можно изменить, такие каr <input> без атрибута readonly.
:read-only выбирает элементы, которые в свою очередь уже нельзя изменить, например тот же <input>, но с атрибутом readonly.
Однако, эти селекторы не просто выбирают элементы <input> или <textarea>, они выбирают любой элемент, который может быть отредактирован пользователем, например как <p> с атрибутом contenteditable со значением true.
К примеру:
\n\n\n\n:read-write {\n background-color: lightyellow;\n}\n\n:read-only {\n background-color: lightgray;\n}\n\n/* For Firefox */\n:-moz-read-write {\n background-color: lightyellow;\n}\n\n:-moz-read-only {\n background-color: lightgray;\n}Тут фоновый цвет измениться для всех элементов, которые можно изменить и которые нельзя. На lightyellow и lightgrey, соответственно.
Этот селектор выбирает элемент ввода, который в данный момент показывает текст плейсхолдера.
\n\n\n\nДля примера:
\n\n\n\ninput:placeholder-shown {\n color: red;\n}Выставит красный текст плейсхолдеру элемента <input> (только для самого плейсхолдера).
Выбирает элемент, который является дефолтной опцией в группе связанных элементов. Обычно он применяется к кнопкам и выбранным спискам/меню.
\n\n\n\nДля примера:
\n\n\n\ninput:default {\n box-shadow: 0 0 2px 2px green;\n}\n\ninput:default + label {\n color: green;\n}Задаст зеленую тень дефолтному <input> элементу и зеленый цвет его лейблу.
Тут выберутся элементы, чьё значение имеет промежуточное состояние. Для примера, радио и чекбокс группы состоящие из не выбранных элементов или прогресс-бары, процент завершения которых неизвестен.
\n\n\n\nДля примера:
\n\n\n\ninput[type=\"radio\"]:indeterminate + label {\n color: red;\n}Этот пример выдаст лейблам радио элементов в группе, красный цвет, в том случае, если в этой группе нет выбранных элементов.
\n\n\n\n\n\n\n\nОни выделят элементы, чьё содержимое или значение, соответственно, валидное или наоборот, в соответствии с семантикой их валидности. Если семантика не определена (или не может быть определена), то элемент и не :valid, и не :invalid.
Пример для элемента ввода типа email:
\n\n\n\ninput:invalid {\n color: red;\n}\n\ninput:valid {\n color: green;\n}Эти селекторы применяются только к элементам, которые имеют диапазон ограничений, для примера, если у них может быть указанные минимум и максимум. Если же нигде нет таких ограничений, то элемент не является и не :in-range, и не :out-of-range.
К примеру, для <input> элемента с минимальным значением 1 и максимальным 5:
input:out-of-range {\n color: red;\n}\n\ninput:in-range {\n color: green;\n}В некоторых случаях, эти селекторы будут иметь тот же эффект, что и :valid и :invalid.
Поддержка браузерами для :required
\n\n\n\nПоддержка браузерами для :optional
\n\n\n\nЭти селекторы применяются к элементам формы, которые соответственно, required или optional, перед отправкой формы. Элементы, которые не являются элементами форм, являются ни чем иным, как ни тем и не другим.
\n\n\n\nДля примера:
\n\n\n\ninput:optional {\n color: gray;\n}\n\ninput:required {\n color: red;\n}Даст элементам с required красный цвет и опциональным элементам выдаст серый цвет.
Эта категория включает в себя селекторы, которые основаны на информации, лежащей в древовидной структуре документа, но не может быть представлена другими селекторами, например как позиция элемента относительно его родителя.
\n\n\n\nПоддержка браузерами (на момент написания, версия 4 уровня для этого селектора ничем не поддерживается).
\n\n\n\n:nth-child выбирает каждый элемент, который является N-ным дочерним элементом своего родителя. :nth-last-child делает то же самое, но ведёт счет с конца. Вы можете поиграться с :nth тестером, чтобы понять разницу и узнать больше об An+B обозначениях.
В самом начале этой статьи, я показал вам пример :nth-last-child и сказал, что это был селектор 3-го уровня. Однако, для 4-го уровня, этот селектор принимает опциональный of селектор, который отфильтровывает потомков по признаку, который подходит под этот селектор.
Вообще тут могут быть различия в том, как объявлен селектор. Для примера:
\n\n\n\nli.item:nth-child(-n+2)Выберет первые два элемента li, но только если у них есть класс item.
Это не то же самое, что:
\n\n\n\n:nth-child(-n+2 of li.item)Тут выберутся первые два <li> элемента, которые имеют класс item, даже если они не первые два потомка в списке.
Попробуйте (в браузере, который поддерживает этот селектор, таком как Safari):
\n\n\n\n\n\n\n\n\n\n\n\nЭта категория включает селекторы, которые работают с колонками таблицы.
\n\n\n\nНа время написания, этот селектор вообще никем и ничем не поддерживался.
\n\n\n\nСелектор комбинирования колонок (||), выбирает элемент типа E, который представляет ячейку в таблице и принадлежит колонке, представленной элементом с типом F.
Для примера, рассмотрим следующую таблицу:
\n\n\n\n<table>\n <colgroup>\n <col span=\"2\">\n <col class=\"selected\">\n </colgroup>\n <tr>\n <th>ID</th>\n <th>Description</th>\n <th>Price</th>\n </tr>\n <tr>\n <td>1</td>\n <td>Computer</td>\n <td>$999</td>\n </tr>\n <tr>\n <td>2</td>\n <td>Tablet</td>\n <td>$499</td>\n </tr>\n</table>Выдаст ярко-желтый цвет ячейкам (<td> элементам), которые относятся к selected колонке (price).
На время написания, этот селектор не поддерживается никем и ничем.
\n\n\n\nВы можете рассматривать эти селекторы, как колоночную версию :nth-child и :nth-last-child.
:nth-col(An+B) выбирает элемент в гриде или таблице, который представляет собой ячейку колонки, у которой An+B-1 колонок перед ней, с любым положительным целым числом или нулевым значением n.
:nth-last-col(An+B) выберет элемент сетки или таблицы, который представляет собой ячейку колонки, у которой An+B-1 колонок после неё, с любым положительным или нулевым значением n.
Для примера:
\n\n\n\ncol.nth-col(1) {\n background-color: lightyellow;\n}\n\ncol.nth-last-col(1) {\n background-color: lightgreen;\n}Выдаст первой колонке таблицы светло-желтый фон, а также последней колонке выдаст светло-зеленый фон.
\n\n\n\nСелекторы 4 уровня позволяют вам делать сложную выборку селекторами, довольно простым способом.
\n\n\n\nМы сейчас покрыли большинство селекторов указанных в Editor’s Draft спецификации на январь 2019 года, однако, я оставил в покое некоторые селекторы, которые скорее всего исчезнут или изменятся, ну или если по ним вообще нет никакой информации, в том числе и о поддержки другими браузерами:
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nНо вам определенно нужно за ними следить, так же как и за другими селекторами 4-го уровня.
\n","type":"html-css","date":"2021-02-02T16:49:13.000Z","acf":{"seo_desc":"В этой статье рассказывается про селекторы 4 уровня в CSS, которые уже можно частично применять в разработке, про которые ещё мало кто знает и про те, которые только ожидают часа своего всеобщего признания. ","pub_date":"2018-03-29","keywords":"css селекторы, css селекторы 4го уровня, css новые селекторы","tags":"CSS, CSS советы, CSS селекторы"},"title":"CSS селекторы 4-го уровня","id":"24790ac6-bf80-560b-b036-68445e7a41b3","excerpt":"В этой статье рассказывается про селекторы 4 уровня в CSS, которые уже можно частично применять в разработке, про которые ещё мало кто знает и про те, которые только ожидают часа своего всеобщего признания.
\n","featured_media":{"source_url":"https://stasonmars.ru/wp/wp-content/uploads/2021/02/cssselectorzdfnks.jpg"},"interesting":[{"title":"Стандарты написания гибкого, надежного и жизнеспособного HTML c CSS","slug":"standarty-napisaniya-gibkogo-nadezhnogo-i-zhiznesposobnogo-html-s-css","type":"html-css"},{"title":"CSS селекторы 4-го уровня","slug":"css-selectory-4-urovnya","type":"html-css"},{"title":"Великолепный hover эффект с CSS переменными","slug":"velikolepnyi-hover-effect-s-css-peremennimy","type":"html-css"}]}},"staticQueryHashes":["3576131997","63159454"]}