【CSS】セレクターの書き方や詳細度をまとめます！

Web制作はHTMLで画面に表示される部分、CSSで表示部分のデザインを作っていきます。

CSSのセレクターはHTMLで書かれた要素に対し宣言をすると、見た目のスタイルを変えることができます。

 

この記事について

セレクターの書き方

 

たとえば、CSSでh1の文字色を赤に変えたい場合は以下のように書きます。

h1 {　　　　　　　/* スタイルを付けたい要素を指定する*/
color: red;     /* どんなスタイルを付けるか宣言する*/
}

 

このh1の部分を「セレクター」と呼びます。

{}の中で、どんなスタイルを付けるのかという宣言をします。

 

基本セレクターの種類と使い方

 

基本セレクターは５つの種類があります。

要素型セレクター

要素型セレクターは、要素名(h1やpなど)をそのまま書いて指定することで、その要素にスタイルを付けることができます。

 

【HTML側】

<h1>要素型セレクターについて</h1>

 

【CSS側】

h1 {
color: red;
}

 

【表示のされ方】

 

クラスセレクター

クラスセレクターは、class属性で指定した要素全てにスタイルを付けることができます。

書き方は、class属性で付けた要素の先頭に「.(ドット)」を付けます。

 

【HTML側】

<p class="dot">クラスセレクターでスタイル付けする場合、要素の先頭にドットを付ける。
</p>

 

【CSS側】

.dot {
color: blue;
}

 

【表示のされ方】

 

半角空白で区切ったクラス属性を上手く使う

 

クラス属性は応用的な使い方もできます。

【HTML側】

<h1 class="dot1">クラスセレクターについて</h1>
<p class="dot1 dot2">クラスセレクターは複数付けることができる。</p>

 

【CSS側】

.dot1 {
color: red;
}

.dot2 {
font-weight: normal;   /* 細字にする*/
}

 

【表示のされ方】

 

IDセレクター

IDセレクターは、IDが付いた要素を指定することでスタイルを付けることができます。

HTML側でスタイルを変えたい要素にID属性と値を書いて、CSS側でその要素の先頭に「#(バウンド記号)」を付ける。

 

【HTML側】

<h1 id="title">IDセレクターについて</h1>

 

【CSS側】

#title {
color: red;
}

 

【表示のされ方】

 

属性セレクター

属性セレクターは、HTML側で書いた属性を「[](大かっこ)」の中で指定すると、スタイルを付けることができます。

 

 

存在の有無

 

存在の有無は、コード内に存在している属性を [](大かっこ) の中に書くことでスタイルを付けることができます。

【HTML側】

<ul>
　<li>
　　<a href="https://www.google.com" target="_blank">Google</a>
　</li>
　<li>
　　<a href="https://https://www.yahoo.co.jp">Yahoo</a>
　</li>
</ul>

 

【CSS側】

[target] {
font-weight: bold;    /* 文字を太くする*/
}

 

【表示のされ方】

 

値と一致させる

属性セレクターで値を指定したい場合は、「＝」を使います。

【HTML】

<li>
　<a href="#top">TOPへ戻る</a>
</li>

 

【CSS】

[href="top"] {
font-weight: bold;
}

 

【表示のされ方】

 

前方一致させる

値の前方を指定したい場合は、=の前に「＾」記号を使います。

【HTML】

<li>
 <a href="https://www.google.com">Google</a>
</li>

 

【CSS】

[href^="https"] {
font-weight: bold;
}

 

【表示のされ方】

 

後方一致させる

値の後方を指定したい場合は、=の前に「$」記号を使います。

【HTML】

<li>
<a href="https://www.google.com">Google</a>
</li>

 

【CSS】

[href$="com"] {
font-weight: bold;
}

 

【表示のされ方】

 

部分一致させる

部分一致で指定させた場合は、＝の前に「＊」記号を使います。

【HTML】

<li>
 <a href="https://www.google.com">Google</a>
</li>

 

【CSS】

[href＊="google"] {
font-weight: bold;
}

 

【表示のされ方】

 

全称セレクター

全称セレクターは「＊(アスタリスク)」を使うことで、全ての要素にスタイルを付けることができます。

【HTML側】

<h1>全称セレクターについて</h1>
<p>全称セレクターは全ての要素に適用させることができる。</p>

 

【CSS側】

* {
 color: red; 
 font-size: 14px; 
}

 

【表示のされ方】

 

セレクタを組み合わせて指定する

 

ここまでは１つのセレクターでスタイルを変えましたが、複数のセレクターを組み合わせてスタイルを変えていくこともできます。

 

「,」で区切る【AとB】

セレクター間を「,(カンマ)」で区切れば、複数のセレクターを選択することができます。

【CSS】

.kugiri, p {
 color: red;
}

 

【HTML】

