ワードプレスでよく使うCSSセレクター34種を厳選！（うち必須12種）

2021年7月20日

ワードプレスにカスタムCSSを適用する一番のキーは、どのセレクターを使うか、です。
適切なセレクターを使わないと、CSSが思ったように適用されないからです。

そんなCSSのセレクターについてまとめてみました。

CSSのセレクターとは

CSSはHTML要素のデザインを指定するために次の書式となっています。

（セレクター）　｛（CSSプロパティ）：（適用する値）;｝

（セレクター）　　・・・『どこに』
（CSSプロパティ）・・・『何を』
（適用する値）　　・・・『どうする』

例えば、

div ｛color: blue;｝

というCSSであれば、

セレクター　　　：	div
CSSプロパティ　：	color
適用する値　　　：	blue

ですので、

『HTMLのdiv要素の中の文字色を青にする』

というCSSとなります。

このように、セレクターはHTMLのどの要素に対してCSSを適用するのか指定するわけですね。

それでは、セレクターについて順番に紹介していきましょう。

本記事の事例に使うHTMLと階層図

本記事では、次のHTMLを事例として、セレクターが指定する各要素を説明します。

<div id="contents">
        <h1 class="title">セレクターの確認</h1>
        <div class="item">
            <h2>セクションボックス</h2>
            <div class="section box1">ボックス１</div>
            <div class="section box2">ボックス２</div>
            <div class="section box3">ボックス３</div>
            <div class="section box4">ボックス４</div>
        </div>
    </div>

ただし、いちいちHTMLを読むのは邪魔くさいので次の階層図で説明していきます。

※セレクターの一覧表で特に必須のものは赤字表記します。
また、必須ではありませんが覚えておくと便利なセレクターを青字で表記します。

セレクター基本中の基本

まずは最も基本的なセレクターです。絶対必須知識です。

セレクター	概要	例
タグ名	タグ名で指定	div
#	id名で指定	#contents
.	クラス名で指定	.section
,で要素を区切る	複数の要素を指定	div,.section
要素を続ける	複数要素を合わせ持つ要素	div.section

以下順番に説明していきます。

タグ名

HTMLのタグ名をそのままセレクターとします。

（例）すべてのdiv要素を指定します。

div {～}

id名

頭に#をつけて#(id名)とします。

（例）id="contents"の要素を指定します。

#contents {～}

クラス名

頭に.をつけて.(クラス名)とします。

（例）class="section"の要素を指定します。

.section {～}

複数の要素を指定

,（コンマ）で複数の要素区切って指定します。

（例）class="box1″とclass="box3″の２つの要素を指定します。

.box1,.box3 {～}

複数の要素を続けて指定

,（コンマ）で区切らずに複数の要素を続けて記述すると、複数の要素を合わせ持つ要素を指定します。

子孫セレクター等、要素を絞り込むセレクター

すでに紹介済みの基本的なセレクターを軸にして、さらに要素を絞り込むのに使うセレクターです。

セレクター	概要	例
（半角スペース）	下の階層の全ての指定要素 （子孫セレクターと呼ぶ）	#contents div
>	一階層下の指定要素 （子セレクターと呼ぶ）	#contents>div
～	指定要素より下の同階層の要素 （兄弟セレクターと呼ぶ）	.box2~div
+	指定要素のすぐ下の同階層の要素 （隣接兄弟セレクターと呼ぶ）	.box2+div
*	全要素を指定 （子孫セレクターなどと合わせてよく使う）	body *

子孫セレクター

下の階層の指定要素を全て指定します。非常に頻繁に使用する重要セレクター。

（例）id="contents"の下階層にある全てのdiv要素を指定します。

#contents div {～}

子孫セレクターは、ワードプレスでは頻繁に使われます。

例えば、ワードプレスではページ毎に自動的にidがbodyタグにつけられていることを利用して、#id名 h1をセレクターにすれば、そのid名のページのみタイトル<h1>の装飾を変更できます。

子セレクター

一階層下の要素を指定します。子孫セレクターほど頻繁ではありませんが比較的よく使用します。

（例）id="contents"の一階層にあるdiv要素を指定します。

#contents>div {～}

