12_Псевдоклассы. Псевдоэлементы презентация

ПСЕВДОКЛАССЫ
Псевдоклассы определяют динамическое состояние элементов, которое изменяется с помощью действий пользователя, а также положение в дереве документа.

Псевдоклассы ссылок
a:link { ... } – все ссылки
a:visited { ... } – посещённые ссылки
a:hover { ... } – ссылки, на которые наведен курсор
a:active { ... } – активные ссылки, мышь нажата
hover можно использовать со всеми элементами

селектор: first-child { ... } - первый дочерний элемент
селектор: last-child { ... } - последний дочерний элемент
селектор: first-of-type { ... } - первый данного типа
селектор: last-of-type { ... } - последний данного типа
селектор:nth-child(odd | even | <число> | <выражение>) {...} - n-ный элемент
селектор:nth-of-type(odd | even | <число> | <выражение>) {...} - n-ный элемент данного типа
Псевдоклассы, связанные с положением

Псевдоклассы, связанные с input
:checked - отмеченные элементы (checkbox, radio)
:enabled - включенные элементы
:disabled - отключенные элементы
:optional - поля ввода, которые не помеченные как required
:required - поля ввода, помеченные как required
:focus - поля ввода в фокусе
Больше псевдоклассов https://developer.mozilla.org/ru/docs/Web/CSS/Псевдо-классы

Добавим немного анимации
Свойство transition - отвечает за плавную смену какого либо свойства.
Упрощенная запись (более сложные примеры рассмотрим позже):
transition: transition-property transition-duration
transition-property - свойство, которое мы хотим плавно поменять. Можно указать значение all, чтобы плавно менять все свойства, или перечислить через запятую
transition-duration - время плавного перехода в секундах или миллисекундах.

ПСЕВДОЭЛЕМЕНТЫ
Псевдоэлементы позволяют задать стиль элементов не определённых в дереве элементов документа, а также генерировать содержимое, которого нет в исходном коде текста.

Часть элемента
::first-letter -первая буква
::first-line - первая строка
::placeholder - Заглушка в тегах input
::marker - маркер списка

::selection
Стиль выделенного текста.
Можно изменить только несколько свойств:
color
background-color
cursor
caret-color (цвет текстового курсора)
outline (обводка)
text-decoration
text-shadow (тень текста)

::after, ::before
Псевдоэлементы, которые используются для вывода желаемого текста после содержимого элемента, к которому он добавляется. Псевдоэлементы ::after и ::before работают совместно со свойством content.
Запись:
selector
::after
Без свойства content ::after и ::before не будут работать.

ДОПОЛНИТЕЛЬНО
Оформление списков с помощью ::before и счетчиков.
body {
counter-reset: section;
}
h3::before { counter-increment: section;
content: "Секция " counter(section) ": ";
}