CSS: Псевдоклассы

Поговорим тут о том какие еще есть возможности в плане выбора элементов в css

Псевдоклассы

Псевдоклассы синтаксически являются дополнением к селекторам которые мы рассмотрели ранее . Чтобы дополнить селектор псевдо классом нужно дописать его в конец селектора отделив его текст двоеточием. Например для селектора по атрибуту id псевдо класс checked будет записываться как:

1

[id] : checked {}

Псевдо классы зачастую позволяют управлять отображением элементов в зависимости от их состояния рассмотрим на примерах несколько из них. Список всех псевдоклассов .

hover

Псевдокласс стили которого применяются на элемент в случае когда над ним расположен курсор мыши пользователя. На мой взгляд это один из самых популярных по применимости псевдоклассов.

Его часто применяют когда нужно поменять цвет элемента при наведении или например просто отобразить что то. Комбинируя этот селектор с анимациями можно добиться ярких динамических эффектов.

Ещё одно применение этого псевдокласса в том чтобы заставить блочные элементы выглядеть как ссылки. Этого можно добиться с помощью правила cursor: pointer. Для браузеров это будет сигнал что при наведении на блок с таким селектором нужно изменить отображение курсора на “руку”. Так же интересный факт, что некоторые браузеры по этому признаку использовали ряд оптимизаций для быстрой обработки “не ссылок”, и это приводило к очень грустным последствиям.

checked

Этот псевдокласс определяет отображение блока при условии в нем состояния “checked” на моей памяти этим свойством могут обладать только вводимые поля форм. Для тега input это будут блоки с типами radio и checkbox.

1

<input type="radio" />

Так же для тега select это будут его дочерние элементы option.

1
2
3

<select>
  <option>Еще одна смешная опция</option>
</select>

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

Так же как и с hover это псевдокласс позволяет делать очень многие вещи без применения более мощных технологий и скриптов. Особенно интересных эффектов можно достичь если комбинировать их с селекторами “+” “~” о которых я писал ранее .

first-child

Псевдокласс который позволяет экономить на тегах обертках для inline элементах или на классах для блоковых элементов.

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

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

Но не нужно забывать, о том что все эти псевдоклассы универсальны они так же работают и на уровне блоков. Этим можно пользоваться для выделения особенностей первого блока списка, и всего, что может вам пригодиться

nth-child()

Очень полезный псевдокласс, который скорее всего вам понадобиться если вы работаете с таблицами или очень длинными списками.

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

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

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

Числовые последовательности для этого селектора задаются с помощью умножений и сдвига. Для примера если мы напишем в этот селектор константу - это будет просто сдвиг

1

div:nth-child(1)

Селектор выберет первый элементы и это будет вовсе не последовательность.

Если же мы хотим создать последовательность то нужно воспользоваться переменной X? В css ее назвали “n” то есть простейшая последовательность будет выглядеть как:

1

div:nth-child(n)

Можно попытаться спрогнозировать что это будет за последовательность подставляя в n числа от 0 до бесконечности и придти к выводу что ряд будет выглядеть как 0, 1, 2, 3, … То есть будет выбирать все дочерние элементы. Но нам зачастую не нужны такие последовательности. Нужно что то более интересное. Например каждый второй элемент? 0, 2, 4, 6 … В целом видно что это ряд из таблицы умножения на 2 по этому селектор для ряда четных строк таблицы можно задать умножением переменной на 2

1

div:nth-child(2n)

А теперь попробуем по рассуждать о том как сделать ряд не четных чисел. Тут на выручку приходит сдвиг, если сдвинуть четные числа на единицу то они станут не четными. Но в каком же направлении сделать сдвиг? Если увеличить все числа 2n на единицу то получится что то вроде 1, 3, 5, 7 … Кажется то что нужно, а что если уменьшить? -1, 1, 3, 5 … Тоже похоже на правду. Что же css будет делать с селектором который указывает на -1 элемент родителя, спросите вы. Оказывается что css отбросит все такие элементы и не будет делать ничего.

В итоге не важно определите ли вы не четную последовательность как 2n-1 или 2n+1 css определит ее как последовательность нечетных цифр.

В целом придерживаясь этих рассуждений можно создавать и более сложные последовательности

not()

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

Так же стоит упомянуть что у внутри отрицаемого селектора не должно быть отрицаний и селекторов псево элементов.

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

Буду рад комментариям идеям лайкам, всему тому что поможет сделать эту статью лучше. Поможет вам и другим людям, что прочтут их. Далее план описать примеры работы с псевдоэлементами.