CSS入門者向け！セレクタの概要と一覧表

セレクタとは？

CSSで、設定したい色や大きさなどのスタイルを適用するところを指定するものです。

サンプルコード

/* CSSファイルに記載します */
.sample {
    font-size: 20px;
    color: red;
}

このように使います。このサンプルでは、「.sample」と書いてある部分がセレクタです。この「.sample」は、自分で好きな名前をつけていますが、HTMLのリンクを表す「a」タグや、段落を表す「p」タグ、見出しの「h」タグなど 指定の要素に対して設定を行うことができるなど、セレクタには意外とたくさんの使い方があります。

それでは次章で、代表的なセレクタ８種類について、それぞれの書き方を見ていきましょう！

CSSセレクタ８種類を詳しく解説

要素を指定

使いどころ

a, h1, div, body, table,span・・・など、 < > で囲まれているHTMLの各タグのことを要素と呼びます。ページ内での要素の表示を統一したい時には、要素指定が便利です。

サンプルコード

span {
    font-size: 20px;
    color:blue;
}

<span>あいうえお</span></br>
<span>あいうえお</span></br>
あいうえお

結果

クラスを指定

使いどころ

HTML側で、class="aaaaa"などと指定されているのをよく見かけますね。もっとも登場頻度の多いのがクラス指定です。クラス指定は、背景、文章、ボックス、画像、テーブルなど、何にでも使うことができます。

  好きな名前をつけて使うことができますが、名前の前に「.(ドット)」をつけることを忘れないでください。名前は「aaaa」、「bbbb」などとランダムにつけずに、「box1」「header_button」など用途に合わせた名前がつけられていることが多いです。

サンプルコード

.sample1 {
    font-size: 20px;
    color:blue;
}

 <span>あいうえお</span> </br>
 <span class="sample1">あいうえお</span></br> <!-- 2行目のみクラス属性を設定 -->
あいうえお

結果

idを指定

使いどころ

idは、ひとつのページに同じid名を複数指定できません。このため、例えば「ヘッダー」や「メニュー」など、場所と用途を決めておきたいものに対してなど、設計上一つしか存在ない部品に使うことが多いです。

サンプルコード

span#sample2 {
    font-size: 20px;
    color:blue;
}

<span id="sample2">あいうえお</span> </br>
<span>あいうえお</span></br> 
あいうえお

結果

親子関係・配置関係で指定

使いどころ

メニューの中だけにスタイルを適用したい時など、 ある範囲の中だけに適用したい時に便利なのが、 親子関係や配置の関係を使った指定です。 それぞれ見ていきましょう。

1.子孫に適用

半角スペースで区切ると、指定した子要素、孫要素に適用されます。 子要素、孫要素というのは、親のタグの中に囲まれているということです。

サンプルコード

/* cssファイルに記述します */
.div8 {
 border: 1px solid #999999;
 padding: 2px;
}
/* div に含まれるリンクには全て背景色を設定 */
div.sample8 a {
    background-color:#aaa; 
}
/* .sample8 に含まれるspanは赤文字にする */
.sample8 span {
    color:red;
}

<!-- HTMLファイルに記述します -->
これは<a href="#">divの外</a>です。
<div class="sample8 div8">
これは<a href="#">子要素</a>ですね。
    <div class="div8">
        divの中のdivです。<a href="#">孫要素</a>ですね。
    </div>
</div> <!-- ひとつめのサンプルここまで -->

</br>
sample8の<span>外です</span>
<div class="sample8 div8">
    sample8の<span>中です</span></br>
        <span>子要素にも<p><span>孫要素にも適用されます</span></p></span>
</div>

結果

2.子のみに適用

サンプルコード

/* cssファイルに記述します */
.div9 {
 border: 1px solid #999999;
 padding: 2px;
}
/* div に含まれる子要素リンクには背景色を設定 */
div.sample9 > a {
    background-color:#aaa; 
}

<!-- HTMLファイルに記述します -->
ここは<a href="#">divの外</a>です。
<div class="sample9 div9">
ここは<a href="#">子要素</a>ですね。
    <div class="div9">
        divの中のdivです。<a href="#">孫要素</a>になりますね。
    </div>
</div>

結果

3.隣に適用

サンプルコード

/* cssファイルに記述します */
.div10 {
    border: 1px solid #999999;
    padding: 2px;
}
/* div タグと隣接するリンクに背景色を設定 */
div.sample10 + a {
    background-color:#aaa; 
}

<!-- HTMLファイルに記述します -->
ここは<a href="#">divの外</a>です。
<div class="sample10 div10">
ここは<a href="#">子要素</a>ですね。
    <div class="div10">
        divの中のdivです。<a href="#">孫要素</a>になりますね。
    </div>
</div>
<a href="#">このリンクは</a>隣接しています</br>
<a href="#">このリンクは</a>隣接していないので適用されません

結果

* (全てを指定)

使いどころ

「＊」（アスタリスク)は「全て」という意味です。 全体のフォントサイズを指定したり、背景を指定したりする際に使われます。 また、「p ＊」のような書き方をすると、「pの要素の中に含まれる子孫要素の全て」という意味になります。

