Приведи пример псевдоклассов

Псевдоклассы в CSS

Псевдоклассы - это ключевое слово, добавляемое к селектору, которое определяет специальное состояние элемента. Они позволяют стилизировать элементы в зависимости от их состояния, положения или взаимодействия, без использования дополнительных классов в HTML.

Основные псевдоклассы

1. :hover

Применяется, когда пользователь наводит мышь на элемент:

a:hover {
  color: blue;
  text-decoration: underline;
}

button:hover {
  background-color: #0056b3;
  cursor: pointer;
}

2. :active

Применяется в момент нажатия на элемент:

button:active {
  transform: scale(0.98);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);
}

3. :focus

Применяется, когда элемент получает фокус (обычно при нажатии Tab или клике):

input:focus {
  outline: 2px solid blue;
  border-color: blue;
}

button:focus {
  box-shadow: 0 0 0 3px rgba(0, 0, 255, 0.3);
}

4. :visited

Применяется только к ссылкам, которые пользователь уже посетил:

a:visited {
  color: purple;
}

5. :first-child

Выбирает первый элемент среди его братьев:

li:first-child {
  font-weight: bold;
  margin-top: 0;
}

6. :last-child

Выбирает последний элемент среди его братьев:

li:last-child {
  margin-bottom: 0;
  border-bottom: none;
}

7. :nth-child()

Выбирает элемент по номеру:

/* Каждый второй элемент (чередование) */
tr:nth-child(even) {
  background-color: #f0f0f0;
}

/* Каждый третий элемент */
li:nth-child(3n) {
  color: red;
}

/* Начиная со второго элемента */
div:nth-child(n+2) {
  margin-top: 10px;
}

8. :nth-of-type()

Похоже на :nth-child(), но учитывает только элементы того же типа:

p:nth-of-type(2) {
  font-style: italic;
}

9. :not()

Выбирает элементы, которые НЕ соответствуют селектору:

/* Все элементы li, кроме последнего */
li:not(:last-child) {
  margin-bottom: 10px;
}

/* Все кнопки, кроме отключенных */
button:not(:disabled) {
  cursor: pointer;
}

10. :disabled

Применяется к отключенным элементам (input, button и т.д.):

input:disabled {
  background-color: #e0e0e0;
  cursor: not-allowed;
  opacity: 0.6;
}

11. :enabled

Применяется к включенным элементам формы:

input:enabled {
  background-color: white;
  cursor: text;
}

12. :checked

Применяется к отмеченным чекбоксам и радиокнопкам:

input[type="checkbox"]:checked {
  accent-color: green;
}

input[type="radio"]:checked + label {
  font-weight: bold;
}

Практический пример: стилизация формы

/* Поле ввода в фокусе */
input:focus {
  border-color: blue;
  box-shadow: 0 0 0 3px rgba(0, 0, 255, 0.1);
}

/* Отключенное поле */
input:disabled {
  background-color: #f5f5f5;
  color: #999;
}

/* Кнопка при наведении */
button:hover:not(:disabled) {
  background-color: #0056b3;
}

/* Кнопка при нажатии */
button:active:not(:disabled) {
  transform: translateY(2px);
}

/* Список с чередованием цветов */
ul li:nth-child(even) {
  background-color: #f9f9f9;
}

ul li:last-child {
  border-bottom: none;
}

Разница между :hover, :active, :focus

• :hover - мышь наведена на элемент
• :active - элемент нажат (в процессе нажатия)
• :focus - элемент получил фокус (может быть установлен программно или через клавиатуру)

/* HTML */
<button>Click me</button>

/* CSS */
button:hover { background: yellow; }   /* Наведение */
button:active { background: orange; }   /* Нажатие */
button:focus { outline: 2px solid blue; } /* Фокус */

Новые псевдоклассы (современные браузеры)

:is() и :where()

/* Вместо */
h1:hover, h2:hover, h3:hover { color: blue; }

/* Пишем */
:is(h1, h2, h3):hover { color: blue; }

:has() - выбирает родителя, если у него есть определенный потомок

/* Стилизировать div, если он содержит button */
div:has(> button) {
  padding: 10px;
  border: 1px solid gray;
}

Вывод

Псевдоклассы - это мощный инструмент для создания интерактивных и динамических стилей без JavaScript. Они помогают создавать доступные, удобные интерфейсы и улучшают пользовательский опыт.