入門4：【CSSのセレクタ基礎】をマスターしたい方へ【チートシート付】

CSSのセレクタを使えば、装飾の対象になる要素を自由に指定することができます。タグを直接指定するだけでなく、要素の並び方によって適用するスタイルを変えることもできるんです。

このページではCSSのセレクタの使い方を解説していきます。すぐにわかるチートシートを用意したので活用してみてください。セレクタを使いこなせるようになればスタイル指定の幅が広がります。

CSSセレクタって何？

CSSのセレクタは、HTML要素のどこにスタイルを適用するか選択するコマンドです。

CSSセレクタを使うことでHTMLの一部にだけスタイルを適用できます。

CSSセレクタの種類と使い方

CSSセレクタにはいくつかの種類があります。ここでは各セレクタの概要と使用例を紹介します。

要素名セレクタ

スタイル適用対象をHTMLタグの名前で指定します。対象となるHTMLタグすべてに同じスタイルが適用されます。

例1　p { font-size : 15px; }
例2　div { line-height : 120%; }

クラス名セレクタ

スタイル適用対象をクラスの名前で指定します。HTMLタグに設定した任意のクラス名が使えます。

クラス名セレクタを使うときはクラス名の前に半角ドットをつけます。例を見てみましょう。

HTMLタグ

<p>これは<span class="hutoi">サンプル</span>です。</p>
<p class="hutoi">これはサンプルです。</p>

CSS例1

.hutoi { font-weight:bold; }

CSS例2

span.hutoi { font-weight:bold; }

HTMLタグに対してCSS例1を適用するとクラス名「hutoi」の要素が太字で表示されます。1行目は部分的に太字なり、2行目はまるごと太字になります。

CSS例2では、クラス名と要素名を同時に指定しています。2つを同時に指定するときは、要素名、クラス名の順番で記述し、半角のドットで繋いでください。spanタグであり、hutoiのクラス名を持つ要素にスタイルが適用されます。

ID名セレクタ

スタイル適用対象をIDの名前で指定します。クラス名セレクタのクラス名がID名に変わっただけです。

HTMLタグ

<p>これは<span id="sample">サンプル</span>です。</p>

CSS

#sample { font-weight:bold; }

ID名だけで指定するほか、要素名とID名の組み合わせでも指定できます。

子孫セレクタ

子孫セレクタは、親子関係になっているHTMLタグの子要素に対してスタイルを適用します。具体例を紹介しましょう。

HTMLタグ

<div class="oya">
    <p>クラス名「oya」の子供タグ</p>
</div>

<p>子供タグではない</p>

CSS

.oya p { font-weight:bold; }

上記サンプルの場合、クラス名「oya」を親に持つpタグだけにスタイルが適用されます。

子孫セレクタは親子関係が多層になっていても有効です。以下のように多層の構造を考えてみましょう。

HTMLタグ

<div class="dai">
    <div class="chu">
        <div class="sho">
            <p>子供タグ</p>
        </div>
    </div>
</div>

CSS例1

.dai .chu .sho p { font-weight:bold;  }

CSS例2

.dai .sho p { font-weight:bold;  }

CSS例3

.dai p { font-weight:bold;  }

CSS例1では、dai・chu・shoを親に持つpタグのみが対象となります。

CSS例2では、dai・shoを親に持つpタグが対象です。CSSセレクタ側は必ずしも構造と同じ順番で記述する必要はなく、CSS例2のようにchuを省くこともできます。

CSS例3では、daiを親に持つpタグが対象です。

子セレクタ

子セレクタは、直属の子供要素にだけスタイルを適用します。記述するときは、親要素と子要素を半角の大なり記号で繋ぎます。親子関係を持つHTMLに子セレクタを使う具体例を紹介しましょう。

HTMLタグ

<div class="seibutu">
    <div class="kaeru">
        <p class="otama">おたまじゃくし</p>
    </div>
    <div class="niwatori">
        <p class="hiyoko">ひよこ</p>
    </div>
</div>

CSS例1

seibutu > kaeru { color : red; }

CSS例2

seibutu > otama { color : green; }

CSS例3

niwatori > p { color : blue; }

CSS例1ではseibutu直属の子供であるkaeruにスタイルが適用されます。

CSS例2ではスタイルが適用されません。otamaはseibutuの中に含まれますが、直属の子供ではないためです。上記のHTMLではotamaは孫になります。

CSS例3ではniwatoriの直属の子供であるpタグにだけスタイルが適用されます。

隣接セレクタ

隣接セレクタは、隣接している直後の要素に対してスタイルを適用します。半角の+記号により要素名を繋いで記述する形です。隣接セレクタの使用タイミングを具体例で示しめすので、参考にしてください。

HTMLタグ

<img src="#" alt="">
<p>こんにちは、はじめまして。</p>

CSS

img p { margin-top : 15px; }

上記のように画像タグの直後に文章が続く場合は、通常よりも多くの余白を取りたかったり、逆に通常よりも余白を少なくしたいときがあります。そんな時に活躍するのが隣接セレクタです。

属性セレクタ

属性セレクタは、特定の属性を持つ要素に対してスタイルを適用します。属性セレクタの記述例を紹介しましょう。

HTMLタグ

<a href="#" title="link" class="zokusei" target="_blank">リンクボタン</a>

CSS例1

a[title] { font-size : 12px; }