<main>
 <h1 class="guru kugiri">A,B</h1>
 <p>複数のセレクターをカンマで区切ると、同時にスタイルを変えられる。</p>
</main> 

<section>
 <h1=class="guru">A,B</h1>
 <p>ここの色は変わる。</p>
</section>

 

【表示のされ方】

 

セレクター同士をくっつける【Bが付与されたA】

セレクター間を何も挟まずにくっつけることで、両方のセレクターが存在しているもののみにスタイルを付けることができます。

【CSS】

h1.kutukeru {
 color: red;
}

 

【HTML】

<main>
 <h1 class="ab kutukeru">AB</h1>
 <p>両方のセレクターが存在しているもののスタイルを変える。</p>
</main> 

<section>
 <h1=class="ab">AB</h1>
 <p>ここの色は変わらない。</p>
</section>

 

【表示のされ方】

 

「>」で区切る【Aの直下の階層にあるB】

セレクター間を「>」で区切れば、ある要素のすぐ下にある要素にスタイルを付けることができます。

【CSS】

main > h1 {
 color: red;
}

 

【HTML】

<main>
 <h1 class="ab dainari">A > B</h1>
 <p>mainのすぐ下にあるh1のスタイルを変える。</p>
</main> 

<section>
 <h1=class="ab">A > B</h1>
 <p>ここの色は変わらない。</p>
</section>

 

【表示のされ方】

 

半角空白で区切る【Aの下の階層にあるB】

セレクター間を半角空白で区切れば、ある要素の下にある全ての要素にスタイルを付けることができます。

【CSS】

main h1 {
 color: red;
}

 

【HTML】

<main>
 <h1 class="ab kuuhaku">A B</h1>
 <p>mainの下にある全てのh1スタイルを変える。</p>
</main> 

<section>
 <h1=class="ab">A B</h1>
 <p>ここの色は変わらない。</p>
</section>

 

【表示のされ方】

 

「+」で区切る【A+B / Aの直後にあるB】

セレクター間を＋で区切れば、同じ階層にある要素の次の要素に対してスタイルを変えることができます。

たとえば、隣接した要素の間に境界線などを付ける場合に使います。

【CSS】

p + p {
 border-top: 1px solid red;    /* 上ボーダー*/
}

 

【HTML】

<main>
 <h1 class="ab purasu">A + B</h1>
 <p>同じ階層にある要素の次の要素にスタイルを付ける。</p>
</main> 

<section>
 <h1=class="ab">A + B</h1>
 <p>この上に境界線は引かれない。</p>
 <p>この上には境界線が引かれる。</p>
 <p>この上にも境界線が引かれる。</p>
</section>

 

【表示のされ方】

 

セレクターの優先順位(詳細度)

 

同じ宣言が複数あるときに、どの宣言したセレクターを優先させるか決めるのが詳細度です。

 

以下は詳細度表で、「idの数>クラスの数>要素の数」によって優先度が変わります。

【優先度】	【セレクター名】	【種類】
高	IDセレクター	id (#)
中	クラスセレクター	.クラス、属性クラス、疑似クラス
小	要素型セレクター	要素、疑似要素

 

たとえば、以下4つのセレクター宣言があるとします。

×１．
h1 {                           /* 要素=1*/
 color: orange;
}

×２．
h1 #syosai2.box {              /* id=1、クラス=1、要素=1*/
 color: blue;
}

〇３．
section > #syousai2.dot {      /* id=1、クラス=1、要素=1*/
 color: red;
}

×４．
section#syousai1 > h1 {        /* id=1、要素=2*/
 color: yellow
}

 

2と3の宣言が「id=1、クラス=1、要素=1」と同じ詳細度になっているのですが、後から書かれたものが優先されるため、3が優先されるため赤文字になります。

 

!important は、いちばん優先度が高い

 

!important は、詳細度よりも優先度が高い書き方です。

 

【HTML】

<p class="kurasu">!importantと書いたものが優先される。</p>

 

【CSS】

p {
  color : red !important;     /* p要素を優先させたいので、ここに書く*/
}

.kurasu {                     /* こちらは優先度が低くなるので宣言されない*/
  color : blue;
}

 

【表示のされ方】

 

疑似要素と疑似クラスについては下記の記事から

疑似要素・疑似クラスを使って特定部分や状態変化のスタイリングをしよう！ CSSはセレクターで要素を指定すると、その要素に対してスタイルを付けることができます。 【CSSの基本的なセレクター】 ...

 

セレクターを使って自分好みにデザインしよう！【まとめ】

ここまでCSSのセレクターについてまとめていきました。

【CSS基本セレクターの種類と書き方】

 

【属性セレクターの指定方法と書き方】

 

Web制作で見た目のデザインを作りこむには、CSSのセレクターを上手く使い宣言をする必要があります。