Файл: Псевдоклассы и псевдоэлементы Псевдоклассы.docx

ВУЗ: Не указан

Категория: Не указан

Дисциплина: Не указана

Добавлен: 22.11.2023

Просмотров: 66

Скачиваний: 2

ВНИМАНИЕ! Если данный файл нарушает Ваши авторские права, то обязательно сообщите нам.
Псевдоклассы и псевдоэлементыПсевдоклассы – это селекторы, которые определяют состояние уже существующих элементов, которое может меняться при определенных условиях.Псевдоэлементы – это селекторы, которые определяют область элементов, которая изначально отсутствует в дереве документа. Эта область создается искусственно с помощью CSS.Ключевое отличие между ними в том, что псевдоклассы определяют именно состояние элементов, которые уже существуют на странице, а псевдоэлементы создают области (искусственные элементы), которых изначально на веб-странице не было. Но и те и другие отсутствуют в исходном коде документа.Чтобы понять, что именно относятся к псевдоклассам, а что к псевдоэлементам, давайте я приведу официальный список из документации.Для составления этого списка использовались материалы этой страницы страндарта:Псевдоклассы:E:root – находит корневой элемент дерева документа. Применимо к HTML, :root находит элемент  и идентичен селектору по тегу htmlПримерИспользование :root полезно для объявления CSS Переменных::root {--main-color: hotpink;--pane-padding: 5px 42px;}E:nth-child(n) – находит один или более элементов, основываясь на их позиции среди группы соседних элементов.Пример/* Выбирает каждый четвёртый элементсреди любой группы соседних элементов */:nth-child(4n) {color: lime;}E:nth-last-child(n) – находит элемент, имеющий an+b-1 потомков после данной позиции в дереве документа, значение для n может быть положительным или нулевым, а также имеющий родительский элемент.

Примеры

tr:nth-last-child(-n+4)Находит последние 4 строки HTML таблицы.span:nth-last-child(even)Ищет чётные элементы в родительском элементе, начиная с последнего элемента и работая задом наперёд.E:nth-of-type(n) – находит один или более элементов с заданным тегом, основываясь на их позиции среди группы соседних элементов./* Выбирает каждый четвёртый элемент
среди любой группы соседних элементов. */p:nth-of-type(4n) {color: lime;}E:nth-last-of-type(n) – находит один или более элементов с заданным тегом, основываясь на их позиции среди группы соседних элементов, считая с конца./* Выбирает каждый четвёртый элемент среди любой группы соседних элементов,отсчёт начинается с последнего элемента */p:nth-last-of-type(4n) {color: lime;}E:first-child – находит любой элемент, являющийся первым в своём родителе.E:last-childE:first-of-typeE:last-of-typeE:only-childE:only-of-typeE:emptyE:link СенюшкинE:visited КутляевE:active ПерепелицаE:hover ГаляевE:focus ФазыловE:target ПетуховE:lang(fr) E:enabled КораблеваE:disabled МедведевE:checked РожковаE:not(s) БороваяПсевдоэлементы:E::first-line ТрякшинаE::first-letter ГрачевE::before НаконечниковаE::after УмбеталиевЗдесь, E- элемент, к которому применяется селектор.Обратите внимание, что псевдоэлементы пишутся с двойным двоеточием. Разработчики изначально сделали такую форму записи, чтобы отличать их от псевдоклассов. Но, если вы запишите название псевдоэлемента с одинарным двоеточием, то ошибок браузер выдавать не будет. https://developer.mozilla.org/ru/docs/Web/CSS/:first-child