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

HTMLとCSSの基本

2017.01.02

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

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

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

セレクタの種類と、HTMLタグの見方
CSSの基本シリーズ紹介
さいごに

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

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

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

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

<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番下に追加）などもできますよ。

* {
	color: black;
}
p {
	color: gray; 
}

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

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

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

見出し『h』タグ
引用『blockquote』タグ
段落『p』
リンク『a』
画像『img』
強調『strong』など

1番シンプルなタグを指定するのがタイプセレクタで、単体で使うと優先順位が負けてしまう場合もあります。

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

h2 {
	color: #096e98;/*ブルーを指定*/
}

変更前の文字の色：黒

変更後：文字がブルーに

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

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

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

h2 {
	font-size: 25px;
}

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

.article-inner h2 {
	font-size: 22px;
	margin: 48px -5px 24px;
	padding: 0.4em 0.4em 0.4em 1.4em;
	position: relative;
	border-bottom: 2px solid #17a9e6;
}

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

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

親要素<div class="article-inner">
	<h2>テキスト</h2>
</div>

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

.article-inner h2 {
	font-size: 25px;
}

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

.article-inner h2 {
	font-size: 22px;
}
/*先に読み込まれ、次のコードに上書きされる*/

.article-inner h2 {
	font-size: 25px;/*上書きして反映！*/
}

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

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

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

h2 {
	color: #096e98;/*ブルーを指定*/
}

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

.article-inner h2 {
	font-size: 22px;
	margin: 48px -5px 24px;
	padding: 0.4em 0.4em 0.4em 1.4em;
	position: relative;
	border-bottom: 2px solid #17a9e6;
}

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

.article-inner h2 {
	color: #23282D;/*黒っぽい色*/
}
/*上の方がセレクタが強い*/

h2 {
	color: #096e98;/*ブルーを指定*/
}
/*優先順位が低いh2のカラーは、反映しない*/

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

class属性のついた、タグに囲まれたテキストや画像などの要素を装飾を、クラスセレクタになります。

優先順位
- クラス＞タイプセレクタ＞全称セレクタ

クラスセレクタとは

HTMLタグに『class属性名=”hoge属性値“』とclass属性が付いている時

属性が『class』
属性：クラス名は『hoge』。属性の値に
CSSのセレクタ
- .hoge『クラスhoge』

クラス属性が付いたものを装飾するとき、クラスセレクタを使用できる。

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

テキスト

</div>

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

クラス属性は、半角ドット『.』クラス名は、『blue_shadow_box』
このクラスセレクタは『.blue_shadow_box』

.blue_shadow_box {

background-color: #E4EFFF; /*背景色ブルー系*/
/*色々略*/

}

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

テキスト

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

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

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

HTMLタグの指定したid属性で指定したいときは、CSSで『#』を使います。

HTMLタグのid属性はルールがあり、1ページに同じID名を使ってはダメ（後述）
クラスセレクタより優先順位が高い。インラインより低い（インラインはhead内に書かれたCSSでWordPressなら、外観よりテーマのカスタマイズを選んだ時など）。

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

<div id="footer">
</div>

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

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

#footer {
	background-color : pink;
}

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

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

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

#footer {
	background-color : pink;
}
/*フッターはピンク*/

.main-footer {
	background-color : red;
}
/*クラスの方がidより優先順位が低い、スタイルは効かない*/
/*背景は赤にならず、ピンク*/

#footer {
	background-color : blue;
}
/*1～3行目#footerの背景色を上書き*/
/*背景が青*/

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

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