セレクタの種類
CSSを使って装飾するときに重要なのがどこに対して装飾をするのかを指定する「セレクタ」
色々種類はありますが、よく使うものから覚えていけば大丈夫
少しづつ慣れていきましょう
よく使うセレクタ
まず覚えておきたいセレクタを纏めました。
ここにまとめてあるものを使えればWebサイト制作は問題ありません。
タイプセレクタ
タイプセレクタは「body」や「p」などの要素（タグ）を直接セレクタに指定した形
タイプセレクタで指定された要素は、ページ内にあるすべての要素に対してcssが適用される。
|
1 2 3 4 5 6 7 8 9 |
body{ color:black; } h1{ color:red; } p{ color:blue; } |
classセレクタ
classセレクタはclass名を利用したセレクタ
class名は開始タグの中にclass属性の値として設定する。
セレクタとして利用する場合はclass名の前に「.」ドットをつけてセレクタに設定する。
|
1 |
<p class="test">クラスセレクタのテスト</p> |
|
1 2 3 |
.test{ color:green; } |
idセレクタ
idセレクタはid名を利用したセレクタ
id名は開始タグの中にid属性の値として設定する。
セレクタとして利用する場合はid名の前に「#」をつけてセレクタに設定する.
|
1 |
<h1 id="logo">idセレクタ</h1> |
|
1 2 3 |
#logo{ color:green; } |
子孫セレクタ
セレクタを半角スペースで区切ると、 ある要素の下の階層にある子孫要素を対象にスタイルを適用することができます。
例えばpタグの中にあるaタグに対して文字の色を変えるとき
|
1 2 3 |
<p> Webサイトへの<a>リンク</a> </p> |
|
1 2 3 |
p a{ color:black; } |
複数セレクタ
セレクタをカンマ（ , ）で区切ると、複数のセレクタにまとめて同じスタイルを適用することができます。
例えばh3タグとpタグに対して文字の色を変えるとき
|
1 2 |
<h3>今日のお天気</h3> <p>今日は晴れです。</p> |
|
1 2 3 |
h3,p{ color:gray; } |
少し複雑な指定方法
直下セレクタ
子孫セレクタによく似ていますが対象の要素は直接の子要素になります
複雑なコードの中でセレクタを指定する場合とても役立ちます。
子孫セレクタのように書いて間に「>」記号を挟んで記述します
例えば「A > B」と書いたらAの直接の子要素のBという形の指定になります
|
1 2 3 4 5 6 7 8 |
<div class="box"> <p>ダミーテキスト①</p> <!--ここは変化する--> <div> <p>ダミーテキスト②</p> <!--変化しない--> </div> </div> |
|
1 2 3 4 |
/*ダミーテキスト①だけ変えたいなら*/ .box>p{ color:red; } |
隣接セレクタ
指定した要素と同一階層で、直後に出てくる要素のみを指定することができる指定方法です。
こちらも複雑なコードの中でピンポイントで要素を指定するときに役に立ちます。
子孫セレクタのように書いて間に「+」記号を挟んで記述します
例えば「A + B」と書いたらAの直後にあるBという形の指定になります
|
1 2 3 4 5 |
<p>ダミーテキスト①</p><!--変化しない--> <p>ダミーテキスト②</p><!--変化しない--> <p class="text1">ダミーテキスト③</p><!--変化しない--> <p>ダミーテキスト④</p><!--ここは変化する--> <p>ダミーテキスト⑤</p><!--変化しない--> |
|
1 2 3 4 |
/*.text直後のダミーテキスト④だけ変えたいなら*/ .text1+p{ color:red; } |
間接セレクタ
指定した要素と同一階層で、移行に出てくる要素を指定することができる指定方法です。
よくボタン系の要素と組み合わせて使われます
子孫セレクタのように書いて間に「~」記号を挟んで記述します
例えば「A ~ B」と書いたらA以降に出てくる同一階層のBという形の指定になります
|
1 2 3 4 5 |
<p>ダミーテキスト①</p><!--変化しない--> <p>ダミーテキスト②</p><!--変化しない--> <p class="text2">ダミーテキスト③</p><!--変化しない--> <p>ダミーテキスト④</p><!--ここは変化する--> <p>ダミーテキスト⑤</p><!--ここは変化する--> |
|
1 2 3 4 |
/*.text直後のダミーテキスト④だけ変えたいなら*/ .text2~p{ color:red; } |
