HOME >
CSS >
CSSのセレクターとは？【種類と使い方をわかりやすく解説】

CSSのセレクターとは？【種類と使い方をわかりやすく解説】

投稿日:2022年02月18日

このページにはGoogleアドセンス広告とアフィリエイト広告が含まれています。

CSSのセレクタ―とは？

CSSのセレクタ―とは、スタイルを適用させたいHTML要素の特定に使うものです。

セレクタ―を使ってスタイルを指定することで、同じスタイルを使いまわしたり一部分にだけ違うスタイルを適用させることが可能になります。

まずはセレクタ―を使わない場合から見ていきましょう。CSSはHTMLのタグの中に直接記述することもできます。

下記の例ではCSSのcolorプロパティを使って「ダミーテキスト1」を赤字にしていますが、この方法では「ダミーテキスト2」と「ダミーテキスト3」も赤字にしたい時に、毎回タグ内に同じ記述を行わなければなりません。

HTML

<span style="color:#d40000;">ダミーテキスト1</span>
<span>ダミーテキスト2</span>
<span>ダミーテキスト3</span>

color以外のプロパティも使うとなれば更に手間が掛かりますし、サイト内の様々なページで出てくるとなればかなりの負担になります。

そこで使用するのが「セレクタ―」です。

基本の記述の仕方

セレクターを使って要素を指定することで、該当する要素に対して同じスタイルを適用させることが可能になります。

セレクターとプロパティと値は次のように記述します。

CSS

セレクター名{
    プロパティ名:　値　;
}

先程の例であれば、spanタグをセレクターにしてcolorプロパティを決めれば、一度記述するだけで全てのspanの文字色を変更することができます。

HTML

<span>ダミーテキスト1</span>
<span>ダミーテキスト2</span>
<span>ダミーテキスト3</span>

CSS

span{
    color:#d40000;
}

セレクタ―には優先順位がある

同じ要素に対して複数のセレクターを使って異なるプロパティの値を指定している場合、セレクターの優先順位が高い方のスタイルが適用されるというルールがあります。

先程の例で、「ダミーテキスト3」だけは文字色を青にしたいというような時には、HTMLにクラスを記述して、そのクラスをセレクターにしてスタイルを記述します。

HTML

<span>ダミーテキスト1</span>
<span>ダミーテキスト2</span>
<span class="target">ダミーテキスト3</span>

CSS

span{
    color:#d40000;
}
.target{
    color:#0000ff;
}

プレビュー

ダミーテキスト1
ダミーテキスト2
ダミーテキスト3

このようにCSSではセレクターを使って、複数の要素にまとめてスタイルを適用させたり、特定の要素ごとにスタイルを細かく指定することで、ページやサイト全体のデザインを作り上げていきます。

HTMLの基本のおさらい

CSSを使うためには前提としてタグや要素といったHTMLの理解が欠かせません。具体的なセレクターの説明に入る前にHTMLについて振り返っておきましょう。

まず、ページのデザインを作り上げるCSSに対しページの構造を担っているのがHTMLです。HTMLに書かない事には何も始まりませんし、CSSが無ければHTMLを装飾することはできません。

HTMLタグ

HTMLタグを使ってテキストをマークアップすることでブラウザに読み取ってもらいます。

タイトルや見出しを指し示すhタグ、画像を表示させるimgタグやハイパーリンクを指定するaタグ、入力欄を作るinputタグなどがあります。

タグによるHTMLの一つ一つのかたまりを「要素」と呼びます。

親要素と子要素

タグには開始タグと終了タグでテキストを挟みこんで記述するものと終了タグが不要なタグが存在します。

開始タグと終了タグを使う場合は、タグの中に別のタグを記述することも可能です。それぞれの要素は親子関係で結ばれ、中に入っている要素を「子要素」それらを包んでいる要素を「親要素」と呼びます。

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

セレクタ―には様々な種類が存在します。基本はタグとクラスとIDを使うことになりますが、組み合わせによってHTMLへの記述を少なくすることができたり、セレクターの優先順位が変わったりします。

セレクターごとの特徴を理解して、状況に応じて使い分ける必要があります。

全タグを指定するセレクター

全てのタグに対して一括でスタイルを指定する場合は「*」（アスタリスク）を使います。

HTML

<div>ABCDEFG</div><span>HIJKLMN</span><br><span>OPQRSTU</span><div>VWXYZ</div>

CSS

*{
    color:#d40000;
}

プレビュー

ABCDEFG

HIJKLMN
OPQRSTU

VWXYZ

優先順位は低く、各タグに個別で指定したスタイルの方が優先して適用されます。

クラス

HTMLで要素にクラス名を付与し、そのクラス名を持つ要素のみにスタイルが適用されます。

