【CSS】優先順位について学ぼう

シュウ

今回は、「初心者向け【CSS】によるスタイルの適用には順位」について書かせて
いただきます。

こんな方に読んで欲しい

CSSによるスタイルの適用の順位について知らない方
よく、CSSを記述したのに変更しない事に悩んでる方
「!important」を知らない方

[記事の内容]

CSSによるスタイルの適用には順位について

CSSによるスタイルの適用には順位が存在します。
1つの要素に複数のスタイルが指定されていた場合、どの指定が優先的に適用されるのか
確認していきましょう。

スタイル優先の得点計算について

CSSを要素に適用するには、「idセレクタ、calssセレクタで指定する」、「style属性で指定する」といった
方法があります。
1番得点の高いセレクタが適用されます。次に得点表のご説明いたします。

指定方法	例	点数
style属性	style=””	1000点
id属性のセレクタ指定	#style{}	100点
class属性のセレクタ指定	.style{}	10点
擬似クラスのセレクタ指定	input[name=”text”]	10点
要素名のセレクタ指定	h1{}	1点
擬似要素のセレクタ指定	li:first-child{}	1点
全称セレクタでの指定	*{}	0点

この表は必ず覚えておきましょう！！
次に実際に例をあげてご説明いたします。

HTMLファイル

<h1 class="title">【CSS】によるスタイルの適用には順位があります。</h1>

h1{color:red}	1点(要素名のセレクタ) = 合計1点
.title{color:blue}	10点(class属性のセレクタ) = 合計10点
h1.title{color:green}	1点(要素名のセレクタ) + 10点(class属性のセレクタ) = 合計11点

See the Pen
jOPxwGL by shu (@shu0325)
on CodePen.

今回は、「green」の色が優先的に適用されました。
1点(要素名のセレクタ) + 10点(class属性のセレクタ) = 合計11点となり、
紹介した3つの中で1番目に高い得点だからです。

スタイルによる記述順の優先について

同じ得点の指定があったときは、あとに記述したほうが優先されます。

HTMLファイル

<h2>記述順の優先について</h2>

See the Pen
abOGwjM by shu (@shu0325)
on CodePen.

スタイルによるプロパティの優先について

優先順位が低くても、プロパティが重複しないときはそのスタイルが適用されます。

HTMLファイル

<h2>プロパティの優先について</h2>

See the Pen
poJVrNQ by shu (@shu0325)
on CodePen.

h2要素にcolorの指定がありましたが、あとに記述した「blue」が適用されました。
ここでは、最初にfont-sizeを指定していますが、重複していないため、適用されています。

!important宣言について

プロパティの値のあとに半角スペースを空けて「!important」を記述すると、その指定が最優先になります。

HTMLファイル

<h2 style="color: red;">!important宣言</h2>

この場合は「style属性」で指定しているため、1000点の優先順位になります。
しかし、次のように「!important」宣言を記述すると、こちらの指定の方が優先されます。

See the Pen
YzXLxeV by shu (@shu0325)
on CodePen.

CSSセレクタについて

一般的に使用されるIDセレクタ、クラスセレクタ、子セレクタなどご説明していきます。

IDセレクタについて

IDセレクタは、要素のid属性のid名により要素を指定するセレクタです。
要素名に続けてID名を記述することで特定の要素に対象を絞ることもできます。

HTMLファイル

<!--ID名なし-->
<section>
	<h2>ID名なし</h2>
	<p>テキスト</p>
</section>

<!--ID名あり-->
<section id="area">
	<h2>ID名あり</h2>
	<p>テキスト</p>
</section>

See the Pen
PoqeEXe by shu (@shu0325)
on CodePen.

このように「#area」と指定した要素のみcolorのスタイルが適用されました。

クラスセレクタについて

クラスセレクタは、要素のclass属性のクラス名により要素を指定するセレクタです。
要素名に続けてクラス名を記述することで特定の要素に対象を絞ることもできます。

HTMLファイル

<h2 class="title">クラスセレクタ</h2>
<p class="text">クラス名により要素を指定するセレクタです。</p>
<p>クラス名を指定していません。</p>

See the Pen
BaNxYWb by shu (@shu0325)
on CodePen.

クラスセレクタを使ってclass名を指定しています。
「p.text」のように要素名を含めた場合は、class=”text”のp要素のみ文字色が青色になります。

要素型セレクタについて

要素型セレクタは、「h1」や「p」のような要素名でスタイルを適用するための要素を指定するセレクタです。
HTML文書内の全ての指定した要素が対象をなります。

HTMLファイル

<body>
<h2>要素型セレクタ</h2>
<p>スタイルを適用するための要素を指定するセレクタです。</p>
<p>HTML文書内の全ての指定した要素が対象をなります。</p>
</body>

See the Pen
eYNrVwE by shu (@shu0325)
on CodePen.

