おい、調子はどうだい？
最近、社内のデザインレビューやコードレビューをしていて「おっ」と感心させられることが増えた反面、フォーム周りの実装を見ると「あぁ、もったいないな……」と感じる場面にまだまだ遭遇するんだよね。
例えば、入力必須のフィールドにわざわざHTMLへ `required` 属性をつけているのに、CSS側ではご丁寧にわざわざ `.is-required` なんていうカスタムクラスを親要素やinputにつけてスタイリングしているコード。あれを見るたびに、「いやいや、ブラウザのネイティブ機能をもっと信じてやろうぜ！」って喉まで出かかっているんだ。
今回は、フロントエンドの中級からもう一歩先の「本当の意味でモダンなCSS設計」へステップアップしたいキミに向けて、`:required` と `:optional` という強力な擬似クラスについて徹底的に解説しようと思う。これらを使いこなせるようになると、JavaScriptのバリデーションライブラリに頼り切らなくても、ブラウザのステートと完全に同期した美しいUIが驚くほど少ないコード量で書けるようになる。
現場のリアルな泥臭いノウハウも含めて話していくから、最後までコーヒーでも飲みながら付き合ってくれ。
—
なぜ今、`:required` と `:optional` なのか？
実務の現場でフォームを実装するとき、UX（ユーザー体験）の観点から「どの項目が必須で、どの項目が任意なのか」をユーザーに明確に伝えるのは鉄則中の鉄則だ。昔の僕らは、次のようなアプローチをよく取っていた。
HTMLの属性に `required` を書きつつ、CSS側でも `.is-required` を付与する。これ、一見すると普通に見えるかもしれない。でも、「情報が二重管理されている」ということに気づくだろうか？ HTMLの書き忘れや、JS動的生成時にクラスのつけ忘れが起きる温床になるし、何よりコードが汚れる。
ここで思い出してほしいのが、ブラウザのネイティブ機能だ。ブラウザはすでに、HTMLの `required` 属性の有無を内部でしっかりと把握している。だったら、CSS側からそのステートを直接覗き見してやればいい。それを行ってくれるのが `:required` と `:optional` 擬似クラスというわけだ。
ブラウザの裏側で何が起きているのか？
CSSの擬似クラスの多くは、DOMの状態（State）の変化をリアルタイムで監視している。`:required` も例外ではない。
ブラウザはHTMLパーサーが ``、`