初心者の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属性を入れ装飾したものを一般的にインラインと言います。

HTML基本の要素、要素名、属性、属性値など

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

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

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

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

WordPressでフォント色を変更したとき

WordPressでフォント色を変更したとき

HTMLタグ内(インライン)でカラーを指定している状態

HTMLタグ内(インライン)でカラーを指定している状態

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

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

id50個指定しても、インラインには勝てなかった画像。タグとセレクタ50個。

IDセレクタ:100点

idセレクタ:大人の猫

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

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

Classセレクタ:10点

classセレクタ:青年のとぼけた猫。idより弱い

クラスセレクタは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点

優先順位がclassと同じ属性セレクタ:青年のとぼけた猫

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

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

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

擬似クラス:10点

優先順位10点。擬似クラス:青年のとぼけたの猫

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

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

擬似クラスの:first-childと:last-childの例

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

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

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

タイプセレクタ:1点

優先順位タイプセレクタ:赤ちゃん猫

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

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

擬似要素:1点

優先順位1点、擬似要素:哀愁漂う癒し系仔猫

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

  • :before
  • :after

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

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

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

Gush4の本文中のh2の:before、:after

Gush4の本文中のh2の:before、:after

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

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

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

Gush4の#mainの子孫セレクタ

ポイント

親テーマでは.article-innerは、コンテンツ部分の#mainの『.article-wrap』の『article』の『.article-inner』の見出し『h2』の前に付いてる擬似要素『:before』を指定して『.article-inner h2:before』で12点。

子テーマで『h2:before』と指定したら、点数が2点になるので、優先順位で負けちゃって上書きしても『CSSが反映されない』となっちゃうので、注意が必要ってワケです。

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

参考Selectors Level 3:Calculating a selector’s specificity|W3C

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

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

優先順位、最高峰!important:目を閉じたライオン

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

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

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

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

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

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

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

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

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

 さいごに

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

インライン:トラ

インラインは、強い!

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

idセレクタ:大人の猫

idセレクタは、インラインに負けるけど強い。100点。

classセレクタ:大人のとぼけた猫

classセレクタは10点

属性セレクタ:とぼけた猫がのぞいてる

属性セレクタは[属性]で表され、10点。

擬似クラス:鏡越しにのぞく大人の猫

擬似クラスは、10点。classと同じ得点。

優先順位タイプセレクタ:赤ちゃん猫

1番シンプルなタイプセレクタ。1点。

優先順位1点擬似要素:哀愁あふれる可愛い仔猫

擬似要素は、タイプセレクタと同じ1点。猫が可愛い♪

優先順位、最高峰!important:目を閉じたライオン

CSSが効かない時に頼もしい、!importantはとてつもなく凄いヤツ。

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

今回の優先順位で解決しない場合は、キャッシュの問題や、CSSの書く場所が間違ってる、文法がおかしくて反映しなくなったとも考えられます。

LINKCSSが効かない原因!反映させるため、ブログ初心者さんが確認する7つのこと

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

かうたっくでした^^

トップへ戻る