ワードプレスの始め方
~稼ぐためのしくみづくりまでを
徹底解説!!

好評セミナー”ワードプレス100分でブログサイトを制作”を書籍化しました

amazonでたった1コインで手に入れる

ワードプレスの始め方
~稼げるしくみづくりまで
書籍で徹底解説!

詳細はこちら

amazonでたった1コインで手に入れる

ブログ型サイトでも
本格的ホームページ型でも
起業に副業に・・・

あなたに専門知識がなくても
目的のWebサイトを制作できるよう
ウェブチルがお手伝いします

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

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

そんな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">ボックス1</div>
            <div class="section box2">ボックス2</div>
            <div class="section box3">ボックス3</div>
            <div class="section box4">ボックス4</div>
        </div>
    </div>

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

HTML階層図

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

セレクター基本中の基本

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

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

タグとはHTMLを記述する形式のことで、例えば<div>をdivタグといいます。

idやクラスとは、タグを区別するための目印としてつける属性で、

idならば<div id="〇〇">
クラスならば<div class="△△">

のように記述します。〇〇や△△は任意の半角英数および-や_といった記号を使います。

同じid名は1ページにつき1度だけ、クラス名は何度でも使用可能です。

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

タグ名

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

(例)すべてのdiv要素を指定します。

div {~}

divを指定
黄色がセレクターで指定された要素

id名

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

(例)id="contents"の要素を指定します。

#contents {~}

id名で指定
黄色がセレクターで指定された要素

クラス名

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

(例)class="section"の要素を指定します。

.section {~}

クラス名で指定
黄色がセレクターで指定された要素

複数の要素を指定

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

(例)class="box1″class="box3″の2つの要素を指定します。

.box1,.box3 {~}

複数の要素を指定
黄色がセレクターで指定された要素

複数の要素を続けて指定

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

(例)

div#contents・・・id="contents"のdivタグ要素を指定
div.section・・・・class="section"のdivタグ要素を指定
.section.box1・・・class="section box1″の要素を指定

※今回の事例では、#contentsもdiv#contentsも同じ要素、div.sectionも.sectionも同じ要素を指定することになりますが、複数の要素を合わせ持つことで詳細度が上がります。

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

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

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

子孫セレクターや子セレクターは、あくまで要素を絞り込みたいときに使用しましょう。もし使用可能ならば、タグ名・id名・クラス名のセレクターを使用すべきです。そのほうが、webページの表示スピードがあがります。

とはいえ、特に子孫セレクターは頻繁に使用される重要セレクターです。

子孫セレクター

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

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

#contents div {~}

子孫セレクターで指定
黄色がセレクターで指定された要素

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

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

すでに紹介したように、半角を入れずに要素を続けて記述すると、全くセレクターの意味が違います。

div#contents・・・・id="contents"のdiv要素を指定
div #contents・・・・divの下階層にあるid="contents"の要素を指定

子セレクター

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

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

#contents>div {~}

子セレクターで指定
黄色がセレクターで指定された要素

兄弟セレクター

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

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

.box2~div {~}

兄弟セレクターで指定
黄色がセレクターで指定された要素

隣接兄弟セレクター

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

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

.box2+div {~}

隣接兄弟セレクターで指定
黄色がセレクターで指定された要素

全要素を指定

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

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

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

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

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

セレクター概要
E:nth-of-type(n)同階層にあるE要素の中で
n番目の要素を指定
.section:nth-of-type(2)
E:nth-last-of-type(n)同階層にあるE要素の中で
後ろからn番目の要素を指定
.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-childE:nth-children(1)と同じ.section:first-children
E:last-childE: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要素の中でn番目のE要素を指定します。

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

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

n番目の要素指定
黄色がセレクターで指定された要素

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

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

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

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

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

後ろからn番目の要素を指定
黄色がセレクターで指定された要素

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

E:nth-child(n)

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

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

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

全要素の中でn番目を指定
黄色がセレクターで指定された要素

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)は、対象以外の要素も含んでカウントしてしまうため、次のような問題があります。

同一階層に別のHTML要素を追加記述すると、CSS対象の要素が変更されてしまう。
そして最悪の場合、どこにもCSSが適用されない。

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

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

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

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

E:nth-last-child(n)

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

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

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

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

全要素の中で後ろからn番目を指定
黄色がセレクターで指定された要素

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

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

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

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)
3n3の倍数で順番を指定.section:nth-of-type(3n)
3n-13の倍数の順番の1つ前.section:nth-of-type(3n-1)

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

/* 表の偶数行に着色 */
.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)) {~}

not()で指定
黄色がセレクターで指定された要素

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

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

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

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

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

セレクター概要
E:hoverE要素にマウスオーバーしたときに適用するCSS
(<a>タグなどリンク先を指定する要素によく使われる)
a:hover
E:link未訪問のリンクに適用するCSSa:link
E:any-link未訪問かどうかにかかわらずリンクに適用するCSSa:any-link
E:visited訪問済リンクに適用するCSSa:visited
E:activeリンクをクリックしている最中に適用するCSSa:active
E:targetリンク先として指定された要素に適用するCSSa: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::beforeE::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内の要素をより限定しているため、この順に詳細度が高くなるわけです。

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

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

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

後ろからn番目の要素を指定
黄色がセレクターで指定された要素

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

  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要素の中で
n番目の要素を指定
.section:nth-of-type(2)
E:hoverE要素にマウスオーバーしたときに適用するCSS
(<a>タグなどリンク先を指定する要素によく使われる)
a:hover
E::before
(E:beforeも可)
E要素内の先頭に子要素を挿入、CSSを適用
(デフォルトではインライン要素として挿入)
div::before
E::after
(E:afterも可)
E要素内の末尾に子要素を挿入、CSSを適用
(デフォルトではインライン要素として挿入)
div::after

ワードプレスの始め方
~稼ぐためのしくみづくりまでを
徹底解説!!

好評セミナー”ワードプレス100分でブログサイトを制作”を書籍化しました

amazonでたった1コインで手に入れる