要素に直接指定しているため、全てに適用されてしまいます。
色、文字のサイズなど変更したい場合はid名やclass名を指定しましょう。

子孫セレクタについて

子孫セレクタは、指定の要素内の子・孫の要素を指定するセレクタです。
親と子孫の要素名を半角スペースで区切って記述します。

HTMLファイル

<article>
	<section>
		<h2>子孫セレクタについて</h2>
		<p>子・孫の要素を指定するセレクタです。</p>
		<h3>サブタイトルについて</h3>
	</section>
</article>

See the Pen
BaNxbwK by shu (@shu0325)
on CodePen.

要素型セレクタでh2にはフォントのスタイルをイタリックに、pには文字サイズを16pxを指定した後に
子孫セレクタでsection内のh2には文字色を赤に、pには文字色を青に指定しています。

子セレクタについて

子はセレクタは、指定した要素内の子の要素を指定するセレクタです。
親と子の要素名にを半角の>(大なり)で結合します。

HTMLファイル

<article>
	<section>
		<h2>子セレクタについて</h2>
		<p>指定した要素内の子の要素を指定するセレクタです。</p>
	</section>
	<p>親と子の要素名にを半角の>(大なり)で結合します。</p>
</article>

See the Pen
eYNrXKK by shu (@shu0325)
on CodePen.

子セレクタを使用し、article要素の子要素であるp要素の文字色を指定しています。
section要素内のp要素はarticle要素の孫要素になるため、指定されません。

隣接セレクタについて

隣接セレクタは、指定要素の直後の要素を指定するセレクタです。
各要素名を半角の+(プラス)で結合します。

HTMLファイル

<h2>隣接兄弟セレクタについて</h2>
<p>指定要素の直後の要素を指定するセレクタです。</p>
<p>各要素名を半角の+(プラス)で結合します。</p>

See the Pen
bGdMZOW by shu (@shu0325)
on CodePen.

h2要素の直後にある、1つ目のp要素のみ文字色を指定しています。

間接セレクタについて

間接セレクタは、指定要素以降の要素を指定するセレクタです。
各要素名を半角の~(チルダ)で結合します。

HTMLファイル

<h1>間接セレクタ</h1>
<p>指定要素以降の要素を指定するセレクタです。</p>

<h2>間接セレクタについて①</h2>
<p>各要素名を半角の~(チルダ)で結合します。</p>

<h2>間接セレクタについて②</h2>
<p>テキストが入ります。</p>

See the Pen
eYNrarB by shu (@shu0325)
on CodePen.

h2要素以降のp要素のみ、文字色を指定しています。
1つ目のp要素は、h1要素の下にあるため、対象にはなりません。

全称(ユニバーサル)セレクタについて

全称(ユニバーサル)セレクタは、*（アスタリスク）を記述する事で全ての要素に適応されます。

HTMLファイル

<article>
	<section>
		<h2>全称(ユニバーサル)セレクタについて</h2>
		<p>*（アスタリスク）を記述する事で全ての要素に適応されます。</p>
	</section>
</article>

See the Pen
NWqMmry by shu (@shu0325)
on CodePen.

全称(ユニバーサル)セレクタで全ての要素を指定し、文字色を変更しております。
body要素も含まれているので、他の要素も色が変更します。

1冊ですべて身につくHTML & CSSとWebデザイン入門講座

created by Rinker

【送料無料】初心者からちゃんとしたプロになるWebデザイン基礎入門 / 栗谷幸助【本】

created by Rinker

まとめ

今回はこれで以上です。

POINT

CSSは1番得点の高いセレクタが適用されます。
style属性より「!important」が優先されます。
セレクタについてしっかり勉強しておきましょう。
id要素は1ページ1つまでにしておきましょう。

よくCSSを記述したのに変わらない方は1度この記事を読んで
復習しておきましょう。

SHU

1991年生まれ九州の宮崎県育ち高校卒業後、愛知県で自動車関係のお仕事に5年間勤め、WEB業界に転職致しました。
趣味:サッカー観戦、ゲーム、映画、漫画基本インドアです！笑
つくる、しあわせをテーマとして主にWEBに関する様々な情報を発信しています。

オススメ記事

月別アーカイブ

月を選択

HOME

CONTACT

PAGE TOP

BLOG NEWS ブログ

【CSS】優先順位について学ぼう

SHU[シュウ]

CSSによるスタイルの適用には順位について

スタイル優先の得点計算について

スタイルによる記述順の優先について

スタイルによるプロパティの優先について

!important宣言について

CSSセレクタについて

IDセレクタについて

クラスセレクタについて

要素型セレクタについて

子孫セレクタについて

子セレクタについて

隣接セレクタについて

間接セレクタについて

全称(ユニバーサル)セレクタについて

まとめ

SHU

最新記事

関連記事

目次

最新記事

人気記事ランキング

オススメ記事

カテゴリー

月別アーカイブ