CSS `n of` Selectors for Conditional Validation – Frontend Masters Blog

CSS's `:nth-child(n of <selector-list>)` syntax can be used for client-side conditional form validation without JavaScript. By combining `n of` selectors with `:has()`, `:placeholder-shown`, `:checked`, and other pseudo-classes, you can detect when a specific number of form fields have been filled in and provide real-time visual feedback to users. The post walks through a practical example where a form signals completion once at least three of five varied field types (email, URL, text, radio, select) are filled out, demonstrating how to compose complex CSS selectors for this purpose. A potential WebKit bug with state-based `n of` styling is also noted.