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

Сегодня поговорим о такой вещи, как псевдоэлементы и псевдоклассы.

Многие разработчики, причём, даже не новички, часто путают эти два понятия. Разложим все по полочкам.

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

Псевдокласс - это свойство определённого HTML-элемента. Иными словами, оно может отвечать за различные состояния, которые в данный момент применимы к элементу. Синтаксис любого псевдокласса следующий:

<элемент>:<селектор> {
  ...
}

Самыми распространёнными являются:

1) :hover - псевдокласс, правила которого выполняются, когда курсор мыши находится над элементом.
2) :first-child - псевдокласс, правила которого выполняются, если текущий элемент является первым среди "братьев"

Пример:

p:first-child {
  color: red;
}

<div>
  <p> Красный текст </p>  // Этот текст будет красным!!!
  <p> Обычный текст </p>
  <p> Обычный текст </p>
</div>

3) :nth-child(xn) - псевдокласс, правила которого выполняются, если текущий элемент попадает в диапазон значений математической формулы

Пример:

p:nth-child(2n) { // Описывает все чётные элементы
  color: red;
}

<div>
  <p> Обычный текст </p>  
  <p> Красный текст </p>  // Этот текст будет красным!!!
  <p> Обычный текст </p>
  <p> Красный текст </p>  // Этот текст будет красным!!!
  <p> Обычный текст </p>
</div>

Псевдоэлементы

Теперь поговорим о псевдоэлементах.
Как ни странно, но псевдоэлемент - это элемент, а не свойство.
Почти любой селектор, который является псевдоэлементом добавляет содержимое, которого не было в исходном коде.
Синтаксис у псевдоэлементов отличается от псевдокласса дополнительным двоеточием:

<элемент>::<селектор> {
...
}

Самыми распространёнными являются:

1) ::after - псевдоэлемент, который добавляется ПОСЛЕ выбранного элемента (в иерархии DOM).
2) ::before - псевдоэлемент, который добавляется ДО выбранного элемента (в иерархии DOM).

Пример:

div {
  position: relative;
}

div::after {
  content: "";
  position: absolute;
  width: 10px;
  height: 10px;
  top: 0;
  left: 0;
  background: black;
}

Данный код добавит черный квадрат в левый верхний угол родительского блока.

Интересные факты:

🔻 У любого input, placeholder является псевдоэлементом
🔻 Для каждого псевдоэлемента обязательным является свойство "content"
🔻 Несмотря на то, что ::first-letter и ::first-line являются псевдо-элементами, их логика работы больше похожа на псевдо-класс - они применяют новые правила стилей к первой букве или первой строке в тексте соответственно