CSS例2

a[class="zokusei"] { font-size : 14px; }

CSS例3

a { color : blue; }
a[target="_blank"] { color : red; }

属性セレクタは大括弧の間に条件を記載します。CSS例1はtitle属性を持つaタグを対象とします。

CSS例2は、classの値が”zokusei“と一致する要素にスタイルを適用します。また、HTML要素によってはクラス名を半角スペースで区切って複数指定することもあるので覚えておいてください。そのようなときは、属性セレクタ条件式の=の前に半角チルダをつけて~=と記述します。~=なら複数クラスの中のどれか1つに一致すればスタイルが適用されます。

CSS例3は実用的な例です。targetがblankであるaタグ、すなわち外部リンクのみにスタイルを適用します。上記例では通常リンクを青色で、外部リンクを赤色で表示しています。

疑似クラス・疑似要素

最後に擬似クラスを解説します。擬似クラスは要素の状態を判断したり、HTMLとしては存在しない要素を生成するときに使います。

ここではわかりやすくするために、すべてaタグに対しての記述例を紹介します。

a:link{color:red;}

未訪問のリンクに対してスタイルを適用します。

a:visited{color:red;}

既に訪問済みのリンクに対してスタイルを適用します。

a:hover{color:red;}

マウスカーソルを乗せている間だけスタイルが適用されます。

a:active{color:red;}

クリックしている最中だけスタイルが適用されます。

a:focus{color:red;}

フォーカスしている間だけスタイルが適用されます。テキスト入力ボックスの入力中だけ色を変えたいときなどに使います。

a:lang(en){color:red}

HTMLタグにlangによる言語指定があるときに使用します。特定言語に対してスタイルを適用します。

.test a:first-child{color:red;}

クラス名「test」の要素内に登場する最初の子要素がaタグだった場合にスタイルを適用します。

.test a:first-of-type{color:red;}

クラス名「test」の要素内に登場する最初のaタグにスタイルを適用します。

a:last-child{color:red;}

クラス名「test」の要素内に登場する最後の子要素がaタグだった場合にスタイルを適用します。

.test a:last-of-type{color:red;}

クラス名「test」の要素内に登場する最後のaタグにスタイルを適用します。

.test a:nth-child(n){color:red;}

クラス名「test」の要素内に登場するn番目の子要素がaタグだった場合にスタイルを適用します。nには半角数字を入力します。数字の代わりにoddを記述すると奇数の要素、evenを記述すると偶数の要素が対象になります。

.test a:nth-of-type(n){color:red;}

クラス名「test」の要素内に登場するn番目のaタグにスタイルを適用します。nには半角数字を入力します。数字の代わりにoddを記述すると奇数の要素、evenを記述すると偶数の要素が対象になります。

p:first-line{color:red;}

指定要素の最初の1行目だけにスタイルを適用します。このセレクタはブロック要素にしか使えないためpタグを例にしています。pタグ内の文章をbrタグで改行している場合、1行目だけが赤い文字で表示されます。

p:first-letter{font-size:32px;}

指定要素の最初の1文字目にスタイルを適用します。このセレクタはブロック要素にしか使えないためpタグを例にしています。最初の文字だけを大きく表示するデザインに使えます。

a:before{content:”★”;}

指定要素の直前に新しい要素を追加します。この例であればaタグの先頭に★マークが表示されます。

a:after{content:”(リンク)”;}

指定要素の直後に新しい要素を追加します。この例であればaタグの末尾に(リンク)という文字が表示されます。

CSSセレクタのチートシート

リンクにデザインを適用する

HTMLタグ

<div><a href="#">もっと詳しく見る</a></div>
<div><a href="#" target="_blank">公式サイトをチェックする</a></div>

CSS

a { text-decoration:none; }//リンク文字の下線を消す
a:link { color: blue; }//未訪問のリンク色を青色
a:visited { color: gray; }//訪問済みのリンク色を灰色
a[target="_blank"]:after { content:"(別サイト)"; }//外部リンクの末尾に(別サイト)と表示
a:hover { text-decoration:underline; }//カーソルを乗せたときのみリンク下線を表示
a:active { color : orange; }//リンクのクリック時のみ色をオレンジ

テーブルにデザインを適用する

HTMLタグ

<table>
    <tr><th>商品1</th><th>商品2</th></tr>
    <tr><td>300円</td><td>400円</td></tr>
    <tr><td>5個</td><td>8個</td></tr>
</table>

CSS

table tr:nth-child(1){ background-color:gray; }//見出し行を灰色
table tr:nth-child(2){ color:red; }//価格の行を赤文字

入力フォームのセレクタ一覧

・テキストボックス→input[type="text"] {  }
・テキストエリア→textarea {  }
・チェックボックス→input[type="checkbox"] {  }
・チェックボックス選択時→input[type="checkbox"]:checked {  }
・ラジオボタン→input[type="radio"] {  }
・ラジオボタン選択時→input[type="radio"]:checked {  }
・セレクトボックス→select {  }
・送信ボタン→input[type="submit"] {  }

CSSセレクタの基礎まとめ

CSSセレクタをマスターすると、複雑なHTMLにもデザインを適用できるようになります。

また、効率よくセレクタを指定することでコーディング時間の短縮にも繋がります。ここで紹介したセレクタはよく使うものばかりなので、ぜひ覚えてみてください。