CSSが反映されない!セレクタの指定方法、class・id・子孫セレクタから見る優先順位

シェアする

初心者のカスタマイズでCSSが反映しない、書いた内容が効かない、でもキャッシュが原因ではない。なんで反映しないのか!?それはHTMLのタグの指定方法、セレクタの選び方が理解できてないのが原因、またはCSSが優先順位かもしれません。

正しいタグを見つけて指定して装飾すれば、反映されます。カスタマイズに使えるセレクタがおススメなので回を重ねて、知ってると便利なセレクタの種類を紹介します。

タイプセレクタ、全称セレクタ、classセレクタ、idセレクタ、子孫セレクタ、の使い方と、優先順位カスタマイズ例を見て使ってください!

キャッシュについては参考まで、下記をどうぞ^^

LINK便利過ぎて神!カスタマイズ時のキャッシュを削除!ワンクリで手間省けるChrome拡張機能「Incognito This!」

タイプ・全称・class・Idセレクタ

スポンサーリンク

セレクタの種類と、HTMLタグの見方

HTMLの要素は、タグも含めて要素

HTMLタグに囲まれた要素を装飾したいとき、スタイルをCSSに書き込んでデザインを変えていきますよね。HTMLタグをみてどのタグで囲まれた要素を装飾するとき、タグを指定してセレクタを決めないと始まりません。

装飾したい場所や内容によっては、その親要素まで指定しないと反映しないことがシバシバあるんですね。どんどん例えるので、『HTMLタグと説明書き』や『ルビ』など見て、『セレクタを指定する感覚』をツカんでいきましょう♪

<div class=”article-inner”>

<section>

<h2>テキスト</h2>

</section>

</div>

これは、テーマのメインコンテンツ内のh2タグとその親(先祖)要素のタグを抜粋しました。

<div class=”article-inner”>(どんな親要素→『.article-inner)
<h2>テキスト</h2>(.article-innerの子孫要素→『h2)
</div>

下記▼は、そのh2タグ内テキストの装飾例。後述する『クラスセレクタ』.article-innerの親要素内にある(子孫要素)h2を指定した『子孫セレクタ』を使用例。

.article-inner h2 {  font-size: 22px; }(親要素.article-innerの子要素h2をCSSで装飾)
ポイント

HTML基本の要素、要素名、属性、属性値など
HTMLの要素は、開始タグと終了タグ、タグに囲まれたテキストのことで、開始タグを細かくあらわすと、<要素名 属性名=”属性値”>となる。

CSSでは属性と属性値を指定することが多い。※画像は優先順位のページ『インラインのHTMLの要素で説明』してます。

はじめのうちHTMLの指定(CSSのセレクタ)自体の間違いから始まって、自分の思った通りのカスタマイズをブログに反映させたいから、同じテーマの装飾をコピペするところから始めますよね。

HTMLの要素を見てセレクタが少しずつ理解したころで、セレクタの指定方法を覚えるとカスタマイズの幅が増えてくるので、ブログが自分好みのものになってきます。今回はシンプルなセレクタを紹介するので、ごゆるり見てください♪

優先順位が一番よわい『*』全称(ユニバーサル)セレクタ

全称セレクタ

タグ内に書かれてる全ての要素が対象になる全称セレクタは、半角アスタリスク『*』を使います。優先順位は1番低いのが特徴で、例えば他のセレクタを指定して上書きれば、それが反映する感じですね。

具体的に言えば、全ての要素のフォントの色を黒に指定。段落のみフォント色をグレーに上書き(style.cssの1番下に追加)などもできますよ。

※全てのフォントの色は黒。全称セレクタ*は、タイプセレクタpより優先順位が低いから、style.cssに追加上書きしたp段落はグレーとなる。

※他のセレクタと合わせて使うことも可能になります。body *p(body内全てのp)

シンプルなタイプセレクタは次に、優先順位が低い

タイプセレクタ

見出し『h』タグ、引用『blockquote』タグ、段落『p』リンク『a』タグ、画像『img』タグ、強調『strong』タグなど。1番シンプルなタグを指定するのがタイプセレクタです。これら単体で使うと優先順位が負けてしまう場合があります。

  • 全てのh2タグのフォント色『color』を変えたい時

Gush4のh2

変更前の文字の色:黒

変更後

変更後:文字がブルーに

これは、反映した例です。

タイプセレクタで、優先順位が低いから、CSSが反映しない例

CSSが反映しない例として、親テーマにあるコードやCSSの上の方に優先順位が強いコードが書かれている場合があります。

と書いても反映しないのは、優先順位が低いからです。優先順位が高いコードと言うのは下記。

既にfont-size: 22px;と指定があります。これはfont-sizeと言うフォントサイズを指定するプロパティが既に22px存在してます。セレクタの指定方法が問題!

