やあ、お疲れ。今日も元気にコード書いてるかい？
リポジトリのPull Requestを見ていて、ふと目にとまったんだよね。「あれ、なんでこのフォームの任意入力欄、わざわざ自前で `.is-optional` なんて冗長なクラスを付与して制御してるんだろう？」って。
君も経験ないかい？ フォームのスタイリングを任されたとき、必須項目（`required`）にはドヤ顔で赤字の「必須」ラベルをつけるのに、その他大勢の「任意項目」にはクラス名をベタ貼りしたり、あるいは何もスタイリングせずに放置したり……。
でもね、現代のCSSには、ブラウザが標準で用意してくれている強力な武器があるんだ。それが今回焦点を当てる `:optional` 疑似クラス だ。
今回は、このあまりスポットライトを浴びないけれど、知っていればフォーム実装のイライラを半分に減らしてくれる `:optional` について、ブラウザの裏側の動きから実務で即座に使えるテクニックまで、徹底的に解説していこう。
—
1. `:optional` 疑似クラスの正体と、ブラウザの裏側の話
まず、仕様の定義から正確におさらいしておこう。
`:optional` 疑似クラスは、HTMLのフォーム要素（``, `