2016/07/21

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

優先順位

CSSが反映しない。セレクタはあってるのに何で効かないの!?その原因の1つに、HTMLタグに囲まれた部分を装飾するときCSSで指定する『{』の前の『セレクタに親要素などを足す』など工夫すれば、反映される場合があるんです。

該当のセレクタの親要素(祖先要素)を指定すると、スタイルの強さ『優先順位』も強くなります。テーマ作成者が、より強いスタイルを指定してると、CSSは残念ながら優先順位の詳細度が弱くて反映されません。

はじめに要素や親要素、HTMLタグなど意味がわからない、不安な方はリンクの冒頭辺りを、サクっと読み飛ばしてからどうぞ。またキャッシュが原因の可能性もあるので、キャッシュの削除を試して、先を見てくださいね。

スポンサーリンク

CSSの優先順位とは

セレクタやHTMLタグの属性の種類の指定方法によってスタイルの強弱が変わり、強いものが『反映するルール』があります。逆に弱かったら、『CSSが反映されず効かない』ってことなるんですね。

なんでそんな面倒なことがあるかは、ブログの構造『HTML』をみたら、ザックリ理解できるのでは!って思ってます。ややこしいようで、実はシンプルだったり。

はじめに、こ難しそうなルールを知ればこっちのもの!初心者がハマるCSSのセレクタの種類による詳細度、CSSの書いてる場所による優先順位をざっくり見てルールを知って次、基本的な優先順位を一緒に理解していきましょう♪

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

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

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

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

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

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

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

インラインに書かれたCSS:1000点

インライン:トラ

インラインによる優先順位は、CSSの書く場所が違って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を上記のようにいれたら、一発でCSSが効いてくれますよ!

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

基本の基!後に書かれたスタイルが優先

親テーマのセレクタの記載方法と同じにすれば、後から上書きされたものの優先順位が強くなります。セレクタの詳細度の点数が同じ場合ですね。それが低かったら、CSSは反映しないので、気をつけてくださいね。

後に書いたものは、反映されるけど、優先順位の低いセレクタh2を指定すれば、反映しませんよね。点数が11点の後に1点のh2を入れても1個上の.article-inner h2の25pxが反映するのは、優先順位が高いから。

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

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

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

 さいごに

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

インライン:トラ

インラインは、強い!

idセレクタ:大人の猫

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

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

classセレクタは10点

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

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

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

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

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

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

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

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

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

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

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

初心者は必ずハマるものなので、ちょっとづつ理解していけたら良いですよね♪ここまで理解できたら、初心者の殻を脱皮できるかもしれませんね。沢山失敗しまくったからこそ、少しずつ解ることもあるのではないでしょうか…。

それでは♪かうたっくでした!

書いた人:かうたっく

何も知らない初心者ですが、WordPressでブログを始めました。 ブログの技術系でつまずいたエラーを経験したことからエラー関連を、初心者が初心者に向けて分かりやすい言葉で書いてます★子どもの喘息様気管支炎や、幼い子どもとの生活ページなどよく読まれる雑多ブログを運営中^^♪ご意見、感想、質問はお問い合せよりお待ちしています。

Twitterフォロー