お疲れ。今日も今日とてCSSの沼にハマっているかい？
フロントエンドをやっていると、「ボタンをグレーアウトして、ユーザーに押せないことを伝える」なんて要件は、朝飯前レベルで毎日書くはずだ。
で、だ。大半のジュニアや中級初期のエンジニアは、こういう時になんの疑いもなくこう書く。
/ よく見かける「とりあえず動く」コード /
.my-button.is-disabled {
background-color: #ccc;
color: #666;
cursor: not-allowed;
}
おいおい、ちょっと待て。クラス名をわざわざJSで付け外ししたり、HTML側で `class=”btn is-disabled”` なんて冗長なこと、まだやってないだろうな？
HTMLの仕様書には、誇らしげに `disabled` 属性が用意されている。そしてCSSには、その属性を持つ要素をスマートに捉えるための強力な疑似クラス、`:disabled` があるんだ。
今回は、この `:disabled` 疑似クラスについて、ブラウザの裏側の動きから、実務で絶対に知っておくべき「一歩先のハック」まで、シニアの俺がみっちり叩き込んでやろう。心して聞いてくれ。
—
1. なぜクラスではなく `:disabled` 疑似クラスを使うべきなのか？
まず大前提として、HTMLの `