Валидация на чистом 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