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

Обозначать элементы с помощью классов или id умеет любой верстальщик, это основы HTML. В этой статье я хотел бы поговорить о псевдоклассах.
По большому счёту - это не классы, просто такое название прижилось, и, как мне кажется, достаточно удачное.
Расставлять такие классы вы не можете. Браузеры сами их "проставляют".

Как именно это происходит?

Каждый псевдокласс "работает" по-своему.
Например, самые распространённые:

active - активная ссылка, то есть когда на неё нажали.
hover - применяется к ссылкам, когда на них наведён курсор мыши.
visited - применяется к ранее посещённым ссылкам.
link - применяется к ссылкам, которые не были ранее посещены.

Добавить стили по такому псевдоклассу можно следующим образом:

a:hover{
  color:red;
  cursor: pointer;
}

Такая запись будет подкрашивать ссылки при наведении в красный цвет и делать курсор в виде руки.

Ещё полезные псевдоклассы
checked - применяется к элементам интерфейса, таким как переключатели (checkbox) и флажки (radio), когда они находятся в положение «включено».
disabled - применится к заблокированным элементам формы.
first-child - сработает на первом дочернем элементе.
focus - применится к элементу, когда на него установлен фокус(кликните по элементу формы и нажимайте клавишу Tab)
Пример подсветки инпутов:

input:focus{
  box-shadow: 0 0 20px green;
}

Изменит цвет шрифта в заблокированных полях ввода:

input:disabled {
  color: blue;
}

Подкрасим первый абзац.
Вёрстка:

<div>
  <p>line 1</p>
  <p>line 2</p>
  <p>line 3</p>
</div>

Стили:

div p:first-of-type{
  color:yellow;
}

Посмотреть как это работает можно тут https://codepen.io/tristamoff/pen/LdrYLe

Подробнее ознакомиться с другими псевдоклассами можно тут