Валидация на чистом CSS: считаем поля через :nth-child(n of selector)
Раньше для проверки «заполнено ли хотя бы 3 поля» нам обязательно нужен был JavaScript. Теперь с этим справляется нативный CSS.
В чем суть?
Синтаксис :nth-child(n of .selector) позволяет считать не все элементы подряд, а только те, что соответствуют определенному правилу.
Как это работает для валидации:
Мы определяем «заполненное» состояние (например, через :not(:placeholder-shown) или :valid).
Используем селектор :nth-child(3 of .field:has(:valid)). Он «выстрелит» только тогда, когда в списке появится третий валидный элемент.
Через комбинатор «тильда» (~) управляем состоянием кнопки отправки или показываем сообщение об успехе.
Пример кода:
CSS
/* Разблокируем кнопку, когда заполнено минимум 3 поля */
.form:has(.field:nth-child(3 of :has(input:not(:placeholder-shown)))) button {
opacity: 1;
pointer-events: auto;
}
👉 @seniorFront
10
1May 11, 2026 7.5K 32