便利なセレクタですが、Webサイトの表示の際に、ブラウザがページ内の該当する全てのタグをチェックして表示処理を行うため、重たくなる（表示に時間がかかる）とされています。(参考)多用しないようにしましょう。

サンプルコード

/* p に含まれる要素にのみ 設定を適用する */
p * {
    font-size: 20px;
    color:red;
}

/* sample4 の孫要素の spanにのみ設定を適用する */
.sample4 * span {
    font-size: 20px;
    color:red;
}

<!-- 子孫要素にスタイルを適用する -->
pタグの子孫要素を赤文字にするサンプルです。
<p>ここからpタグの中です</br>
含まれる<b>子要素</b>にスタイルが<a href="#">適用</a>されます。
</p>

<!-- 孫要素にスタイルを適用する -->
<div class="sample4">
<p>子階層のpタグ内です</p> <!-- ここには適用されない -->
<p>子階層のpタグ内です</br>
<span>孫階層のspan内です</span><!-- sample3の孫要素span に適用される -->
</p>
</br>
<span>子階層のspan内です
<p>孫階層のpタグ内です</p><!-- ここには適用されない -->
</span>
</div>

結果

属性を指定

使いどころ

属性とは、「a」タグに含まれる「href」や「target」、「img」タグに含まれる「title」、スタイルの適用に使う「class」などのことを言います。

このセレクタを使うと、指定した属性を持っている要素にスタイルを設定できます。タイトル(title)のついているリンク(aタグ)のみ色を変えるなど、目立たせたい箇所や内容の区別をして色分けをしたい場合に便利です。

サンプルコード

/* title属性を持ったaタグにのみ適用 */
a[title] {
    font-size: 20px;
}

<a href="#">昨日の天気</a><br>
<a href="#" title="注目">今日の天気</a><br> <!-- title属性がついている箇所のみ適用 -->
<a href="#">明日の天気</a><br>
<a href="#">明後日の天気</a>

結果

擬似クラス(状態を指定)

使いどころ

指定の状態の時にのみスタイルを適用したい場合に使います。マウスが乗っているときを表す「:hover」選択された状態を表す「:active」などがあります。

サンプルコード

/* マウスオーバーの時に色を変える */
.sample5:hover {
    background:yellow;
}
/* フォーカスがあたると入力文字の色が変わる */
.sample6:focus {
    color:red;
}

マウスオーバーで色が変わるサンプルです。
<div>ひとつめ</div>
<div class="sample5">ふたつめ</div> <!-- マウスオーバーで色が変わる -->
<div>みっつめ</div>

入力ボックスをクリックしてください</br>
<input class="sample6" value="文字の色が変わります"> <!-- フォーカスで文字の色が変わる -->

結果

擬似要素(部分を指定)

使いどころ

要素の指定した一部分に対して、スタイルを適用したい場合に使うセレクタです。アイコンを追加で挿入したり、文字のサイズや色を変えたりなどの装飾によく使われます。文章の一行目を表す「::first-line」やブロックの直前を表す「::before」などがあります。

擬似クラスと似ていますが、「：（コロン）」の数が違いますね。(詳しくは後述の擬似クラスと擬似要素の書き方の違いも読んでみてください)

サンプルコード

li.sample7_li::before {
    content: '　'; /* チェックなしの場合は空白を入れる */
}
 li.checkmark::before {
    content: 'レ'; /* チェックを記載する */
    color: #009933;
    font-weight: bold;
    font-size: 20px;

チェックリストのサンプルです
<ulstyle="list-style-type:none">
<li class="checkmark">起きる</li>  <!-- チェックマークをつける -->
<li class="checkmark">顔を洗う</li>
<li class="checkmark">着替える</li>
<li class="sample7_li">お弁当を作る</li>
<li class="sample7_li">朝ごはんを作る</li>
<li class="sample7_li">ごはんを食べる</li>
<li class="sample7_li">歯を磨く</li>
</ul>

結果

セレクタ一覧

基本的なセレクタ

入れ子、関係性によるセレクタ

擬似クラス

擬似要素

擬似要素、擬似クラスは他にも沢山あります。もっと知りたくなったら、こちらのページも参考にしてください。

Tips (ステップアップの小ワザ)

擬似クラスと擬似要素の書き方の違い

擬似要素のセレクタには、CSS2までは擬似クラスと同じ「:(コロン）」を使用していました。CSS3から、擬似クラスとの区別のために「::(ダブルコロン）」がサポートされました。

現在主流なブラウザでは、「:」でも「::」でも、両方が認識されます。IE8など古いブラウザでは逆に「::」をサポートしていないため、対応したい場合は擬似要素にも「:」を使用しておく必要があります。

CSS指定の優先度は、あと勝ち & id優先

色々な指定を行った結果、指定が重なってしまい、何が適用されているのかわからなくなってしまうこともありますね。CSSのスタイルの基本は、CSSファイルの後ろに書かれたものが優先です。なので、先に「body」など全体に対する指定を記述し、細かな場所への指定を書き足していく、という方法が間違いが少なくてすみますよ。

ただし、クラス指定とid指定の両方が適用対象の場合、id指定が優先されますので注意してください。

まとめ

セレクタの区別がつくようになれば、CSSのファイルを解読するスピードが格段にあがりますよ。 もう、スタイルシートは怖くありませんね！

参考： Mozilla Foundation