Псевдоклассы и псевдоэлементы

Псевдоклассы в CSS – это дополнение к основному селектору, которое позволяет выбрать элемент в зависимости от его особого состояния. Добавляется он к селектору c помощью символа двоеточия, селектор:псевдокласс. Их предназначение дать возможность применить стили к элементу, когда происходит определенное событие, например когда указатель мыши находится над элементом. Например, при наведении сделаем цвет ссылки красным, для этого используем hover.

Пример

HTML


<a href="https://stylecss.ru/" target="_blank">Lorem Ipsum</a>
      

CSS


a {
  color: #ffa500;
}
a:hover {
  color: #dc143c;
}
     

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

Пример

Lorem Ipsum

HTML


<p>Lorem Ipsum</p>
      

CSS


p {
  color: #ffa500;
}
p::first-letter {
  color: #dc143c;
}