兄弟セレクター

自分より下に記述された同階層の要素を指定します。あまり使うことはありません。

（例）class="box2″より下に記述された同階層にあるdiv要素を指定します。

.box2~div {～}

隣接兄弟セレクター

自分のすぐ下に記述された同階層の要素を１つだけ指定します。あまり使うことはありません。

（例）class="box2″のすぐ下に記述された同階層にあるdiv要素を指定します。

.box2+div {～}

全要素を指定

*をセレクターとすることで、全要素を指定することができます。よく使う便利なセレクターです。

body *・・・body要素の中にある全要素

というように、子孫セレクターと合わせて使用することが多いです。

〇番目の要素を指定するセレクター

セレクターに:（疑似クラス）をつけて何番目の要素かを特定するセレクターです。

セレクター	概要	例
E:nth-of-type(n)	同階層にあるE要素の中で ｎ番目の要素を指定	.section:nth-of-type(2)
E:nth-last-of-type(n)	同階層にあるE要素の中で 後ろからｎ番目の要素を指定	.section:nth-last-of-type(n)
E:first-of-type	:nth-of-type(1)と同じ	.section:first-of-type
E:last-of-type	:nth-last-of-type(1)と同じ	.section:last-of-type
E:nth-child(n)	同階層の全要素の中で n番目となるE要素を指定	.section:nth-children(2)
E:nth-last-child(n)	同階層の全要素の中で 後ろからn番目となるE要素を指定	.section:nth-last-children(2)
E:first-child	E:nth-children(1)と同じ	.section:first-children
E:last-child	E:nth-last-children(1)と同じ	.section:last-children
E:not(A)	A以外のE要素 （E要素を指定。そのうちA要素は除く）	div:not(.section)

n番目の要素を指定するセレクターのうち、E:nth-of-type(n)のみ赤字指定しましたが、そのほかのセレクターも使われることがあります。

どのセレクターで記述するかは、制作者の好みによるところも大きいからです。

E:nth-of-type(n)

同階層にあるE要素の中でｎ番目のE要素を指定します。

（例）class="section"の中で2番目の要素を指定します。

.section:nth-of-type(2) {～}

特に1番目を指定する、E:nth-of-type(1)のことをE:first-of-typeと書くことができます。

E:nth-last-of-type(n)

同階層にあるE要素の中で後ろからｎ番目のE要素を指定します。

（例）class="section"の中で後ろから2番目の要素を指定します。

.section:nth-last-of-type(2) {～}

特に後ろから1番目を指定する、E:nth-last-of-type(1)のことをE:last-of-typeと書くことができます。

E:nth-child(n)

同階層にある全要素の中でｎ番目のE要素を指定します。

（例）class="section"と同階層にある全要素の中で2番目のclass="section"を指定します。

.section:nth-child(2) {～}

nth-child(n)は、nth-of-type(n)と違って、対象の要素だけでなく全要素の中でのn番目を指定します。

上の例の場合、class="section"と同階層には<h2>があるので、1番目は<h2>、2番目が<div class="section box1″>となります。

また特に、E:nth-child(1)をE:first-childと書くことができます。

セレクターE:nth-child(n)の問題点

上の例でセレクターを.section:nth-child(1)とするとどうなるでしょうか？

1番目の要素は<h2>ですので、<h2>要素にCSSが適用されるかというと、そうではありません。

対象要素はあくまでclass="section"の要素ですから、1番目にclass="section"要素がないため、このCSSはどこにも適用されないことになります。

どこか違った要素に適用されてしまうと間違いを特定しやすいですが、どの要素にも適用されない場合、CSSのどこにミスがあったのかを特定しにくかったり、最悪間違いに気づかなかったりします。

このように、E:nth-child(n)は、対象以外の要素も含んでカウントしてしまうため、次のような問題があります。

すなわち、E:nth-child(n)はwebページのメンテナンス性が悪い、といえるでしょう。

なので、E:nth-of-type(n)を使う方がbetterなんですね。

それでも、<ul>の中の<li>タグや<table>の中の<tr>タグのように、同階層に他の要素を配置することが通常ない要素には、E:first-childやE:last-childが好んで使用されます（私もそうです）。

