初心者のCSSが反映されない原因の1つ！優先順位の詳細度とは

セレクタはあってるのに、CSSが効かない・何で反映しないのか！？解決法の1つ、HTMLタグに囲まれた文字・画像を装飾するとき指定する『セレクタ』pなどを囲む親要素、#mainや.articleなど（祖先要素）を指定すると、スタイルの『優先順位』が強くなります。

#main h2などテーマ作成者が、強いスタイルを指定してるとき、h2で装飾しても優先順位の詳細度が弱くてCSSは反映されません。#main h2で装飾すれば、CSSは反映します。これがCSSの優先順位です。

では詳しく優先順位の詳細度を見て行きましょう＾＾

要素や親要素、HTMLタグなど意味がわからない場合リンク先でチェックしてください。またキャッシュが原因の可能性もあるので、キャッシュの削除を試してくださいね。

CSSの優先順位とは

HTMLタグの属性、HTMLタグ内の文字や画像などの装飾を指定するセレクタによってCSSの強弱が変わり、優先度が強いものが『反映するルール』があります。逆に弱いとCSSが反映されず効きません。

これが初心者がハマる、優先順位です。

ブログの骨組み『HTML』と、セレクタの種類ごとの得点をみて、CSSルールと優先順位を一緒に理解していきましょう♪

詳細度の計算から見たCSSの優先順位

簡単に言えば、CSSの種類によって強さを表す得点。セレクタの基本的な種類がわかれば、自然と身に付く！くらいシンプルなものが詳細度による優先順位になります。強い順で言えば、下記のとおり。

スタイル	得点
style属性が指定 （インライン）	1000点
id属性	1つ100点
id以外の属性と擬似クラス	1つ10点
擬似要素、タイプセレクタ	1つ1点
全称セレクタ『*』 全ての要素	0点

インライン以外が頑張って点数を稼いでも、インラインには負けてしまいます。そんなとき便利なのが、!important。

全く効いてくれないときコレを付けたら、ズバッ！！！っと効いて最強！って思うほど優先順位をソッチのけで反映してくれる、とてつもない猛者が!importantです！

• !important＝とてつもない猛者

詳細度は点数をつけて簡単な計算をするので、種類の違いを知るとズキュンっと届いてなるほどぉ＾＾となるので、セレクタの種類の違いなど点数ごとにザックリ説明しますね♪

優先順位が高いインラインに書かれたCSS：1000点

インラインは、CSSの書く場所が違ってHTMLタグ内にスタイルを書いたものです。HTMLタグ内にstyle属性を入れ装飾したものを一般的にインラインと言います。

インラインで指定された内容を、普段使うCSS『親テーマや子テーマの（外部）スタイルシート』で変更しようとしても、インラインは優先順位が強いから反映しないんですね。※インラインには『書いてない装飾』なら反映しますよ。

インラインってどんなものがあるか、たとえてみます。

• 『style属性』HTMLタグ内のspan要素のstyle属性

<span(要素名) style(属性名)=“color: #ff00ff;(属性値)“>テキスト</span>

ちなみにインラインは、idを50個指定して外部スタイルシートで装飾しようとしても優先順位に勝つことが出来ません。何故1000点になるのかは不明ですが、idは100点だから50個×100点で5000点。

それ以上にインラインは強いって事が言えます。※ChomeとFirefoxで実験した結果です。

IDセレクタ：100点

ブログの同じページ内に同じ名前を1回しか使えないタグがidになります。それを装飾するのがIDセレクタ。セレクタの付け方とHTMLタグの例は下記のとおり。
HTMLタグ内の属性『id(属性名)=”hoge(属性値)“』セレクタは『#hoge』と指定。

• <div id=”main”></div>のセレクタは、#main
• <div id=”footer”></div>のセレクタは、#footer

Classセレクタ：10点

クラスセレクタはidとちがって、同じページに何度も使えて初心者でも扱いやすいHTMLタグで、それを装飾するのがClassセレクタです。自分で作るときは『半角英文字』から始まるclass名を付けて使えますよ。タグとセレクタの付けかたは、下記。
HTMLタグ内『class(属性名)=”hoge(属性値)“』のセレクタは『.hoge』と指定。

• ピンクのboxを装飾したいから付けたタグ<div class=”pink_box”></div>のセレクタは、.pink_boxになる。

例えば#main .pink_box {}と指定した場合は、IDセレクタ#mainが100点＋ID以外の属性名がclassのクラスセレクタ.pink_boxが10点で合計110点になると、解りますね。

属性セレクタ：10点

セレクタに[属性]を付けたもの。セレクタが『hoge[geho]』のように[]で囲まれたものがあれば属性セレクタだと思えばOK！です♪
例）HTMLタグ<div(要素名) class(属性名)=”crayon-toolbar(属性値)“>など”crayon“から始まる値、全てのスタイルを指定する。

• セレクタは、div[class^=”crayon”]

