CSSのスタイル優先順位

大規模開発になればなるほどcssのスタイルで何が優先されるかわかりにくくなります

ここでは優先順位を順番に説明します

1位  !important指定

p {
    color: red !important;
    }
p#sampleId {
    color: blue;
}

この場合は赤が優先です

2位  インラインスタイル指定


<head> <style type="text/css"> .sampleClass { color: red; } p#sampleId { color: blue; } </style> </head> <body> <p id="sampleId" class="sampleClass" style="color: blue;">文</p> </body>

この場合は青です

3位  idセレクタ指定

#sampleId {
    color: red;
}
.sampleClass {
    color: blue;
}

この場合は赤です

4位  classセレクタ、属性セレクタ、疑似セレクタ指定

.sampleClass {
    color: red;
}
p {
    color: blue;
}

5位  後から書いたもの

p {
    color: red;
}
p {
    color: blue;
}

この場合は青です


  1. !important指定

  2. インラインスタイルで指定

  3. idセレクタで指定

  4. classセレクタ、属性セレクタ、疑似セレクタで指定

  5. 後から書いたもの

の順番で優先されます。

正確には宣言によってポイントが決まっていて、その合計点によって優先が決まるようです。!importantは1000点、idは100点のようです