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

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

Псевдоклассы состояния

:hover — при наведении мыши

.nav-link:hover {
  color: #2563eb;
}

.post-card:hover {
  border-color: #2563eb;
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.1);
}

.btn:hover {
  background: #1d4ed8;
}

:focus — при фокусе (клавиатура/клик)

Важно для доступности — пользователи клавиатуры видят, где они находятся.

input:focus,
textarea:focus {
  outline: none;
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}

.nav-link:focus {
  outline: 2px solid #2563eb;
  outline-offset: 2px;
  border-radius: 2px;
}

Никогда не делайте outline: none без замены — это ломает навигацию с клавиатуры.

:active — в момент нажатия

.btn:active {
  transform: scale(0.98);   /* лёгкое «нажатие» */
  background: #1e40af;
}

Псевдоклассы структуры

:first-child и :last-child

/* Убрать верхний border у первой карточки */
.post-card:first-child {
  border-top: none;
}

/* Убрать нижний отступ у последней */
.post-card:last-child {
  margin-bottom: 0;
}

:nth-child()

/* Каждый второй элемент (чётные) */
.post-card:nth-child(even) {
  background: #f9fafb;
}

/* Каждый третий */
.post-card:nth-child(3n) {
  border-top: 2px solid #2563eb;
}

/* Первые три */
.post-card:nth-child(-n+3) {
  font-weight: 600;
}

:not() — отрицание

/* Все ссылки кроме активной */
.nav-link:not(.nav-link--active):hover {
  text-decoration: underline;
}

/* Все input кроме submit */
input:not([type="submit"]) {
  border: 1px solid #d1d5db;
}

:focus-within

Применяется к родителю, если фокус внутри него — удобно для форм:

.search-wrapper:focus-within {
  box-shadow: 0 0 0 2px #2563eb;
  border-radius: 6px;
}

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

Псевдоэлементы пишутся с двойным двоеточием :: и создают вспомогательный контент без изменения HTML.

::before и ::after

Вставляют виртуальный элемент до/после контента. Требуют свойство content.

/* Стрелка перед каждой ссылкой в оглавлении */
.toc-link::before {
  content: "→ ";
  color: #2563eb;
}

/* Горизонтальная линия после заголовка секции */
.section-title::after {
  content: "";
  display: block;
  width: 40px;
  height: 3px;
  background: #2563eb;
  margin-top: 8px;
}

::placeholder

input::placeholder,
textarea::placeholder {
  color: #9ca3af;
  font-style: italic;
}

::selection

Цвет выделения текста мышью:

::selection {
  background: #bfdbfe;
  color: #1e40af;
}

DevBlog: кнопка с эффектами

<a href="/articles/" class="btn btn-primary">Все статьи</a>

.btn {
  display: inline-block;
  padding: 10px 20px;
  border-radius: 6px;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.15s ease;
  cursor: pointer;
}

.btn-primary {
  background: #2563eb;
  color: white;
}

.btn-primary:hover {
  background: #1d4ed8;
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(37, 99, 235, 0.3);
}

.btn-primary:active {
  transform: translateY(0);
  box-shadow: none;
}

.btn-primary:focus {
  outline: 2px solid #2563eb;
  outline-offset: 3px;
}

DevBlog: список статей с разделителем через ::after

.post-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.post-list li {
  padding: 16px 0;
  position: relative;
}

/* Разделитель между элементами */
.post-list li:not(:last-child)::after {
  content: "";
  display: block;
  height: 1px;
  background: #e5e7eb;
  margin-top: 16px;
}

Шпаргалка