Рассмотрим в этой статье тему псевдоклассов. Прежде всего, что это такое?

Давайте начнем с нескольких примеров!

:active

Этот псевдокласс действует как событие Click и используется для каждого элемента.

Пример:

p:active { 
  background-color: red; 
} 

Объяснение: При нажатии на элемент фон меняется на красный.

::after

Вы можете вставить некоторый контент в HTML после элемента. 

Пример:

p::after { 
  content: "insert here"; 
  color: red; 
}

::before

Этот класс действует как :: after, но, с другой стороны, вставляет содержимое перед элементом.

Пример:

p::before { 
  content: "insert here"; 
  color: red; 
}

::first-line

Выделит первую строку текста, к которой вы можете применить свои свойства.

Пример:

p::first-line { 
  color: red; 
}

::first-letter

Выберет первую букву текста.

Пример:

p::first-letter { 
  color: red; 
  font-size: 2rem; 
}

:first-child

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

Пример:

.class :first-child {
  color:red;
}

Вы можете быть более конкретным и выбрать первого потомка определенного типа. Пример:

.class p:first-child {
  color:red;
}

Который выберет первый элемент типа <p> в .class

Дополнительная информация о псевдоклассах.