セレクタとは
CSSは『セレクタ』『プロパティ』『プロパティの値』の3つで構成されています。
h1 { color: black; }
セレクタ プロパティ プロパティの値
上記では『ｈ１』がセレクタ『color』がプロパティ『black』がプロパティの値となります。
この場合『ｈ１』の『文字色』を『黒色』にするという内容になります。
基本的なセレクタの種類
セレクタにはいくつもの種類がありますがまずは基本的なものを紹介します。
『＊』で指定する
*{ ～ }
(1)全ての要素に設定を適用する場合は『＊(アスタリスク)』を使用します。
* { color: black; }
☝上記例では『＊』にしているためすべての要素の文字色が黒になります。
(2)ある要素に絞り込んでその全てに設定を適用する場合は『タグ名』や『クラス名』の後に『半角スペース』を入れて『＊』を付けます。
p * { color: red; }
☝上記例だとp要素の文字色のみ全てに赤色が適用されることになる。
『タグ名』で指定する
タグ名 { ～ }
(1) 指定したタグのみ設定を適用する場合はHTMLの要素名(タグ)を使用します。
h1 { color: red; }
☝上記例では『h1』要素の全ての文字色に赤色の設定が適用されます。
『#id名』で指定する
#id名 { ～ }
(1)idを指定して設定を適用する場合は『#id名』をセレクタに指定します。
HTML
<li id=”sample”>サンプル</li>
#sample { color: red; }
☝上記例ではsampleのidにのみ文字色の赤色が適用されます。
※またidは1つの要素に対して指定できるのは1つのみとなっておりページ内で同じidを繰り返して使用することもできません。
『.class名』で指定する
.class名 { ～ }
(1)指定したクラスに設定を適用場合はクラス名の前に『.(ドット)』を付けることで指定することが出来ます。
<<HTML>>
<li class=”sample-class”>サンプル</li>
<<CSS>>
.sample-class ｛ color: red; ｝
☝上記例では.sample-classの文字色に赤色を適用しています。
少し応用した指定方法
セレクタを複数指定したりピンポイントで設定を適用するなどの応用技です。
絞り込む
〇 〇 〇 { ～ }
(1)指定したセレクタの中でさらに絞り込んで設定を適用する場合はクラス名やタグ名、ID名の後に『半角スペース』を入れて並べます。
<<HTML>>
<div class=”div-class”>
<p><span class=”p-class”>この文字だけに適用します。</span></p>
</div>
<<CSS>>
.div-class p p-class { color: red; }
複数指定する
〇, 〇, 〇 { ～ }
(1)複数の要素に同じ設定を適用する場合はセレクタ同士を『,(カンマ)』で区切って並べます。
<<HTML>>
<div class=”sample”>
<h1>表題</h1>
<h2>見出し</h2>
<p>内容</p>
</div>
<<CSS>>
h2,p { color: red; }
☝上記例では『h2』と『p』のタグの文字色に赤の設定を適用しています。
一階層下のセレクタを指定する
〇 ＞ 〇 { ～ }
(1)親要素の一階層下の子要素のみに設定を適用する場合はセレクタとセレクタの間に『＞』を入れることで適用することが出来ます。
＜＜ＨＴＭＬ＞＞
<div class=”c-sample”>
<h2>子要素</h2>
<div><h2>孫要素</h2></div>
</div>
＜＜ＣＳＳ＞＞
.c-sample > h2 { color: red; }
＜＜適用後＞＞
子要素
孫要素
(2)『＞』を複数使用しさらに下の階層の階層の指定もできます。
＜＜ＨＴＭＬ＞＞
<div class=”c-sample”>
<h2>子要素</h2>
<div><h2>孫要素</h2></div>
</div>
＜＜ＣＳＳ＞＞
.c-sample > h2 > h2 { color: red; }
＜＜適用後＞＞
子要素
孫要素
同じ階層の直後の要素を指定する
〇 ＋ 〇｛ ～ ｝
(1)指定した要素に隣接する要素に設定を適用する場合は指定したセレクタとセレクタの間に『+』を入れることで適用することが出来ます。
<<HTML>>
<p>pタグの内容１</p>
<div>divタグの内容</div>
<p>pタグの内容２</p>
<p>pタグの内容３</p>
<<CSS>>
div + p { color: red; }
<<適用後>>
pタグの内容１
divタグの内容
pタグの内容２
pタグの内容３
同じ階層の直後の全ての要素を指定する
〇 ～ 〇 ｛ ～ ｝
(1)指定した要素の直後の同じ階層にあるすべての要素に適用する場合は、セレクタの後に『～』を付けることで適用することが出来ます。
<<HTML>>
<p>pタグの内容１</p>
<div>指定するdivタグのセレクタ</div>
<p>同一階層にあるpの内容１</p>
<p>同一階層にあるpの内容２</p>
<div><p>別の階層にあるpの内容</p></div>
<p>同一階層にあるpの内容３</p>
<<CSS>>
div ~ p { color: red; }
<<適用後>>
pタグの内容１
指定するdivタグのセレクタ
同一階層にあるpの内容１
同一階層にあるpの内容２
別の階層にあるpの内容
同一階層にあるpの内容３
一番最初の要素を指定する
〇 : first-child { ～ }
(1)ある親要素の最初の子要素のみに適用する場合に使います。
<<HTML>>
<ul class=”sample”>
<li>1番目の子要素</li>
<li>2番目の子要素</li>
<li>3番目の子要素</li>
</ul>
<<CSS>>
.sample li:first-child{
color: red;
}
<<適用後>>
1番目の子要素
2番目の子要素
3番目の子要素
<<セレクタ一覧>>はこちら
