CSSセレクタ指定方法!HTMLタグのid・classなど優先順位を説明

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

※キャッシュの意味は、カスタマイズ時のキャッシュを削除!でご確認ください^^

正しいタグを見つけスタイルを指定すれば、反映されるので!importantを付けてもCSSが効かないときは、セレクタの付け方が間違ってるワケです。!importantを消すと反映しないのは、優先順位が問題になります。

回を重ね、知ってると便利なカスタマイズに使える、セレクタの種類、タイプセレクタ・全称セレクタ・classセレクタ・idセレクタ・子孫セレクタの使い方、優先順位カスタマイズ例を紹介します。その前にHTMLタグを見て指定する方法からチェックしてください♪

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

スポンサーリンク

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

HTMLの開始タグから、終了タグまでが要素

HTMLタグに囲まれた(要素)テキストを装飾したいとき、CSSにスタイルを書き込みデザインを変えますよね。装飾するときHTMLタグを指定して、セレクタを決めるワケです。

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

<div id=”main”>

  • <div class=”article-inner”> 開始タグ
    • <section>
      • <h2>テキスト</h2> ※div・sectionに囲まれたh2タグ
    • </section>
  • </div> 開始タグ

</div>

下記は、main内のh2タグとその親(先祖)要素divタグを抜粋しました。

HTML

<div class=”article-inner”>(どんな親要素→『.article-inner)

<h2>テキスト</h2>(.article-innerの子孫要素→『h2)

</div>

下記▼は、h2タグ内テキストのCSS:装飾例。

.article-inner(『クラスセレクタ』後述)の親・先祖要素に囲まれたh2(子孫要素)を指定した『子孫セレクタ』を使用例。

CSS

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

HTMLの指定(CSSのセレクタ)を間違っていれば、スタイルは反映されません。たとえば.article-inner h2と指定するところ、.article-in h2と指定するなど。

HTMLタグを見てCSSの指定方法を覚えると、カスタマイズの幅が増え自分好みのスタイルを付けるワケです。

ポイント
  • <div class=”hoge”> テキスト </div>
    開始タグ テキスト 終了タグ

HTMLの要素とは、『開始タグ』『終了タグ』『タグに囲まれたテキスト』で、開始タグを細かくあらわすと下記。

  • <div class=”hoge“>
    <要素名 属性名=”属性値“>
  • CSSではclass=”hoge”部分を.hogeと指定
    .hoge {  font-size: 22px; }など
  • ちなみに、HTMLに直接スタイルを指定する方法もある

HTML基本の要素。開始タグ:要素名、属性、属性値。テキスト。終了タグ

※画像はHTMLにスタイルを書き込んだもの。これは『インラインの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』。属性の値に
  • CSSのセレクタ
    • .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で『#』を使います。

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

上▲の『id=”footer”』の値『footer』がid名。

CSSでは『#footer』となり、下▼のように装飾します。

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

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

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

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

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

シンプルに優先順位が#footerが強いから、.main-footerが反映しない状態です。また下に書き込んだ#footer {background-color : blue;}の上書きによって、背景は青になります。

また親テーマの後に、子テーマが読み込まれるから、子テーマが上書きして反映するワケです。

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

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

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

  • 『親A 子B』
    子Bのみ反映する装飾
  • 『親A 孫C』
    孫Cのみを装飾

    • この場合『親A』の『子C』『子D』の『孫C』
      『親A』に囲まれた『孫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の間に半角スペースが入る

※Simplicity指定の.entry-content h2 {hoge: geho;}と書いても反映しない。

例2)親(サイドバー)のタグ『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;}

※Simplicityのサイドバーのタグ#sidebar h2 {hoge: geho;}と書いても反映しない。

  • 上の例は、親要素『id=”sub”』の、子孫『h2』を指定し装飾したいとき使える

どれもh2タグだけど、コンテンツ・サイドのタグを指定すると、該当のh2の装飾ができるパターンです。

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

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

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

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

  1. 親テーマで親A 子B(子孫セレクタ)を使って、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』を指定すれば反映する。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タグとインラインレベル・ブロックレベル要素、属性の付け方など

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

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

トップへ戻る