divはタイプセレクタで1点＋属性セレクタ[class^=”crayon”]は10点で11点。

擬似クラス：10点

リンクの擬似クラス『a:hover』などリンクの訪問、未訪問、クリックした状態、マウスを置いた状態のスタイルなどがあります。

ほか、親要素内で『指定した子要素』のスタイル変更；『（要素名）hoge:first-child』などたくさん種類があるなか、例えを1つ。

• 親要素内、子要素の始めの（ボーダー）スタイルは:first-child
• 親要素内、子要素の最後の（ボーダー）スタイルは:last-child

親要素.top_rankingの子要素リストli:first-childのボーダーを消したい場合は、下記のようになります。

.top_ranking li:first-child {
	border: none;
}

.top_ranking li:first-childは、属性値がクラスの.top_rankingは10点、タイプセレクタのリストliを指定してるから1点、擬似クラスの:first-childは10点。合計21点。

タイプセレクタ：1点

要素名の指定する、1番シンプルなセレクタになります。例えば下記。

• body、h1、p、blockquoteなど
• クラスやIDなど付いてない要素名のみシンプルなもの

擬似要素：1点

指定したセレクタの前後に指定したコンテンツを入れたもの。例）h2:before

• :before
• :after

1行目、1文字目のスタイルを変更する時に使う要素。例）p:first-line

• :first-line
• :first-letterとか

:beforeや:afterは、色んな場面で見かけます。Gush4のh2タグには必ず:beforeが入ってて、コンテンツ前にWEBフォントを置いてる場面でh2:beforeとか、使ってます。カスタマイズしてh2のWebフォントを画像に変えたりもできますね♪

アフターは、コンテンツの後ろなんですけど、何故だか！？上記の位置が:afterに…。こんな例もあるってことで。

ちなみにGush4は、#sub（サイドバー）や、#footerにもh2があるので、.article-innerの中のh2:beforeと記して.article-inner h2:beforeとなります。

クラス.article-inner10点とセレクタh2が１点、擬似要素:beforeが1点の合計12点。

優先順位の100点以下のものは下記リンクが参考になります。また下の本は、下記リンクをより解りやすくされて初心者に解りやすいですよ。

参考Selectors Level 3：Calculating a selector’s specificity｜W3C

インライン1000点は下記の本を参考にしました♪HTMLタグとCSSのプロパティが沢山書いてあってカスタマイズする時に役立つし、解りやすいのでおススメ！

CSSが効かないとき、強制的にスタイルを反映させる『!important』

インラインに書かれた装飾は、強くて効いてくれないんです。そんな困ったときに使えるのが『!important』を召喚させる方法です。スタイルシートに書き加えたら、即CSSが反映してくれます！

/*ナンバー奇数*/
.crayon-num{
	background-color: #FFCBF7 !important;
	color: #E75AFF;
	border: 1px solid #FFCBF7 !important;
}

例えば上記はCrayonSyntax。背景と、ボーダーの指定がインラインにあるようで、CSSが反映しません。カラーの記載はなかったので、反映します。反映せず困ったときは、!importantを上記のようにいれたら、一発で効いてくれますよ！

困ったときの!important＝とてつもない猛者。活用してみてくださいね♪

優先順位が同じとき、後ろに書いたCSSが優先される

親テーマのCSSの記載方法が同じスタイルなら、子テーマのスタイル・また下に書いたスタイルが優先されます。セレクタの詳細度が同じ場合、（上に書かれたスタイルが）下に書いたCSSに上書きされるワケです。

.article-inner h2 {
	font-size: 22px;
}
/*後にかいたもの*/
.article-inner h2 {
	font-size: 25px; /*25pxで反映*/
}
/*後にかいたもの*/
h2 {
	font-size: 26px; /*優先順位が低いので26pxは反映しない*/
}

後に書いたものは、反映されるけど、優先順位の低いh2を指定したスタイルは反映しない（効かない）。一番下に1点のh2を入れても、11点の.article-inner h2の25pxが反映するのは、優先順位が高いからです。

26pxを反映させたければ、セレクタを合わせてあげても良さそうと解りますよね。

/*更に後にかいたもの*/
.article-inner h2 {
	font-size: 26px; /*26pxで反映！*/
}

最後に!importantを召喚させると、どうなるでしょうか。

h2 {
	font-size: 23px !important; /*23pxで反映！*/
}

これでサイドバー・フッター・本文、全てのh2タグに囲まれたフォントサイズが23pxになるんです。良くも悪くも使い方が重要なのもわかります。

 さいごに

強い順に並べてみますね。

インラインは1000点ですが、idセレクタ100点×50個：5000点分よりも強い！インラインは、別格で強い！

優先順位がわかると、何で反映しないか理解できて、CSSも楽しくなりますよね。

初心者は必ずハマるので、ちょっとづつ理解していくと良いですよね♪ここまで理解できたら、初心者のカラ脱皮！沢山失敗したからこそ、解ることがあるのではないでしょうか。

かうたっくでした＾＾