この２つはCSS3以前の比較的古くから使用されてきたセレクターなので使い慣れている人が多い、というのがその理由でしょう。

E:nth-last-child(n)

同階層にある全要素の中で後ろからｎ番目のE要素を指定します。

E:nth-child(n)を後ろから順番指定に変えたものと理解すれば、E:nth-last-of-type(n)との違いや使用上の注意事項も同様に考えればよいでしょう。

（例）class="section"と同階層にある全要素の中で後ろから2番目のclass="section"を指定します。

.section:nth-last-child(2) {～}

また特に、E:nth-last-child(1)をE:last-childと書くことができます。

E:nth-〇〇(n)の応用：ｎに数字以外を入力

E:nth-of-type(n)のnに数字以外を入力することでさまざまな指定方法があります。
もちろんnth-last-of-type(n)、nth-child(n)、nth-last-child(n)にも有効です。

ｎの内容	概要	例
odd	奇数番目の要素を指定	.section:nth-of-type(odd)
even	偶数番目の要素を指定	.section:nth-of-type(even)
2n+1	奇数番目の要素を指定	.section:nth-of-type(2n+1)
2n	偶数番目の要素を指定	.section:nth-of-type(2n)
3n	３の倍数で順番を指定	.section:nth-of-type(3n)
3n-1	３の倍数の順番の１つ前	.section:nth-of-type(3n-1)

例えばoddやevenは、表の行を交互にストライプ状の背景色をつけるのによく使われます。

/* 表の偶数行に着色 */
.custom-table tr:nth-child(odd) {
    background: #f8f5f2;
}

E:not(A)

E要素を指定し、そのうちAに相当するものを除きます。

（例）class="section"を指定。ただし、2番目のclass="section"を除く。

.section:not(.section:nth-of-type(2)) {～}

応用範囲の広いセレクターなので覚えておくと便利です。

例えばワードプレスならば、id=〇〇以外の投稿ページを指定、という場合に使えますね。

その他よく使用する疑似クラス

要素（セレクター）の後ろに:をつけて使用する疑似クラスには、〇番目を指定するセレクター以外にも多数存在します。

その中でも、知っておいた方がよいものをピックアップしました。

セレクター	概要	例
E:hover	E要素にマウスオーバーしたときに適用するCSS (<a>タグなどリンク先を指定する要素によく使われる)	a:hover
E:link	未訪問のリンクに適用するCSS	a:link
E:any-link	未訪問かどうかにかかわらずリンクに適用するCSS	a:any-link
E:visited	訪問済リンクに適用するCSS	a:visited
E:active	リンクをクリックしている最中に適用するCSS	a:active
E:target	リンク先として指定された要素に適用するCSS	a:target

E:hoverは必須です。
マウスオーバーしたときに要素に変化を与えることで『ここにリンクが設定されてますよ～』とユーザーに明示することができます。

これを”hoverをかける”という言い方をします。

そのほかは好みで使えばよいでしょう。

中でもE:targetは、リンクをクリックすると指定先の色が変化するなど、動きをさらっと実装するのに有効です。

このほかの疑似クラスについてはこちらのページが参考になります。

疑似要素をセレクターに使う

:は疑似クラスでしたが、::を疑似要素と呼びます。

疑似要素を使うことで、対象要素の特定部分にCSSを適用できます。

セレクター	概要	例
E::before (E:beforeも可)	E要素内の先頭に子要素を挿入、CSSを適用 （デフォルトではインライン要素として挿入）	div::before
E::after (E:afterも可)	E要素内の末尾に子要素を挿入、CSSを適用 （デフォルトではインライン要素として挿入）	div::after
E::first-letter (E:first-letterも可)	E要素内の先頭文字にCSSを適用	a:any-link
E::first-line (E:first-lineも可)	E要素内の先頭行にCSSを適用	a:visited

E::beforeとE::afterは非常によく使います。次の記事で解説しています。

属性セレクター

属性を指定するセレクターです。

