ВУЗ: Не указан
Категория: Не указан
Дисциплина: Не указана
Добавлен: 22.11.2023
Просмотров: 14
Скачиваний: 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-child
E:first-of-type
E:last-of-type
E:only-child
E:only-of-type
E:empty
E: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