.article-inner h2のほうが優先順位が強いからh2の指定では弱いから反映されません。優先順位を強くするために、h2タグを囲んでいる親要素である.article-innerを前につけると強くなって優先順位が同じになります。

それが優先順位の詳細度です。反映させるには、下記のように、優先順位を高めたセレクタを指定します。

.article-innerにで囲まれたh2と指定し、元の記載の下や子テーマのCSSの下などに書くことで、CSSが反映してフォントサイズが25pxになります。CSSは基本的に親テーマ・子テーマと順番に上から読み込まれます。

後に書いたスタイルが表示される仕組みだから反映するワケです。これは後述の子孫セレクタと言うセレクタの指定方法になります^^

優先順位の低いものが反映されたのはなぜ?

.article-inner h2より優先順位の低いh2と指定したのに、反映されたのはどうしてでしょうか。

これは、CSSの.article-inner h2にフォントの色を指定するcolorという装飾の指定がどこにもなかったから反映したんです。

colorの指定はありませんよね。もし下記のように指定があれば反映しません。

classは『.』にクラスセレクタの優先順位

classセレクタ

class属性のついた、タグに囲まれたテキストや画像などの要素を装飾を、クラスセレクタになります。優先順位は、クラス > タイプセレクタ > 全称セレクタです。

クラスセレクタとは
HTMLタグに『class属性名=”hoge属性値“』とclass属性が付いている時

  • 属性名が『class』
  • クラス名は『hoge』
  • セレクタは.hoge『クラスhoge』と言う。
  • クラス属性が付いたものを装飾するときクラスセレクタを使用

idセレクタ(後述)より優先順位が低く、全称セレクタ*やタイプセレクタより優先順位は強い。

<div class(class属性)=”blue_shadow_box(クラス名)>
テキスト
</div>

上記のタグならdivにclass属性が付いて、クラス名は『blue_shadow_box』

  • クラス属性は、半角ドット『.』クラス名は、『blue_shadow_box』
  • このクラスセレクタは『.blue_shadow_box
.blue_shadow_box {
background-color: #E4EFFF;
/*色々略*/
}

テキストを装飾すれば、下記のように反映します。

テキスト

クラス属性のclass名の付け方などは下記を参考にどうぞ。

LINKHTMLの要素!属性、属性値とは!?class名を複数設定するHTMLの書き方付

『#』IDセレクタの優先順位は、クラスセレクタより強い

idセレクタ

HTMLタグの指定したid属性の要素を装飾したいときは、CSSで『#』を使います。idにはルールがあるので、軽く覚えておいてくださいね。

HTMLの要素<div id=”footer”>の背景をピンクに変えたいとき。

上▲のid属性『id=”footer”』の属性値『footer』がid名となり、セレクタは『#footer』となり下▼のように装飾します。

指定したidフッターは背景色をピンクに装飾しているので、下記▼黄緑枠内のようにピンクに変更されます。

div id="footer"の要素をPINKに変更

div id=”footer”の背景をPINKに変更

HTMLタグが下記のように、クラスとIDが指定されてる時反映するCSSと反映しないCSSを見てみましょう!

<div id=”footer” class=”main-footer”>
</div>

シンプルに優先順位が#footerが強いから、.main-footerが反映しない状態です。

子孫セレクタ(子孫コンビネータ)で、CSSが反映しない理由

要素の親子、子孫関係を擬人化

子孫セレクタは親の要素の『A』の中の子要素『B』や、孫要素『C』をセレクタの間に半角スペースを入れ、指定し装飾します。例えば

  • 親子要素『親A 子B』子要素Bの装飾
  • 子孫要素『親A 孫C』子要素全てのCを装飾
    • この場合『親A』の子B、子Dの中の『孫C』の装飾になる
      子孫要素の説明
    • 親Aではない『親F』要素の中の『孫C』要素は関係ないから反映しない。

親要素、子要素、子孫要素って何!?ってことならリンク先を参考にしてください。親要素の子孫要素を指定する方法を、いくつか見たら理解できるので見てみましょう♪

  • 親(本文内)『divクラスarticle-inner』タグの中にある、子孫要素h2タグ

<div class=”article-inner”>

<section>

<h2>テキスト</h2>

</section>

</div>

<div class=”article-inner”> //親要素
<h2></h2> //.article-innerの子孫要素
</div>

Gush4の本文中の親要素『クラス属性article-inner』内にあるのh2全ての装飾って意味でCSSのセレクタは

.article-inner h2 {hoge: geho;}

※親要素.article-innerと、子要素h2の間に半角スペースが入る

  • 親(サイドバー)のタグ『div id sub』の中にあるh2タグ

<div id=”sub”>

<aside>

<h2>テキスト</h2>

</aside>

</div>

<div id=”sub”> //親要素
<h2>テキスト</h2> //#subの子孫要素
</div>