セレクター	概要	例
E[foo]	foo属性を持ったE要素	div[class]
E[foo="abc"]	foo="abc"の属性を持ったE要素	div[class="section box1″]
E[foo*="abc"]	foo属性の値にabcを含むE要素	div[class*="section"]
E[foo^="abc"]	foo属性の値がabcで始まるE要素	div[class^="section"]
E:[foo$="abc"]	foo属性の値がabcで終わるE要素	div[class$="1″]

E[foo]で属性を持つ要素を指定

foo属性を持ったE要素を指定します。

（例）class属性を持つdiv要素を指定します。

div[class] {～}

他の例としては、href属性を指定することでリンク先のある画像にhoverをかける、という使い方があります。

img[href]:hover {～}

E[foo="abc"]で属性を持つ要素を指定

属性foo="abc"を持ったE要素を指定します。

（例）class＝”section box1”を持つdiv要素を指定します。

div[class="section box1″] {～}

E[foo="abc"]は便利なようで使いにくい

上の例で、div[class="section"]とするとどうなるでしょうか？

実はどの要素も指定されません。この例の場合、class="section box〇"と記述した要素はありますが、class="section"と記述した要素はないからです。

このように、E[foo="abc"]というセレクターの書き方は、使いにくいためあまり使用することはないでしょう。

代わりに次に紹介するE[foo*="abc"]がよく使われます。

E[foo*="abc"]で属性を持つ要素を指定

abcを値に含んだfoo属性を持つE要素を指定します。

（例）sectionを値の含むclass属性を持ったdiv要素を指定します。

div[class*="section"] {～}

上の例の場合、div[class*="sec"]でもdiv[class*="box"]でも同じ結果となります。一部でも指定の値を含んでいればよいからです。

セレクターの詳細度を理解する

詳細度とは

CSSのセレクターには詳細度というものが定義されており、次のルールがあります。

• HTML要素をより限定的に指定したセレクタほど詳細度が高くなる
• 詳細度の高いCSSほど優先的に採用される

基本セレクターの詳細度

基本セレクターを詳細度を低いものから並べると次のようになります。

タグ指定＜クラス指定＜id指定

タグよりもクラス、クラスよりもidの方がHTML内の要素をより限定しているため、この順に詳細度が高くなるわけです。

複数の要素を組み合わせたセレクターほど詳細度が高い

同じ要素を指定する場合でも、セレクターの選び方によって詳細度は異なります。

例えば次の要素を指定する場合を考えてみましょう。

いろいろなセレクターが考えられますが、詳細度の低いものから順に書くと次の通りです。

1. .box3
2. div.box3
3. .section.box3
4. div.section.box3
5. div.item>div.section.box3
6. div#contents div.section.box3

したがって、CSSの上書きをしてデザイン変更をするならば、元のCSSと同等以上の詳細度のセレクターを使わないと上書きされません。

例えば、元のCSSが次のように文字色を青字指定していた場合

div.box3 {color: blue;}

文字色を赤字に変更するCSSは、セレクターの詳細度の違いで次のようになります。

.box3 {color: red;}　・・・×（上書き失敗）

div.box3 {color: red;}　・・・〇（上書き成功）

まとめ

最後にもう一度、必須セレクターをピックアップしておきます。

セレクター	概要	例
タグ名	タグ名で指定	div
#	id名で指定	#contents
.	クラス名で指定	.section
,で要素を区切る	複数の要素を指定	div,.section
要素を続ける	複数要素を合わせ持つ要素	div.section
（半角スペース）	下の階層の全ての指定要素 （子孫セレクターと呼ぶ）	#contents div
>	一階層下の指定要素 （子セレクターと呼ぶ）	#contents>div
*	全要素を指定 （子孫セレクターなどと合わせてよく使う）	body *
E:nth-of-type(n)	同階層にあるE要素の中で ｎ番目の要素を指定	.section:nth-of-type(2)
E:hover	E要素にマウスオーバーしたときに適用するCSS (<a>タグなどリンク先を指定する要素によく使われる)	a:hover
E::before (E:beforeも可)	E要素内の先頭に子要素を挿入、CSSを適用 （デフォルトではインライン要素として挿入）	div::before
E::after (E:afterも可)	E要素内の末尾に子要素を挿入、CSSを適用 （デフォルトではインライン要素として挿入）	div::after