JavaRush /Курсы /Модуль 1: Web Core /Введение в псевдоклассы

Введение в псевдоклассы

Модуль 1: Web Core
15 уровень , 0 лекция
Открыта

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

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

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

  1. Определение состояния элемента:
    • Псевдоклассы могут указывать на состояние элемента, такое как наведение мыши, фокус или активация
  2. Определение позиции элемента:
    • Псевдоклассы могут указывать на позицию элемента относительно его родителя или других элементов, таких как первый или последний элемент
  3. Специальные случаи и логические группы:
    • Псевдоклассы могут также определять специальные случаи, такие как первый элемент типа или нечетный/четный элемент

Как использовать псевдоклассы

Псевдоклассы добавляются к селектору с использованием двоеточия (:). Они могут быть использованы как с элементными селекторами, так и с классами, идентификаторами и другими селекторами.

Синтаксис:

    
      селектор:псевдокласс {
        свойства: значения;
      }
    
  

Примеры использования

1. Селектор элемента с псевдоклассом

В этом примере все первые абзацы (<p>) внутри своих родительских элементов будут жирными:

CSS
    
      p:first-of-type {
        font-weight: bold;
      }
    
  

2. Селектор класса с псевдоклассом

В этом примере фон всех элементов с классом .button станет синим при наведении курсора мыши:

CSS
    
      .button:hover {
        background-color: blue;
      }
    
  

3. Комбинированные селекторы с псевдоклассами

В этом примере все четные абзацы (<p>) внутри элементов с классом .container будут красными:

CSS
    
      .container > p:nth-child(2n) {
          color: red;
      }
    
  

1.2 Примеры псевдоклассов и их применение

1. Псевдоклассы, определяющие состояние

Псевдоклассы, определяющие состояние элемента, позволяют изменять его стилизацию в зависимости от взаимодействия пользователя или состояния элемента.

CSS
    
      a:link {
        color: blue;
      }

      a:visited {
        color: purple;
      }

      a:hover {
        color: red;
      }

      a:active {
        color: green;
      }
    
  

2. Псевдоклассы, определяющие позицию

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

CSS
    
      li:first-child {
          font-style: italic;
      }

      li:last-child {
          font-style: italic;
      }

      li:nth-child(odd) {
          background-color: #f0f0f0;
      }

      li:nth-child(even) {
          background-color: #ffffff;
      }
    
  

3. Псевдоклассы для логических групп

Эти псевдоклассы позволяют стилизовать элементы на основе их логических групп или типов.

CSS
    
      input:checked {
        background-color: yellow;
      }

      input:disabled {
        background-color: grey;
      }

      input:enabled {
        background-color: white;
      }
    
  
1
Задача
Модуль 1: Web Core, 15 уровень, 0 лекция
Недоступна
Фон при наведении
Фон при наведении
1
Задача
Модуль 1: Web Core, 15 уровень, 0 лекция
Недоступна
Активные ссылки
Активные ссылки
Комментарии (1)
ЧТОБЫ ПОСМОТРЕТЬ ВСЕ КОММЕНТАРИИ ИЛИ ОСТАВИТЬ КОММЕНТАРИЙ,
ПЕРЕЙДИТЕ В ПОЛНУЮ ВЕРСИЮ
RayCowperwood Уровень 48
26 мая 2025
для более интересного эффекта при наведении добавляйте transition например

.btn:hover{
    background-color: red;
    transition: 1s;
}