Gush4のサイドバーid subの子孫要素にあたる、全てのh2タグを装飾したい時のセレクタ

#sub h2 {hoge: geho;}

上の例でしたら親要素『id属性sub』の、子要素や孫要素の子孫要素『h2』を指定し装飾したいとき使えます。初心者でも覚えやすいセレクタですね。どれもh2タグだけど、親や祖先のタグを指定すると、該当のh2の装飾ができるパターンです。

優先順位は、#sub h2 > #sub > クラス > タイプセレクタ > 全称セレクタ

LINK初心者のCSSが反映されない理由!優先順位の詳細度

子孫セレクタと、タイプセレクタの優先順位

CSSが効かないっと、初心者がハマるのが優先順位です。使ってる親テーマで子孫セレクタを使ってるのに気付かず、優先順位の低いタイプセレクタを使ってる場合。またそもそもセレクタが違ってる場合を見てみましょう。

  1. 親テーマで子孫セレクタを使用して、style.cssに上書きするとき、優先順位が低いh2(タイプセレクタ)を指定しても効かない。

下記▼。Gush2の本文中のh2タグと親要素

<div id=”article_body”>(親要素→『#article_body』)
<h2>テキスト</h2>(#article_bodyの子要素→『h2』)
</div>

下記▼。Gush2の親テーマ。h2のセレクタの指定例。

#article_body h2 {  font-size: 22px; }(親要素#article_bodyの子要素h2で装飾してる)
  • h2 { font-size: 23px; }と上書きしても反映されない。

優先順位が#article_body h2のほうが強いから。タイプセレクタである『h2』の優先度が低くて反映されないのが原因ですねぇ。

  • 反映させるには、同じセレクタを選択すればOK!

#article_body h2 { font-size: 23px; }としたら、後に書いたスタイルが上書きされ23pxになるってワケです。

  1. Gush4のタグとCSSの指定例.article-inner h2
<div class=”article-inner”>(親要素→『.article-inner』)
<h2>テキスト</h2>(.article-innerの子要素→『h2』)
</div>

上記がHTMLタグ例。下記がそのh2のセレクタの例。

.article-inner h2 {  font-size: 22px; }(親要素.article-innerの子要素h2で装飾してる)

テーマによって親要素のセレクタが違うので注意。

  • Gush2の見出しのセレクタ#article_body h2 { font-size: 23px; }を指定しても反映しない。
  • Gush4には、#article_bodyが存在しないから反映しない。(セレクタの間違いの例)
  • Gush4では『.article-innerの子孫要素h2』を指定すれば反映する。下記はGush4のHTML。

    <div class=”article-inner“>

    <section>

    <h2>テキスト</h2>

    </section>

    </div>

この見出しで重要なこと1、2のまとめが下記

  1. 親テーマと同じ親要素のセレクタを付けたら上書き処理され反映!
  2. 親テーマが.article-inner h2としてる場合、h2と指定しても前述のほうが優先順位が強いので負けて反映しない。
  3. テーマに無い、HTMLタグをセレクタで指定しても反映されない(される訳がない…)。

初心者さんは気をつけてください。反映しないとき、注意しましょう♪CSSの基本シリーズは下記です。

LINKHTMLの入門!HTMLタグとCSSのセレクタの関係&要素

LINK初心者が要素の検証でカスタマイズできる方法!HTMLとCSS入門編

LINKセレクタの指定★親子孫要素を知れば装飾が反映!ブログ構造HTMLを見て理解

LINK初心者のCSSが反映されない理由!優先順位の詳細度

今ココ!class・id・子孫セレクタなど!HTMLタグの装飾、セレクタの指定方法

LINK子セレクタの説明!初心者向け、子孫セレクタとの違い

LINK隣接セレクタ!セレクタの指定方法と使用例。初心者向け

LINKレスポンシブ対応!メディアクエリの書き方と書く場所。あなたのテーマはスマホファースト、PCファースト!?

その他、色々^^;

 さいごに

CSSで装飾をしはじめた頃なら、セレクタの指定方法が難しく感じますよね。何で反映しないの!?って原因の1つでもあります。初歩的なところを紹介したのは、はじめにコレだけ解れば、他の基本的なセレクタをマスターしやすいからです。

1番知って欲しいのは、『優先順位の強さ』と『HTMLの親要素・子要素・子孫要素関連』『タグだの要素だのを知る』のがCSSが反映する近道です。

LINKHTMLタグとインラインレベル・ブロックレベル要素、属性の付け方など

他にも突然反映しなくなった原因はありますが、初心者向け子セレクタの説明と子孫セレクタとの違いを知っていれば、反映させたい場所を特定できます。細かい場所を指定して装飾したくなった頃に参考にしてくださいね。

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

トップへ戻る