Web デザインにかかせない基礎中の基礎、CSS の優先順位のおさらい。
意外と忘れているところもあるので、覚えておくと役に立つかもしれません。

今回は HTML が以下の場合を想定し記述しています。

<ul id="list-id" class="list-class">
	<li>LIST 1</li>
	<li>LIST 2</li>
	<li>LIST 3</li>
</ul>

1. タグの階層による優先順位

厳密には CSS 側でなく HTML 側ですが一応。
階層が違う場合、CSS の記述位置は関係なく内側にあるタグへの指定が優先されます。
例えば、以下のように設定した場合、後から記述した ul へのプロパティは適用されず ul より内側にある li が優先されます。

ul li {
	color: #FF0;
}
ul {
	color: #0FF;
}

2. 記述位置による優先順位

基本的に CSS は後から書いたものに上書きされます。
以下の例では、#0FF が適用されます。
例外として、後述のセレクタの優先順位によるものがあります。
【id は class より優先される】などがそれに当たります。

ul li {
	color: #FF0;
}
ul li {
	color: #0FF;
}

3. セレクタの優先順位

id や class セレクタ以外にも優先順位があります。
下に行くほど優先順位が下がります。
疑似セレクタはおそらくタイプセレクタと同等。

1. ID セレクタ

#list-id {
	color: #FF0;
}

2. class セレクタ

.list-class {
	color: #FF0;
}

3. タイプセレクタ

ul {
	color: #FF0;
}

4. 全称セレクタ

* {
	color: #FF0;
}

4. style 属性

いわゆる直書き。
jQuery などで CSS のプロパティを変更するとこの状態になりますね。
style 属性はセレクタより優先されて適用されます。

<ul style="color: #FF0;">
	<li>LIST 1</li>
	<li>LIST 2</li>
	<li>LIST 3</li>
</ul>

5. !important

2~4 のルール無視し、プロパティの上書きを行います。
あまり多用する機会はないにしろ、JavaScript 絡みのときなどに役立ったり。

ul {
	color: #FF0 !important;
}

6. まとめ

簡単に整理すると、

!important > style 属性 > セレクタの優先順位 > 記述位置

ということになります。
基礎中の基礎ですが、復習してみてはいかがでしょうか。

EX. class 256 個で id に打ち勝つ？

少し前に結構話題になったやつをご紹介。
セレクタの優先順位により、class が id に打ち勝つことは基本的にないのですが、class を 256 個用意し 同じプロパティを指定すれば id に勝てるというバグ (？)。
Codepen にてデモがありますので是非ご覧ください！

ソースをいじって気付いたんだけど、HTML 上の class を先に書けば 255 個で勝てるという。セレクタも奥深いですねー。