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


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

CSSにはたくさんのセレクタがありますが、最初は使い分けに迷ってしまうことが多いと思います。今回は、CSSの初心者向けに、それぞれのセレクタについて、使い方をくわしく解説しようと思います!

image

目次
  1. セレクタとは?
  2. CSSセレクタ8種類を詳しく解説
  3. 要素を指定
  4. クラスを指定
  5. idを指定
  6. 親子関係・配置関係で指定
  7. * (全てを指定)
  8. 属性を指定
  9. 擬似クラス(状態を指定)
  10. 擬似要素(部分を指定)
  11. セレクタ一覧
  12. Tips (ステップアップの小ワザ)
  13. 擬似クラスと擬似要素の書き方の違い
  14. CSS指定の優先度は、あと勝ち & id優先
  15. まとめ

セレクタとは?

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

セレクタ {
プロパティ:設定値 ;
}

サンプルコード

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

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

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

 

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

要素を指定

要素 {
プロパティ:設定値 ;
}
使いどころ

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

サンプルコード
span#sample2 {
    font-size: 20px;
    color:blue;
}
<span id="sample2">あいうえお</span> </br>
<span>あいうえお</span></br> 
あいうえお
結果

あいうえお
あいうえお
あいうえお

 

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

使いどころ

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

1.子孫に適用
親要素 子要素{
プロパティ:設定値 ;
}

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

image

サンプルコード
/* 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>
結果
これはdivの外です。
これは子要素ですね。
divの中のdivです。孫要素ですね。
.sample8の外です
.sample8の中です
子要素にも

孫要素にも適用されます

 

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>
結果
ここはdivの外です。
ここは子要素ですね。
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>隣接していないので適用されません
結果
ここはdivの外です。
ここは子要素ですね。
divの中のdivです。孫要素になりますね。
このリンクは隣接しています
このリンクは隣接していないので適用されません

 

* (全てを指定)

*{
プロパティ:設定値 ;
}
使いどころ

「*」(アスタリスク)は「全て」という意味です。 全体のフォントサイズを指定したり、背景を指定したりする際に使われます。 また、「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>
結果
pタグの子孫要素を赤文字にするサンプルです。

ここからpタグの中です
含まれる子要素にスタイルが適用されます。

孫階層のspanにのみスタイルを適用するサンプルです。

子階層のpタグ内です

子階層のpタグ内です
孫階層のspan内です


子階層のspan内です

孫階層のpタグ内です

 

属性を指定

要素[属性]{
プロパティ:設定値 ;
}
使いどころ

属性とは、「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>
結果
チェックリストのサンプルです
  • 起きる
  • 顔を洗う
  • 着替える
  • お弁当を作る
  • 朝ごはんを作る
  • ごはんを食べる
  • 歯を磨く
  •  

    セレクタ一覧

    基本的なセレクタ
    セレクタ 書き方例 適用範囲 使う場面
    要素型セレクター h1a div 指定した要素 指定の要素だけスタイルを変えたい時。タイトルだけ文字の大きさを変えるなどのときに使う。
    クラスセレクタ− .sample class="sample"で指定した箇所 指定箇所だけスタイルを変えたい時。ボックス、画像、文字などに使う。
    IDセレクター #idname id="idname"で指定した箇所(一箇所のみ) 指定箇所だけスタイルを変えたい時。ただし、同じidは一つのページで一箇所しか使用できない。同じものを複数登場させたくない、ページのブロック分けした部品などに使うと便利。
    すべて(全称セレクター) p *, *.sample 「*」は「全て」を表す。 p * は「p内の全ての要素に」* .sample は「全ての要素に含まれるsample」に適用。 まとめて一括で指定したい時。フォントを統一するなどに使う。
    属性セレクター a[href="test.html"] 指定した属性の時に適用 条件によってスタイルを変えたい時。リンクの内容によって色を変える、タイトルによってアイコンを表示するなどに使える。[*][$][~]を使用した、部分指定も可能。
    入れ子、関係性によるセレクタ
    セレクタ 書き方例 適用範囲 使う場面
    隣接セレクター .sample + a 隣接する指定した要素 タイトルの後は必ず一行大きくする、などルールを決めたい時。
    間接セレクター p ~ span 後に出てくる指定した要素 隣接していなくてもよいので、隣接セレクタでルールを設定できない時など。
    子セレクター div > p 子要素 一階層でのみルールを適用したい時。
    子孫セレクター div span.sample a 子孫要素 メニューの中、ブロックの中など一部分でのみルールを適用したい時。
    擬似クラス
    セレクタ 書き方例 適用範囲 使う場面
    :acrive .sample:acrive 選択された要素 テキストボックスに入力しようとした時に、注意書きを表示するなど二使用。
    :checked .sample:checked 選択されたチェックボックスなど チェックを入れた項目の色を変えるなどに使用。
    :hover .sample:hover マウスがのっている要素 マウスをのせた時に、色やデザインを変えるなどに使用。
    擬似要素
    セレクタ 書き方例 適用範囲 使う場面
    ::after ::after 要素の直後 ブロックの後ろに改行を入れたり、デザインで使用されることが多い。
    ::before .sample::before 要素の直前 文字の直前にアイコンを挿入するなどの時に使用する。
    ::first-letter .sample::first-letter 要素の最初の文字 最初の文字だけ大きくする、などのデザインに使用する。
    ::first-line .sample::first-line 要素の最初の行 一行目だけ大きさや色を変えるなどの文章のデザインに使用されることが多い。

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

     

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

    image

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

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

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

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

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

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

     

    一流デザイナーのスキルが身に付く

    無料カウンセリングはこちら

    まとめ

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

    参考: Mozilla Foundation

    image


    のりぴよ
    この記事を書いた人
    のりぴよ
    まずは7日間お試し!人気プログラミング講座を無料公開中
    オンライン・プログラミングレッスンNo.1のCodeCamp