プログラミング

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

【CSS】セレクタの書き方や応用的な使い方まとめ

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

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

 

この記事について

・セレクターの基本的な種類と書き方がわかる

・セレクターの応用的な使い方がわかる

・セレクターの優先度についてわかる

よると
よると
CSSのセレクターと詳細度についてまとめます。

セレクターの書き方

 

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

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

 

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

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

よると
よると
上記の書き方は要素型セレクターといい、他にもセレクターの種類はいくつかあります。

CSSのプロパティ一覧はこちらから確認することができます。

 

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

 

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

要素型セレクター

要素型セレクターについて

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

 

例題

h1の文字色を赤にする。

【HTML側】

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

 

【CSS側】

h1 {
color: red;
}

 

【表示のされ方】

要素型セレクターについて

 

クラスセレクター

クラスセレクターについて

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

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

 

例題

クラス属性のあるp要素を青文字にする。

【HTML側】

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

 

【CSS側】

.dot {
color: blue;
}

 

【表示のされ方】

クラスセレクターでスタイル付けする場合、要素の先頭にドットを付ける。

 

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

 

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

例題

h1とpの文字色を赤にして、pの文字を細字にする。

【HTML側】

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

 

【CSS側】

.dot1 {
color: red;
}

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

 

【表示のされ方】

クラスセレクターについて
クラスセレクターは複数付けることができる。

 

IDセレクター

IDセレクターについて

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

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

 

例題

ID属性で付けた値を使って、h1の文字を赤にする。

【HTML側】

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

 

【CSS側】

#title {
color: red;
}

 

【表示のされ方】

IDセレクターについて

・IDセレクターで指定した値は、そのページ内で同じ値は使えない

・IDセレクターで指定する値の先頭は、アルファベットから始めなければならない。

 

属性セレクター

属性セレクターについて

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

 

属性セレクターを使って部分的に指定する

 

存在の有無

 

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

属性セレクターについて
例題

target 属性が付いたリンク文字を太くする。

【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;    /* 文字を太くする*/
}

 

【表示のされ方】

Google
Yahoo

 

値と一致させる

属性セレクターで値を指定する

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

例題

topに戻るへのリンク文字を太くする。

【HTML】

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

 

【CSS】

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

 

【表示のされ方】

TOPへ戻る

 

前方一致させる

属性セレクターで前方一致させる

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

例題

httpsから始まるリンク文字を太くする。

【HTML】

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

 

【CSS】

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

 

【表示のされ方】

Google

 

後方一致させる

属性セレクターで後方一致させる

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

例題

comで終わるリンク文字を太くする。

【HTML】

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

 

【CSS】

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

 

【表示のされ方】

Google

 

部分一致させる

属性セレクターで部分一致させる

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

例題

googleが存在しているもののスタイルを変える。

【HTML】

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

 

【CSS】

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

 

【表示のされ方】

Google

 

全称セレクター

全称セレクターについて

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

例題

文字の大きさを変える。

【HTML側】

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

 

【CSS側】

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

 

【表示のされ方】

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

 

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

 

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

セレクターの組み合わせ

 

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

セレクターをカンマで区切る

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

例題

kugiriクラスとpのスタイルを変える。

【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>

 

【表示のされ方】

A,B

複数のセレクターをカンマで区切ると、同時にスタイルを変えられる。

A,B

ここの色は変わる

 

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

セレクター同士をくっつける

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

例題

両方のセレクター(h1とkutukeruクラス)があるもののスタイルを変える。

【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>

 

【表示のされ方】

AB

両方のセレクターが存在しているもののスタイルを変える。

AB

ここの色は変わらない。

・要素型セレクター同士(h1h2など)は、くっつけることができないので注意。

 

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

セレクター同士を>(大なり記号)で区切る

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

例題

main要素のすぐ下にあるh1のスタイルを変える。

【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

mainのすぐ下にあるh1のスタイルを変える。

A > B

ここの色は変わらない。

 

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

セレクターを半角空白で区切る

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

例題

main要素の下にある、全てのh1スタイルを変える。

【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

mainの下にある全てのh1スタイルを変える。

A B

ここの色は変わらない。

 

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

セレクター同士を+記号で区切る

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

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

例題

1個目の直後のpの上に境界線を引いて、次のpの上にも境界線を引く。

【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>

 

【表示のされ方】

A + B

同じ階層にある要素の次の要素にスタイルを付ける。

A + B

この上に境界線は引かれない。


この上には境界線が引かれる。


この上にも境界線が引かれる。

 

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

 

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

 

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

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

 

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

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

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

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

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


 

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

 

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

 

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

 

例題

p要素に !important を付けてスタイルを優先させる。

【HTML】

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

 

【CSS】

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

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

 

【表示のされ方】

!importantと書いたものが優先される。

・!important を複数書いた場合、後から書いたほうが優先される。

・!important を複数使うと、どれが優先されるのか分かりにくくなるのでなるべく使わない

 

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

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

 

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

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

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

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

・要素型セレクター  「要素名 {}」

・クラスセレクター  「.クラス名 {}」

・IDセレクター       「#id属性の値 {}」

・属性セレクター     「[ 属性名 ] {}」

・全称セレクター     「* {}」

 

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

・存在の有無:[属性名] {}

・値と一致 :[属性名=”値”] {}

・前方一致:[属性名^=””] {}

・後方一致:[属性名$=””] {}

・部分一致:[属性名*=””] {}

 

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

よると
よると
人によってデザインは様々あると思うので、自分好みなWebサイトを作っていきましょう!