CSSはセレクタを詳しく書くいた方が優先される

WordPress＋有料テーマで構築されたブログのカスタマイズをしていたら、どうしても反映されないスタイルがあったの調べたら、こうゆうことだった。

セレクタをより詳しく指定した方が優先される

実際のコードで解説する。

HTML
<div class="aaa">
<p class="bbb"><a href="">あああ</a></p>
</div>

CSS
div.aaa p.bbb a {
color: red;
}

a {
color: blue;
}

上記の感じだと、後ろに書いてある color:blue が適用されそうだが、実際はリンクの文字は赤になってしまう。

CSS優先順のまとめ

優先順位を優先度の高い方から並べてみた。

1. !important が最強
2. セレクタをより詳しく記述する
   1. idセレクタ（例：#myprofile{color:red;}）
   2. classセレクタ（例：.kijititle{color:blue;}）
   3. タイプセレクタ（例：p{color:yellow;}）
   4. 全称セレクタ （例：*{color:pink}）
3. 寄りHTML要素に近い