[CSS]セレクタの優先順位まとめ

CSSセレクタの優先順位について、まとめてみました。

セレクタの優先順位にはいくつかルールがあります。それぞれのルールについて説明していきます。

• 後から記述した内容が優先される
• クラスよりIDの方が優先される
• より詳細に指定している方が優先される
• !importantがついている値が優先される

後から記述した内容が優先される

同じセレクタが複数あった場合、後から記述した内容の方が優先されます。例えば、以下のようにCSSに記述していた場合、class1クラスの文字色は赤になります。先にcolor:green;を指定していますが、その後color:red;が指定されることで、color:red;が優先され文字色が赤になるという仕組みです。

.class1{
color:green;
}

.class1{
color:red;
}

クラスよりIDの方が優先される

同じ要素にクラスとIDが指定されていて、クラスとIDの両方にスタイルが指定されている場合、IDに指定されている内容が優先されます。

#id1{
color:blue;
}

.class1{
color:red;
}

「後から記述した内容が優先される」ルールを考えると文字色は赤になりそうですが、クラスよりもIDの方が優先されるので、上記の場合文字色は青になります。

より詳細に指定している方が優先される

セレクタはより詳細に指定されている方が優先されます。

span#id1{
font-size:12px;
}

#id1{
font-size:15px;
}

同じIDの指定に見えますが、上に書いている方はspan要素まで指定しています。より詳細に指定した方が優先されるため、上に書いている方が優先され、フォントサイズは12pxになります。

!importantがついている値が優先される

これはちょっと強引なやり方ですが、値の後ろに!importantを入れるとその値が最優先されるようになります。

span#id1{
font-weight:normal;
}

#id1{
font-weight:bold !important;
}

上述されたルール通りなら文字は通常の太さになりますが、”!important”がついたことでこちらが最優先され、文字は太字になります。

!importantはあまり多用すると、どこが優先されているのかわからなくなってしまうので、気をつけるようにしましょう。