cssで同様のクラスの指定が二重に重なった時はどちらが優先されるのでしょうか。

Question

cssで同様のクラスの指定が二重に重なった時はどちらが優先されるのでしょうか。

.content {
padding: 20px;
}

.content {
padding: 40px;
}
という表記だと、どちらが優先的に処理されますか？
よろしくお願いします。

Answer 1

セレクタの優先順位には「詳細度」と「記述順」の2つの情報が用いられます。

「詳細度」とは文字通り「どれだけ詳しく具体的に指定されているか」を意味しており、
ざっくり言うと

要素 ＜ class ＜ id ＜ インラインStyle

の順に詳細度が高くなっていき、優先順位が上がっていきます。
子孫セレクタなど複数のセレクタが組み合わされている場合も、
トータルで**「より詳細に指定されたセレクタ」が優先**されることになります。
（※インラインStyleの詳細度は非常に高いので、原則他の全てのセレクタに優先します）

詳細度が全く同じ（今回の例のようにclassセレクタ同士など）場合は、
「後から読み込まれる方」が優先となります。

ただし、上記の優先順位ルールを無視して指定の記述を最優先させる奥の手として、
!importantの指定があります。
プロパティの後ろにこれをつけると、他に優先順位の高いセレクタがあったとしても、
!importantを指定した箇所のスタイルが最優先される仕様となっています。
（乱発するとメンテナンス困難なCSSになるのであくまで最終手段です）

Answer 2

簡単には、より具体的に指定したものが強く、同じ定義なら後に指定したものが勝ちますが、
!important 指定することで、順位を変えることもできます。

簡単な例では

<div class="content">a</div>

以下のようにしたとき、paddingは40になります。
(divよりも、「クラスがcontent」の方が具体的）

.content { 
padding: 20px; 
}

.content { 
padding: 40px; 
} 

div{
padding : 100px;
}

しかし以下にした場合は paddingは20になります。

.content { 
padding: 20px !important; 
}

.content { 
padding: 40px; 
} 

div{
padding : 100px;
}

Answer 3

重複定義は後書き優先です

---

追記

厳密には「ポイントの高い方」です（記述例場合はポイントが同じなので原則に従う＝後書き優先）

ポイントについての参考サイト
CSSセレクタの優先順位の計算方法

あ、これはセレクタの話か、、、