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

Изучите основы псевдоклассов CSS

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

Они начинаются содна толстая кишка :.

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

Это самые популярные псевдоклассы, которые вы, вероятно, будете использовать:

Псевдокласс Цели
:active элемент, активируемый пользователем (например, нажатый). В основном используется для ссылок или кнопок
:checked флажок, параметр или типы радио ввода, которые включены
:default значение по умолчанию в наборе вариантов (например, вариант в кнопках выбора или переключателях)
:disabled элемент отключен
:empty элемент без дочерних элементов
:enabled элемент, который включен (напротив:disabled)
:first-child первый ребенок в группе братьев и сестер
:focus элемент с фокусом
:hover элемент зависал с мышью
:last-child последний ребенок в группе братьев и сестер
:link ссылка, которую не посещали
:not() любой элемент, не соответствующий переданному селектору. Например:not(span)
:nth-child() элемент, соответствующий указанной позиции
:nth-last-child() элемент, соответствующий определенной позиции, начиная с конца
:only-child элемент без братьев и сестер
:required элемент формы сrequiredнабор атрибутов
:root представляет собойhtmlэлемент. Это похоже на таргетингhtml, но это более конкретно. Полезно вПеременные CSS.
:target элемент, соответствующий текущему фрагменту URL (для внутренней навигации на странице)
:valid элементы формы, которые успешно прошли проверку на стороне клиента
:visited ссылка, которую посетили

Приведем пример. Вообще-то, обычная. Вы хотите стилизовать ссылку, поэтому вы создаете правило CSS для таргетинга наaэлемент:

a {
  color: yellow;
}

Кажется, все работает нормально, пока вы не нажмете одну ссылку. Когда вы щелкаете по ссылке, она приобретает предварительно определенный цвет (синий). Затем, когда вы открываете ссылку и возвращаетесь на страницу, теперь ссылка синего цвета.

Почему так происходит?

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

Итак, чтобы правильно сделать ссылку желтой во всех состояниях, нужно написать

a,
a:visited,
a:active {
  color: yellow;
}

:nth-child()заслуживает особого упоминания. Его можно использовать для нацеливания на нечетных или четных детей с:nth-child(odd)и:nth-child(even).

Он обычно используется в списках, чтобы раскрасить нечетные строки иначе, чем четные строки:

ul:nth-child(odd) {
  color: white;
	background-color: black;
}

Вы также можете использовать его для нацеливания на первые 3 дочерних элемента элемента с:nth-child(-n+3). Или вы можете стилизовать 1 из каждых 5 элементов с помощью:nth-child(5n).

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

Скачать мою бесплатнуюСправочник CSS


Больше руководств по css:


Tech Wiki Online!