こんにちは、ソエです。

今回は、CSSのスタイルの優先順位をまとめてみました!

これを覚えておけばコーディングの際なぜスタイルが効かないのか、という謎も少しはなくなると思いませんか?
優先順位でコーディングの時間がかかるってのは、避けたいですし・・・

というわけで、この記事を読んで少しでも覚えてください!
では、いきましょう!

基本の優先順位

まずは基本!

classやid関係なく、スタイルは下に書かれたものほど優先順位が高いです。

実際に書いてみましょう。

p{color: red;}
p{color: green;}

下に書かれるほど優先順位は高い

下に書かれた、color: green;が効いてますね。
これで、スタイルの優先順位の基本は分かったはずです。
これを踏まえたうえで、classやidでどう優先順位が変わるのか見てみましょう。

classとidを使用した優先順位

classとタグ

まずはclassとタグだけで比べます。

.text{color: green;}
p{color: red;}

優先順位はどうなるか

classが上にあるのに、classのスタイルが効いてますね。
ということは、classの方が優先順位が高いようです。
となれば、一文だけ色を変えたければclassを付けるだけで済みそうです!

ちなみに、タグとかclassなどスタイルを付けたい要素のことをセレクタと呼びます。
そのセレクタがclassであれば、classセレクタ、と言いpやaなどのタグでタイプセレクタと言います。

idとタグ

次にidとclassで比べます。
idの方が高ければ、先ほどのclassとの結果と総合し、タグは一番優先順位が低い、となります。
ともあれ、試さないことには分からないので試してみましょう。

#yusen{color: blue;}
.text{color: green;}

優先順位はどうなるか

上にあるidが優先されている。
ということは、idの方が優先順位が高いですね。

今の優先順位を見てみると・・・
id>class>タグ
という優先順位になりますね。

ちなみに、idはidセレクタと言います。

合わせてみる

では、次に色々合わせてみましょう。
.class#idと#id.class、という感じに。

#yusen.text{color: blue;}
.text#yusen{color: green;}

優先順位はどうなるか

おや?どうやら、下にある.text#yusenが優先順位が高いようですね。
では、逆も試してみましょう。

.text#yusen{color: green;}
#yusen.text{color: blue;}

優先順位はどうなるか

どうやら、classとidを合わせると基本の優先順位と同じで、下にあるほうが優先順位が高いようですね。

優先順位まとめ

さて、上記を踏まえるとどうやらスタイルの優先順位は、点数制にしたほうが分かりやすいですね。

タグ 1点
class 10点
id 100点

これの点数が高ければ優先順位が高い、というわけですね。
これに基本の優先順位を合わせると、このような優先順位になります。

点数が高いスタイル>下にあるスタイル>上にあるスタイル

終わりに

どうでしたか?
これで、CSSのスタイル優先順位が把握できたはずです!

しかし、これ以外にも疑似クラス要素などもあり、それはそれで優先順位が変わってきます。
そちらを使う場合は調べてみて下さい。きっと他の方が書いているはず!

では、ご閲覧ありがとうございました!

ご閲覧ありがとうございました!

プロフィール

ソエ

愛知県産のインドア。趣味はゲームとアニメ鑑賞。高校三年生にWebに興味を持ち専門学校へ入学。写真は愛犬です。

検索

ホーム/ CSS/

【初心者向け】CSSの優先順位