クラス名は自由に作ることができますが、何に使うスタイルなのかがわかりやすい名前の方が後々の修正が行いやすいです。

クラスは一つの要素に対して複数付与することが可能
同じクラス名はサイト内で使いまわすことができる

後述するIDとの一番の違いは、同じクラス名を何度も使いまわすことができるという点です。

例えば見出しデザインのスタイルを一度作っておけば、同じクラス名を付けた要素に全て同じスタイルが適用されるので何回も使いたいデザインなどはクラス名をセレクタ―にして記述しておくと便利です。

ただし、優先順位はIDよりも低いので、IDをセレクタ―にして記述したスタイルに上書きされます。

HTML

<div>ダミーテキスト</div>
<span>ダミーテキスト</span><br>
<span class="sample">ダミーテキスト</span>
<div>ダミーテキスト</div>
<span class="sample">ダミーテキスト</span>

CSS

span{
    color:#333;
}
.sample{
    color:#d40000;
    font-weight:bold;
}

プレビュー

ダミーテキスト1

ダミーテキスト2
ダミーテキスト3

ダミーテキスト4

ダミーテキスト5

ID

HTMLで要素にID名を付与し、そのID名を持つ要素のみにスタイルが適用されます。

ID名はクラス名と同様に自由に作ることができますが、こちらも何に使うスタイルなのかがわかるように作りましょう。

IDは一つの要素に対してひとつしか付けることはできない
同じID名はサイト内で一度しか使えない

優先順位は最も高く、IDをセレクタ―にして記述したスタイルが優先的に適用されます。

HTML

<div>ダミーテキスト</div>
<span>ダミーテキスト</span><br>
<span id="sample" class="sample">ダミーテキスト</span>
<div>ダミーテキスト</div>
<span class="sample">ダミーテキスト</span>

CSS

span{
    color:#333;
}
.sample{
    color:#d40000;
    font-weight:bold;
}
#sample{
    color:#0000ff;
}

プレビュー

ダミーテキスト1

ダミーテキスト2
ダミーテキスト3

ダミーテキスト4

ダミーテキスト5

属性

属性とは、aタグの「href="###"」の部分やinputタグの「type="text"」などの部分のことを指します。

属性をセレクタ―として使うことで、限定的にスタイルを適用させることが可能です。

下記の例では、どちらもinputタグですが属性を記述しているので別々のスタイルが適用されます。

HTML

テキスト入力欄<input type="text" placeholder="テスト">
<input type="submit" value="ボタン">

CSS

input[type="text"]{
    background:#333;
    color:#fff;
}
input[type="submit"]{
    background:#d40000;
    color:#fff;
}

プレビュー

テキスト入力欄

疑似要素・疑似クラス

疑似要素とは、CSSのみで作り出す架空の要素のことです。HTMLには記述せずに装飾を施したい時に使用します。

疑似クラスとは、要素が特定の状態にある場合にのみスタイルを適用させたい時に使用します。

下記の例の場合、通常一文字だけにスタイルを適用させたい時はその文字をspanで囲んで指定しますが、最初の一文字目であれば「:first-letter」という疑似要素を使えばHTMLに手を加えずに装飾できます。また、疑似クラスである「:hover」を使うことで、マウスホバーした時だけのスタイルを指定することが可能です。

「:first-letter」について詳しくはこちら

CSSでテキストの一文字目だけ指定する方法

テキストの一文字目だけスタイルを変える方法には、疑似要素の「:first-letter」を使用する方法とspanを使って一文字目を囲んで指定する方法があります...【もっと読む】

HTML

<div id="sample_giji">カーソルを重ねてください。</div>

CSS

#sample_giji{
    max-width: 300px;
    color:#333;
    border:solid 3px #d9d9d9;
    border-radius: 5px;
    margin: 10px;
    padding:10px;
}
#sample_giji::first-letter{/*疑似要素*/
    color:#d40000;
    font-weight: bold;
}
#sample_giji:hover{/*疑似クラス*/
    background: #333;
    color:#fff;
}

プレビュー

カーソルを重ねてください。

親要素子要素

親要素の後ろに半角スペースを空けて子要素を記述する方法です。親子関係を使うことでHTMLで子要素にクラスやIDを書かずに指定ができます。

下記の例では、クラス「sample_inner」の中にある（子要素の）spanにだけスタイルを適用させています。もし仮にこの状況で親要素を使わなければ、対象のspanタグひとつひとつにクラスを記述しなくてはなりません。

HTML

<div id="sample_0" class="sample_selector">
    <span>ダミーテキスト1</span><br>
    <span>ダミーテキスト2</span><br>
    <div class="sample_inner">
        <span>ダミーテキスト3</span><br>
        <span>ダミーテキスト4</span><br>
    </div>
    <span>ダミーテキスト5</span><br>
