Ответ
Псевдоклассы в CSS позволяют стилизовать элементы в зависимости от их состояния или положения. Вот основные примеры:
/* Стиль при наведении */
a:hover {
color: red;
}
/* Стиль для активного элемента (нажатие) */
button:active {
transform: scale(0.95);
}
/* Стиль для фокуса (клавиатура/Tab) */
input:focus {
outline: 2px solid blue;
}
/* Стиль для первого дочернего элемента */
li:first-child {
font-weight: bold;
}
/* Стиль для нечётных элементов */
tr:nth-child(odd) {
background: #f2f2f2;
}
/* Стиль для не посещённых ссылок */
a:link {
color: green;
}
/* Стиль для посещённых ссылок */
a:visited {
color: purple;
}Псевдоклассы начинаются с двоеточия : и добавляются к селектору без пробела.
Ответ 18+ 🔞
А, псевдоклассы, блядь! Ну это ж та самая магия, когда ты можешь навалять стилей элементу не просто так, а в зависимости от того, в каком он состоянии, сука. Типа, на него навели, его кликнули, или он там первый в списке у мамки.
Смотри, вот тебе расклад по полочкам, как это работает, а то некоторые думают, что это какая-то хуйня запредельная.
/* Вот это, бля, классика жанра: ссылка меняет цвет, когда курсор над ней */
a:hover {
color: red;
}
/* А это когда ты на кнопку нажал и держишь — она чуть сжимается, типа "ой, щекотно" */
button:active {
transform: scale(0.95);
}
/* Это для умных, кто с клавиатуры работает. Элемент в фокусе подсвечивается, чтобы не потеряться */
input:focus {
outline: 2px solid blue;
}
/* Первому ребёнку в списке всегда достаётся жирный шрифт, любимчику, блядь */
li:first-child {
font-weight: bold;
}
/* А тут, сука, зебра для строк таблицы: нечётные подкрашиваем, чтобы глаза не ебало */
tr:nth-child(odd) {
background: #f2f2f2;
}
/* Непосещённая ссылка — зелёная, как молодой огурец */
a:link {
color: green;
}
/* А после посещения — фиолетовая, типа "я тут уже был, нахуй" */
a:visited {
color: purple;
}Главное тут, ёпта, не проебаться с синтаксисом. Пишешь селектор, потом сразу, без пробела, двоеточие и название псевдокласса. a:hover, а не a :hover — иначе нихуя не сработает, и будешь потом искать, почему.
Вот и вся наука, блядь. Ничего сложного, просто нужно запомнить, какой псевдокласс за какую ситуацию отвечает. А то будет у тебя кнопка, которая при наведении не реагирует — пользователь подумает, что сайт сломался, и пойдёт нахуй. А нам это надо?