☑️ МАЛОИЗВЕСТНЫЕ CSS СЕЛЕКТОРЫ
Селектор определяет, к какому элементу применять то или иное CSS-правило.
Основные селекторы всем хорошо знакомы. Но есть такие, которыми по каким-то причинам мало пользуются разработчики:
🔻 Псевдокласс
Определяет стиль элемента, когда он сам или элементы внутри него получают фокус. В отличие от
🔻 Селектор
В Safari такой приём работать не будет. Однако, решение есть нужно всего лишь перечислить элементы выборки в другом порядке:
Как это работает. Первая часть выражения выбрает 5й элемент, а потом все после него. А вторая часть — 12й элемент, а потом все до него. На пересечении запросов получается требуемый диапазон.
🔻 Псевдоклассы пользовательского интерфейса (формы)
И многие другие:
🔻 Псевдокласс
Находит любой элемент, являющийся единственным потомком родителя. Это тоже, что и
🔻 Псевдокласс
Элемент, который является единственным элементом данного типа в родительском элементе.
🔻 Псевдокласс
Применяется к элементам, которые ничего в себе не содержат (да, это работает не только с формами). И вместо создания условной логики для
🔻 Псевдокласс
Находит корневой элемент(элемент
🔻 Псевдокласс
Выбирает текущий целевой элемент на странице, то есть тот, к которому был осуществлён переход по ссылке внутри страницы. Так можно скрывать или показывать целые разделы страници. Пример:
Селектор определяет, к какому элементу применять то или иное CSS-правило.
Основные селекторы всем хорошо знакомы. Но есть такие, которыми по каким-то причинам мало пользуются разработчики:
🔻 Псевдокласс
:focus-withinОпределяет стиль элемента, когда он сам или элементы внутри него получают фокус. В отличие от
:focus, который применяется непосредственно к самому элементу, :focus-within работает для родителя. Это позволяет выделять цветом или другими методами всю форму или отдельные её части, когда пользователь работает с полями формы.🔻 Селектор
:nth-child используется для добавления стиля к элементам на основе нумерации в дереве элементов. Но допустим нам нужно выбрать диапазон элементов с 5 по 12 включительно. Это можно сделать вот так:ul li:nth-child(n+5):nth-child(-n+12) {
background: lightpink;
}В Safari такой приём работать не будет. Однако, решение есть нужно всего лишь перечислить элементы выборки в другом порядке:
ul li:nth-child(-n+12):nth-child(n+5) {
background: lightpink;
}Как это работает. Первая часть выражения выбрает 5й элемент, а потом все после него. А вторая часть — 12й элемент, а потом все до него. На пересечении запросов получается требуемый диапазон.
🔻 Псевдоклассы пользовательского интерфейса (формы)
:disabled — используется для отбора и стилизации заблокированных для выбора и изменения элементов форм;:enabled — отбирает не заблокированные для выбора и изменения элементы форм;:checked — применяется для выбора и стилизации элементов <input type="radio">, <input type="checkbox">, а также элементов <option></option>, находящихся внутри элемента <select></select>;:indeterminate — элементы радио и чекбокс могут быть включены или выключены пользователем. Некоторые из них могут находиться в неопределенном состоянии, к которым и применяется данный псевдокласс.И многие другие:
valid, invalid, required и т. д.🔻 Псевдокласс
:only-childНаходит любой элемент, являющийся единственным потомком родителя. Это тоже, что и
:first-child:last-child или :nth-child(1):nth-last-child(1), но с меньшей специфичностью.🔻 Псевдокласс
:only-of-typeЭлемент, который является единственным элементом данного типа в родительском элементе.
🔻 Псевдокласс
:emptyПрименяется к элементам, которые ничего в себе не содержат (да, это работает не только с формами). И вместо создания условной логики для
<h1>{name}</h1> в шаблоне вы можете просто спрятать тег с помощью CSS, если он оказался пустым:h1:empty { display: none; }🔻 Псевдокласс
:rootНаходит корневой элемент(элемент
<html>) и идентичен селектору по тегу html, но его специфичность выше. Полезно для объявления CSS переменных, и других глобальных значений.🔻 Псевдокласс
:targetВыбирает текущий целевой элемент на странице, то есть тот, к которому был осуществлён переход по ссылке внутри страницы. Так можно скрывать или показывать целые разделы страници. Пример:
div {
display: none;
}
div:target {
display: block;
}
<a href="#link1">Ссылка 1</a>
<a href="#link2">Ссылка 2</a>
<div id="link1">
<h3>Содержимое по ссылке 1</h3>
</div>
<div id="link2">
<h3>Содержимое по ссылке 2</h3>
</div>