</div>

CSS

.sample_selector span{
    color:#333;
    font-weight: bold;
}
.sample_inner span{/*子要素のspanだけ*/
    color:#d40000;
}

プレビュー

ダミーテキスト1
ダミーテキスト2

ダミーテキスト3
ダミーテキスト4

ダミーテキスト5

直下の子要素のみを指定する

親子関係にある要素同士を「>」を使って結ぶと、親要素の直下にある子要素のみ指定することができます。

下記の例の場合は「ダミーテキスト3」と「ダミーテキスト4」は直下の子要素には該当しない為スタイルが適用されません。

HTML

<div id="sample_1" class="sample_selector">
    <span>ダミーテキスト1</span><br>
    <span>ダミーテキスト2</span><br>
    <div class="sample_inner">
        <span>ダミーテキスト3</span><br>
        <span>ダミーテキスト4</span><br>
    </div>
    <span>ダミーテキスト5</span><br>
</div>

CSS

.sample_selector span{
    color:#333;
    font-weight: bold;
}
#sample_1 > span{/*直下にあるspanだけ*/
    color:#d40000;
}

プレビュー

ダミーテキスト1
ダミーテキスト2

ダミーテキスト3
ダミーテキスト4

ダミーテキスト5

直後の要素を指定する

「+」（プラス）を使うと直後に隣接した要素だけを指定することができます。

下記の例の場合は、ID「sample_2」の中にあるdivの後に隣接している「ダミーテキスト5」だけにスタイルが適用されます。

HTML

<div id="sample_2" class="sample_selector">
    <span>ダミーテキスト1</span><br>
    <span>ダミーテキスト2</span><br>
    <div class="sample_inner">
        <span>ダミーテキスト3</span><br>
        <span>ダミーテキスト4</span><br>
    </div>
    <span>ダミーテキスト5</span><br>
    <span>ダミーテキスト6</span><br>
</div>

CSS

.sample_selector span{
    color:#333;
    font-weight: bold;
}
#sample_2 div + span{/*直後に隣接するspanだけ*/
    color:#d40000;
}

プレビュー

ダミーテキスト1
ダミーテキスト2

ダミーテキスト3
ダミーテキスト4

ダミーテキスト5
ダミーテキスト6

以降の要素を指定する

「~」を使うと以降に続く要素を指定することができます。

「+」との違いは隣接していないものも対象になるという点です。

下記の例の場合は、隣接する「ダミーテキスト5」だけでなく、pタグを飛ばした「ダミーテキスト7」にもスタイルが適用されます。

HTML

<div id="sample_3" class="sample_selector">
    <span>ダミーテキスト1</span><br>
    <span>ダミーテキスト2</span><br>
    <div class="sample_inner">
        <span>ダミーテキスト3</span><br>
        <span>ダミーテキスト4</span><br>
    </div>
    <span>ダミーテキスト5</span><br>
    <p>ダミーテキスト6</p>
    <span>ダミーテキスト7</span><br>
</div>

CSS

.sample_selector span{
    color:#333;
    font-weight: bold;
}
#sample_3 div ~ span{/*直後に続くspanだけ*/
    color:#d40000;
}

プレビュー

ダミーテキスト1
ダミーテキスト2

ダミーテキスト3
ダミーテキスト4

ダミーテキスト5

ダミーテキスト6

ダミーテキスト7

複数の要素を指定する

複数の要素をまとめて同じスタイルを適用させたい時には「,」（カンマ）で区切って要素を記述します。

これまでに紹介した異なるセレクタ―同士でも「,」を使うことでいっぺんにスタイルを適用できます。

下記の例の場合は、ID「sample_4」の中のpタグとそれに隣接するspan、そしてクラス「sample_inner」の中にあるspanを指定したので「ダミーテキスト3」「ダミーテキスト4」「ダミーテキスト6」「ダミーテキスト7」にスタイルが適用されます。

HTML

<div id="sample_4" class="sample_selector">
    <span>ダミーテキスト1</span><br>
    <span>ダミーテキスト2</span><br>
    <div class="sample_inner">
        <span>ダミーテキスト3</span><br>
        <span>ダミーテキスト4</span><br>
    </div>
    <span>ダミーテキスト5</span><br>
    <p>ダミーテキスト6</p>
    <span>ダミーテキスト7</span><br>
</div>

CSS

.sample_selector span{
    color:#333;
    font-weight: bold;
}
#sample_4 p,#sample_4 p + span,.sample_inner span{/*複数の要素をまとめて指定*/
    color:#d40000;
}

プレビュー

ダミーテキスト1
ダミーテキスト2

ダミーテキスト3
ダミーテキスト4

ダミーテキスト5

ダミーテキスト6

ダミーテキスト7