女性向けエンジニアスクール
3秒でわかる
同じ要素に複数の CSS が当たったとき、どれを採用するかを決める仕組み。効かないスタイルの原因はたいていこの順位づけにあります。
もう少し詳しく
どういうものか
カスケードは、ひとつの要素の同じプロパティに対して複数の宣言が競合したときに、どれを採用するかを決める CSS の仕組みです。Cascading Style Sheets の Cascading はこの語から来ています。
判定はいくつかの段階を順に見ていきます。まず由来と重要度(作者のスタイルか利用者のスタイルか、!important が付いているか)、次にレイヤーの順序、次に詳細度、最後に記述順です。前の段階で決着すれば、後ろの段階は見られません。
なぜ必要か
CSS はひとつの要素に対して、いくつものファイルやセレクタから同時に指定が飛んできます。リセット CSS、フレームワーク、自作のスタイル、ページ固有の調整。優先順位のルールが決まっていなければ、読み込み順のわずかな違いで見た目が変わってしまいます。カスケードは、その競合を毎回同じ結果に落とすための規則です。
具体例
<p id="lead" class="note">テキスト</p>p { color: black; } /* 詳細度 0,0,1 */
.note { color: blue; } /* 詳細度 0,1,0 <a href="/glossary/class" class="text-primary font-medium underline underline-offset-2 hover:text-primary-dark">クラス</a>のほうが強い */
#lead { color: green; } /* 詳細度 1,0,0 ID が最も強い */
/* 同じ詳細度なら、後に書いたほうが勝つ */
.note { color: red; }この場合、表示される色は緑です。ID の指定が詳細度で勝つため、後ろに書いた .note { color: red } は採用されません。
つまずきやすいところ
「後に書いたほうが勝つ」とだけ覚えていると、直しても直しても効かない状況にはまります。記述順が見られるのは詳細度が同じときだけです。効かないときは、まずブラウザの開発者ツールで、打ち消し線が付いた宣言と勝っている宣言の詳細度を見比べます。
!important を足せばたいてい勝てますが、これを乱発すると、次に直したい人がさらに !important を足すしかなくなります。詳細度を下げる方向で解決するのが原則です。
詳細度の数え方も間違えやすい点です。ID が 1 つ、クラスと属性セレクタと擬似クラスが 1 つずつ、要素と擬似要素が 1 つずつ、という三つの桁で数えます。桁上がりはしないので、クラスを 11 個並べても ID 1 つには勝てません。
継承と混同するのも多い誤りです。カスケードは「同じ要素への複数の指定」を裁く仕組みで、継承は「親から子へ値が伝わる」別の仕組みです。子に直接の指定があれば、親から継承した値は競合の土俵にすら上がりません。
覚え方
見るのは「重要度、レイヤー、詳細度、記述順」の順です。上の段階で決まれば下は見られません。記述順は最後の同点決勝にすぎない、と押さえておくと勘違いが減ります。
