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

Псевдоклассы в CSS — это специальные состояния селекторов, которые позволяют применять стили к элементам в определённых состояниях, не добавляя дополнительные классы или элементы в HTML. Это эффективно упрощает ваш код и улучшает удобство работы с элементами.

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

Вот несколько часто используемых псевдоклассов и их примеры:

1. :hover — применяется, когда курсор мыши находится над элементом.

   a:hover {
       color: blue; /* Меняем цвет текста на синий при наведении */
   }
   

   
   Пример в HTML:

   <a href="#">Наведи на меня</a>
   

2. :active — применяется в момент, когда элемент активен, например, кнопка при нажатии.

   button:active {
       background-color: green; /* Изменяем цвет кнопки на зеленый при нажатии */
   }
   

   
   Пример в HTML:

   <button>Нажми на меня</button>
   

3. :focus — применяется к элементам, которые находятся в фокусе, например, поля ввода.

   input:focus {
       border: 2px solid orange; /* Увеличиваем границу до оранжевого при фокусе */
   }
   

   
   Пример в HTML:

   <input type="text" placeholder="Введите текст" />
   

4. :nth-child(n) — позволяет стилизовать элементы на основе их позиции в родительском элементе.

   li:nth-child(2) {
       color: red; /* Второй элемент списка станет красным */
   }
   

   
   Пример в HTML:

   <ul>
       <li>Первый</li>
       <li>Второй</li>
       <li>Третий</li>
   </ul>
   

5. :first-child и :last-child — выбирают первый и последний дочерние элементы соответственно.

   p:first-child {
       font-weight: bold; /* Делаем первый параграф жирным */
   }
   
   p:last-child {
       font-style: italic; /* Делаем последний параграф курсивом */
   }
   

   
   Пример в HTML:

   <div>
       <p>Первый параграф</p>
       <p>Второй параграф</p>
       <p>Третий параграф</p>
   </div>
   

Заключение

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