Автор: Псевдоклассы позволяют обратиться к элементу с которым пользователь взаимодействует или уже взаимодействовал.
Псевдоклассы определяют действие которое произойдет с элементом и позволяют изменить свойства элемента во время или после того как произошло действие.
Например, если по селектору класса .menu-item можно добавить стили для элемента с классом. То псевдо-класс :hover позволит стилизовать элемент .menu-item в то время когда пользователь наведет мышкой на данный элемент.
По сути псевдоклассы это селекторы на действие. Это очень удобная фишка, которая поможет истинным любителям CSS создать больше интерактивности на странице не прибегая к JS.
Список псевдоклассов:
:link - поможет выбрать ссылки на странице.
:visited - поможет выбрать посещенный ссылки.
:active - сработает в момент когда мышь нажата но еще не отпущена на ссылке, либо по нажатию кнопки <button>.
Следует помнить: Такие псведоклассы как :link, :visited, :active могут перезаписывать свойства друг друга, в зависимости от расположения в каскадной таблице стилей.
:hover - когда на элемент навели мышь.
:focus - выбор элемента с помощью клавиатуры а так же фокус на элементе.
Например когда пользователем произведен клик в полеях формы <input>, <textarea> и т.д.
:empty - выбор любого элемента который не имеет потомков.
Следует помнить: Пробелы воспринимаются как содержимое элемента. А комментарии кода — нет.
Тоесть псевдокласс :empty поможет добавить свойства к <div><!—любой комментарий—></div>
Подобный элемент с пробелами перед или после комментария <div> <!—Передомной есть пробелы—> </div> не считается пустым и свойство не применится.
:target - используется для выделения части страницы связанной якорем с элементом.
2
3
4
<span class="token tag"><span class="token punctuation"><</span>li<span class="token punctuation">></span></span><span class="token tag"><span class="token punctuation"><</span>a <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>#p1<span class="token punctuation">"</span></span><span class="token punctuation">>Связанная якорем ссылка, которая активизирует стили на паракгафе</span></span><span class="token tag"><span class="token punctuation"></</span>a<span class="token punctuation">></span></span><span class="token tag"><span class="token punctuation"></</span>li<span class="token punctuation">></span></span>
<span class="token tag"><span class="token punctuation"></</span>ol<span class="token punctuation">>
</span></span>
2
3
<span class="token tag"><span class="token punctuation"></</span>p<span class="token punctuation">>
</span></span>
2
3
4
<span class="token property">background-color</span><span class="token punctuation">:</span> gold<span class="token punctuation">;</span>
<span class="token punctuation">}
(чуть позже добавлю развернутый пример с кодом)</span>
Важно отметить, что псевдокласс :target, позволит создать конструкцию, по своей логике напоминающую табы на JS, только сдесь все будет решено с помощью CSS.
:checked - для стилизации выбранных option внутри select, или включенных <input type ="checkbox">
Дабавит стили для всех отмеченных на странице чекбоксов, радиокнопок.
:enabled - добавить стили к уже включенному элемент.
Применимо к элементам у которых есть состояния включенного и выключенного. Например input у которого не задан атрибут
:disabled - для отключенных элементов, на которые нельзя получить фокус, выбрать, включить.
:first-child - когда нужно стилизовать первый элемент в своем родителе.
:last-child - находит любой последний элемент в его родителе.
:nth-child() - позволяет стилизовать элемент в зависимости от его позиции среди группы соседних элементов. В скобрах указывает целое число, которое соответствует позиции элемента. Чтобы зациклить свойство на каждом втором или каждом четвертом элементе, необходимо добавить 'n' после порядкового номера элемента.
:nth-last-child - позволяет обратиться к элементам начиная с последнего элемента. Например позволяет выбрать последние четыре абзаца в блоке или последние три строки таблицы.
Стилизовать последние три абраза в блоке:
2
3
<span class="token property">color</span><span class="token punctuation">:</span> red<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
:nth-of-type - практически тоже самое что и :nth-child(), только выбираем элемент не только в зависимости от позиции среди группы соседних элементов, но и в зависимости от типа элемента. Типа тоесть тега.
Например среди группы элементов, среди которых есть <p> и <span> выбрать каждый второй <span> позволит правило:
span:nth-of-type(2n){
color: yellow;
}
:first-of-type - добавить стили для первого тега в списке соседних элементов. Поиск по типу среди потомков разного типа. :last-of-type - добавить стили для последнего тега в списке соседних элементов. Поиск по типу среди потомков разного типа.
