サイトのデザイン等いじる際に、あれ?指定したはずのスタイルが効かない、なぜ??ってなることが未だにあります。勉強も兼ねて、改めて「CSSセレクタの適応優先度」についてまとめてみました。

セレクタについて

セレクタとは、スタイルを適用する対象のことを指します。
h1やpなどのHTML要素であったり、id属性やclass属性などが該当します。

主なセレクタは4種類

・ユニバーサルセレクタ
・タイプセレクタ
・classセレクタ
・idセレクタ

ユニバーサルセレクタとは

ユニバーサルセレクタとは、すべての要素に対してスタイルを指定するものです。

書き方
*{プロパティ:値;}

ユニバーサルセレクタを使用する場合は、アスタリスク(*)を使います。

タイプセレクタとは

タイプセレクタとは、h1やpタグなどのHTML要素に対してスタイルを指定するものです。

書き方
タイプ名{プロパティ:値;}

ある要素に共通するスタイルを指定する場合に用いられます。ただし、pタグなど複数回登場する要素の中で、一部のpタグだけにスタイルを指定することは難しく、classセレクタやidセレクタを利用してスタイルを指定する必要があります。

classセレクタとは

classセレクタとは、HTMLのclass属性に対してスタイルを指定するものです。

書き方
.class名{プロパティ:値;}
class名の前にドット(.)をつけます

classセレクタを使用することで、要素名を問わず、同じclass名のものに共通するスタイルを指定できます。

idセレクタとは

idセレクタとは、HTMLのid属性に対してスタイルを指定するものです。

書き方
#id名{プロパティ:値;}
id名の前にシャープ(#)をつけます

classセレクタとの違いは、HTMLファイルの中で、class属性が何度でも同じclass名が使用できるのに対して、id属性はユニークなものとして2回以上同じid名を使用することができません

実際の使われ方

実際には、上で説明した4つのセレクタを組み合わせることにより、さまざまなスタイルの指定をしていきます。

例.headerの中のh1タグに対する指定

header h1{ font-size:24px; color:gray; }

上記の場合、ヘッダー要素の中にあるh1タグのフォントサイズを24px、色を灰色にしています。

 

例.div要素とclassセレクタの組み合わせ(半角スペースの有無による違い)
半角スペースの有無で、指定する対象の理解が異なります。
・半角スペースありの場合・・・「div要素の中のclass名がredの要素」という意味
・半角スペースなしの場合・・・「div要素かつclass名redがついている要素」という意味

<!DOCTYPE HTML><html> <hear>  <meta charset="utf-8">  <title>タイトル</title>  <style>    div.red {      color:red;    }  </style> </head> <body>   <div>    <p class="red">div要素の中のclass名がredの場合スタイルを指定</p>  </div> </body></html>

上記の場合、半角スペースなしで指定しているため、実際にはスタイルが設定されません。

セレクタの優先順位について

いよいよ本題。CSSセレクタの優先順位について紹介します。

基本の優先順位

まず、同じ対象に対して2度異なるスタイルの指定がされていた場合には、後に指定してある(CSSファイルを読んだときに、より下にされているものに)スタイルが適応されます。

 p {  background:red;} p {  background:blue;}

上記の場合、下に記載してある背景色の青が適応されます。

タイプセレクタとclassセレクタ

タイプセレクタとclassセレクタで異なる指定がある場合は、classセレクタが優先されます。

.red {  background:red;} p {  background:blue;}

上記の場合、順番は上でもclassセレクタで指定している背景色の赤が適応されます。

Idセレクタとclassセレクタ

Idセレクタとclassセレクタの場合では、idセレクタが優先されます。

#red {  background:red;}.blue {  background:blue;}

上記の場合は、classセレクタよりもidセレクタが優先されるため、背景色は赤となります。

結局なにがどうなってる?

結論からいうと、対象をより詳しく指定しているセレクタが優先されるということです。
今回調べてはじめて知ったのですが、その詳しさの度合いを示すものが決められているそうです。(http://www.w3.org/TR/CSS21/cascade.html#specificity
完全に勉強不足でした。。。

詳しさの点数の付け方ですが、以下のようになるそうです。

指定方法点数
ユニバーサルセレクタ*0
タイプセレクタp1
疑似要素:first-child1
疑似クラス[type=“text”]10
classセレクタ.container10
idセレクタ#header100
要素に直書きstyle=“ ”1000

さらに、合計点数が同じだった場合には、基本的な優先順位通りに後に書いたものが優先して適応されます。

最終手段 !important宣言

今まで説明してきたように、セレクタには、適応される優先度が決められています。
しかし、このルールを全く無視して強引にスタイルを適応してしまう方法があります。それが、!important宣言です。

ただし、!importatnt宣言を連発していると、予期せずスタイルが適応されず困り果てることが多いです。あくまで、ご利用は計画的に!!

【CSSセレクタと適応の優先順位について】まとめ

CSSセレクタとその適応の優先順位について紹介しました。
逐一点数を計算するものでもないので、まずは基本ルールを覚え、後は困ったときに計算してみるくらいかと思います。

CSSについては、優先順位に関連して、「継承」という問題もでてきます。
これも自分の理解が弱い部分だと認識していますので、また改めてまとめたいと思います。