Псевдоклассы — это ключевые слова, которые добавляются к селектору и определяют особое состояние элемента. Например, наведение мыши, клик, фокус, позиция среди других элементов.

Синтаксис: селектор:псевдокласс { ... }

1. :hover — при наведении мыши

Срабатывает, когда пользователь наводит курсор на элемент.

.button:hover {
    background-color: #14b8a6;
    color: white;
}

2. :active — в момент клика

Срабатывает в момент, когда элемент нажат (кнопка мыши зажата).

.button:active {
    transform: scale(0.95);
}

3. :focus — при фокусе

Срабатывает, когда элемент получает фокус (например, поле ввода выделено).

input:focus {
    outline: 2px solid #14b8a6;
    border-color: #14b8a6;
}

4. :visited и :link — для ссылок

:link — непосещённая ссылка, :visited — уже посещённая.

a:link {
    color: #530899;
}
a:visited {
    color: #14b8a6;
}

5. :first-child — первый элемент внутри родителя

Выбирает элемент, который является первым среди своих соседей.

li:first-child {
    color: #14b8a6;
    font-weight: bold;
}

6. :last-child — последний элемент внутри родителя

Выбирает элемент, который является последним среди своих соседей.

li:last-child {
    color: #14b8a6;
    font-weight: bold;
}