» » Псевдокласс в CSS
93 0  

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

Псевдоклас это добавленное к селектору особое состояние в котором находится html элемент в данный момент.

Например нам нужно задать цвет для элемента html с определеным селектором над которым сейчас находится курсор:

div:hover {background-color: #F89B4D;}

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

Особенность псевдокласов в том они не указываются в разметке HTML-документа. Синтаксис написания - всегда начинаются с двоеточия ':'.

Псевдо-класс Пример Описание
:link a:link Выбор всех не посещенных ссылок.
:active a:active Выбор активной ссылки.
:hover a:hover Выбор ссылки при наведении курсора мышки. Вместо `<a>` может быть любой элемент
По расположению на одном уровне
:first-child *:first-child Любой первый элемент в блоке.
:last-child *:last-child Любой последний элемент в блоке.
:only-child *:only-child Любой элемент в блоке, если там всего один элемент.
:nth-child(n)
*:nth-child(2) Любой второй элемент в блоке.
*:nth-child(2n) Любые элементы в блоке по счету: 2, 4, 6, … (чётные).
*:nth-child(even) Любые элементы в блоке по счету: 2, 4, 6, … (чётные).
*:nth-child(2n+1) Любые элементы в блоке по счету: 1, 3, 5, … (нечётные).
*:nth-child(odd) Любые элементы в блоке по счету: 1, 3, 5, … (нечётные).
*:nth-child(3n+2) Элементы номер 2, 5, 8 и так далее.
:nth-last-child(n) *:nth-last-child(2) Любой второй элемент в блоке с конца.
По расположению на одном уровне с тем же тегом
:first-of-type p:first-of-type Выбор первого дочернего элемента <p>.
:last-of-type p:last-of-type Выбор последнего дочернего элемента <p>.
:only-of-type p:only-of-type Выбор дочернего элемента <p>, если у родителя элемент <p> всего один.
:nth-of-type(n) p:nth-of-type(2) Выбор второго дочернего элемента <p>.
:nth-last-of-type(n) p:nth-last-of-type(2) Выбор второго дочернего элемента <p> с конца.
Поля форм
:enabled input:enabled Выбор включенного <input>. Обычно ``:enabled`` просто не пишется.
:disabled input:disabled Выбор выключенного <input>.
:default input:default Выбор пустого <input> без значений.
:focus input:focus Выбор <input>, который находится в фокусе (в который установлен курсор).
:focus-within input:focus-within Выделит родителя в котором находится input
:checked input:checked Выбранный элемент <input> типа radio или checkbox.
:optional input:optional находит любые <input> элементы, у которых не установлен атрибут required.
:indeterminate input:indeterminate выберет элементы <input type="checkbox">, свойство indeterminate которых было установлено в true через jаvascript
:in-range input:in-range показывает значения placeholder="" в зоне допустимых значений
:out-of-range input:out-of-range показывает значения placeholder="" за зоной допустимых значений
:required input:required находит любые <input> элементы, имеющие атрибут required.
:read-only :read-only находи в input и textarea элементы, недоступные для редактирования пользователем.
:read-write :read-write находи в input и textarea элементы, доступные для редактирования пользователем.
:invalid form:invalid находит любые <input> или <form> элементы, контент которых не проходит валидацию
:valid form:valid находит любые <input> или <form> элементы, контент которых валиден
Остальные
:root :root Выбор корневого элемента в документе.
:defined p:defined выбор элемента определеного методом customElements.define
:empty p:empty Пустой элемент <p>, в котором нет ни текста ни элементов. (тоисть без потомков)
:lang(язык) p:lang(ru) Выбор элемента <p> с атрибутом lang, значение которого начинается с "ru".
:target :target Выбор активного элемента на странице, который имеет якорную ссылку.
:not(селектор) :not(p) Выбор всех элементов, кроме <p>. Примеры использования :not()


- MDN стандарт псевдокласов

Оставить свой комментарий:

Опыт в веб разработке:

2009
2010
2011
2012
2013
2014
2015
2016
2017
2018
2019
2020
2021
2022
2023
2024
2025
2026
2027
2028
1979
2019