Загрузка...

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

Селекторы тега, class, id и атрибута вы уже знаете. Остался ещё слой: иногда нужен не один и тот же вид всегда, а изменение, когда курсор на кнопке, когда пользователь дошёл Tab’ом до поля или когда ссылка уже открывалась. Для этого есть псевдоклассы — без нового class в HTML.

Что значит псевдокласс?

Псевдокласс — слово, которое крепится к селектору одним двоеточием (:). В HTML вы не увидите class="hover". Браузер включает правило, когда условие верно: курсор сверху, фокус, история ссылки или место среди детей родителя.

Частые псевдоклассы

Начните с этих. Имён больше, но для старта UI обычно хватает.

📊 Повседневные псевдоклассы CSS

Псевдокласс Когда активен Пример
:hover Курсор над элементом a:hover
:focus У элемента фокус (клавиатура или клик) input:focus
:visited Ссылка уже посещалась (с ограничениями приватности) a:visited
:first-child Элемент — первый ребёнок родителя li:first-child
:nth-child(n) n-й ребёнок или нечёт/чёт tr:nth-child(odd)
:disabled Элемент формы отключён button:disabled

Наведение — :hover

С :hover вид меняется, пока курсор на элементе. Кнопки и ссылки оживают от небольшого изменения — не от скачка вёрстки.

Наведение — отклик кнопки

css
CSS Code 
button:hover {
background-color: #0f766e;
color: #fff;
}

Заметка про hover

Держите изменение мягким. На сенсоре настоящего hover почти нет; не прячьте важное только в :hover.

Фокус — :focus

:focus берёт элемент, активный сейчас — например после Tab. Без видимого кольца фокуса пользователь клавиатуры теряется в форме.

Фокус — ясное кольцо у input

css
CSS Code 
input:focus {
outline: 2px solid #0f766e;
outline-offset: 2px;
}

Нужны и hover, и focus

Hover — для указателя. Focus значит «сейчас активен этот элемент управления». Не убирайте outline без столь же явной замены.

Посещённые ссылки — :visited

:visited окрашивает ссылки, которые браузер считает уже открытыми. Обычно только цвет (и немногое ещё). Не рассчитывайте на padding или вёрстку — приватность ограничивает это.

Посещённая — спокойный цвет ссылки

css
CSS Code 
a:visited {
color: #6b21a8;
}

Порядок состояний ссылки

Если пишете несколько состояний вместе, безопасный привычный порядок: link → visited → hover → focus (иногда LVHA). Так hover и focus остаются видны и на посещённых ссылках.

Первый ребёнок — :first-child

:first-child значит: элемент — первый ребёнок своего родителя. Не «первый li на всей странице», а первый среди братьев и сестёр под этим родителем.

Первый ребёнок — выделить первый пункт списка

css
CSS Code 
li:first-child {
font-weight: 700;
}

Дальше: :nth-child

С :nth-child(odd) или :nth-child(3) получаете полосы или «каждый третий». Сначала освойте :first-child, потом эти шаблоны.

Хорошие привычки

  • Псевдокласс = одно двоеточие (:hover); псевдоэлемент = два (::) — следующий урок
  • Интерактивный hover всегда с ясным :focus
  • Цвета visited спокойные
  • Проверяйте и Tab’ом, не только мышью

Попробуйте сами

  1. Короткая страница с <button>, <input>, несколькими ссылками и <ul> из трёх <li>.
  2. Добавьте button:hover { background-color: #0f766e; color: #fff; } и наведите мышь на кнопку.
  3. Добавьте input:focus { outline: 2px solid #0f766e; } и войдите в поле Tab’ом.
  4. Добавьте a:visited { color: #6b21a8; }, откройте ссылку и вернитесь.
  5. Добавьте li:first-child { font-weight: 700; } — жирным станет только первый пункт.

Частые ошибки

  • Писать ::hover вместо :hover — двойное двоеточие для псевдоэлементов
  • Стилизовать hover и убрать outline фокуса без замены
  • Ждать полной свободы от :visited для любого свойства
  • Думать, что p:first-child значит «первый абзац где угодно на странице»
  • Класть важный текст только в :hover, чтобы сенсорный пользователь его не видел

Кратко

  • Псевдоклассы выбирают по состоянию или позиции одним двоеточием
  • :hover и :focus дают отклик; оставляйте оба
  • :visited красит открытую ссылку в пределах браузера
  • :first-child — первый ребёнок; :nth-child — следующий шаг
  • Одно двоеточие = псевдокласс; два = псевдоэлемент
  • Практикуйтесь мышью, Tab и коротким списком

🧠 Проверьте Свои Знания

Готов к Началу

Проверьте Свои Знания

Бросьте себе вызов с помощью этой интерактивной викторины и узнайте, насколько хорошо вы понимаете тему

❓
7
Вопросы
🎯
70%
Для Прохождения
♾️
∞
Время
🔄
∞
Попытки

📝 Инструкции

  • Внимательно прочитайте каждый вопрос
  • Выберите лучший ответ на каждый вопрос
  • Вы можете пересдавать тест столько раз, сколько захотите
  • Ваш прогресс будет показан вверху
Тема 1 из 1
Css Урок