CSSセレクタの優先順位を上げる意外な方法

 (cirrus.twiddles.com)
22 ポイント 投稿者 ragus 2024-10-04 | 7件のコメント | WhatsAppで共有

問題点

  • CSSでスタイリングしていると、しばしばCSSの競合が発生し、意図しないスタイルが適用されることがある。
  • このような競合は、たいていUIライブラリ、サードパーティ製ウィジェット、あるいは別のチームが管理しているCSSコードが原因だが、その場合はCSSを自由に修正できないことが多い。
  • 特にUIライブラリやサードパーティ由来のCSSと衝突する場合、HTMLに追加のclassやIDを加えることも難しいことがある。
  • さらに、競合の原因となっているCSSコードが非常に具体的に書かれている場合、自分のCSSの優先順位を上げるために、さらに具体的に書くことも不可能な場合がある。
  • このとき多くの開発者は安易に!importantを使うが、これは推奨される方法ではない。

解決策

  • セレクタを繰り返して使えばよい。
  • たとえば .checkbox__icon.checkbox__icon は単一の .checkbox__icon より高い優先順位を持つ。
  • この方法はCSSの裏技のように感じられるかもしれないが、CSS Selectors Level 4 仕様を見ると、"Repeated occurrences of the same simple selector are allowed and do increase specificity.(同じ単純セレクタの繰り返しは許可されており、詳細度を高める)" と明記されている。

関連記事

7件のコメント

 
kroisse 2024-10-07

いまでは CSS Cascade Layers（@layer）が主要ブラウザーでどれもサポートされているので、もうこの種の hack に頼らなくてもよさそうです。

https://developer.mozilla.org/en-US/docs/Web/CSS/@layer
https://caniuse.com/css-cascade-layers
 
gwpark 2024-10-06

ああ、だから styled-components では && を使う方法でスタイルを上書きするんですね？
 
dogtree 2024-10-05

学生、文を下げて
 
kyc1682 2024-10-05

黒魔術っぽい感じですね（笑）
 
xenoside 2024-10-04

これからはこんなコードを見ることになりそうですね。
.checkbox__icon.checkbox__icon.checkbox__icon.checkbox__icon.checkbox__icon.checkbox__icon.checkbox__icon.checkbox__icon.checkbox__icon.checkbox__icon
 
nemorize 2024-10-04

おお、これは知りませんでした……
状況によっては、セレクタを複数回繰り返すプリプロセッサを作って使ってみるのもありそうですね。
 
spilist2 2024-10-04

おお、知らなかった方法ですね