【CSS】セレクタを使いこなそう
2020.09.11 Posted by Coding_team
CSSは「セレクタ」「プロパティ」「値」で構成されています。
下記の場合だと、pがセレクタ、font-sizeがプロパティ、16pxが値ですね。
|
1 2 3 |
p { font-size: 16px; } |
セレクタを書くことで、どこにスタイルを指定するかを決めることができます。
今回は、この「セレクタ」の種類と書き方をご紹介します。
セレクタの種類と書き方
タグ名で指定
|
1 2 3 4 5 6 7 |
p { font-size: 16px; } div { padding: 20px; } |
タグ名
タグ名をそのまま書くと、指定したタグ全てにスタイルが適用されます。
クラス名で指定
|
1 2 3 |
.block { padding: 20px; } |
.クラス名
指定したクラス全てにスタイルが適用されます。
id名で指定
|
1 2 3 |
#wrapper { padding: 20px; } |
#id名
指定したid全てにスタイルが適用されます。
全ての要素を指定
|
1 2 3 |
* { font-size: 16px; } |
*
全ての要素にスタイルが適用されます。
複数指定
|
1 2 3 |
#wrapper, .block, p { padding: 20px; } |
A, B, C, …
カンマで区切ることで、複数のセレクタを指定することができます。
id名やクラス名など、セレクタの種類が混在していても問題ありません。
子孫セレクタの指定
|
1 2 3 4 5 6 7 8 |
<div class="sample_block"> <div> <p>りんご</p> <div> <p>トマト</p> </div> </div> </div> |
|
1 2 3 4 |
.sample_block div { border: solid 1px #ffb9a9; padding: 40px; } |
SAMPLE
りんご
トマト
A B
セレクタの間に半角スペースを入れて指定することで、
親要素内のすべての子要素にスタイルが適用されます。
例の場合だと、.block内のすべてのdivに、padding: 40px;が適用されます。
AとBのセレクタの種類は、タグやid、クラスなど異なった種類が混在していても問題ありません。
子要素の指定
|
1 2 3 4 5 6 7 8 |
<div class="sample_block"> <div> <p>りんご</p> <div> <p>トマト</p> </div> </div> </div> |
|
1 2 3 4 |
.sample_block > div { border: solid 1px #ffb9a9; padding: 40px; } |
SAMPLE
りんご
トマト
A > B
セレクタ間を>で指定することで、
親要素の直下にある子要素にスタイルが適用されます。
例の場合だと、.block直下にあるdivにのみ適用されます。
AとBのセレクタの種類は、タグやid、クラスなど異なった種類が混在していても問題ありません。
隣接セレクタの指定
|
1 2 3 4 |
<p>テキスト1</p> <p class="txt_a">テキスト2</p> <p class="txt_b">テキスト3</p> <p>テキスト4</p> |
|
1 2 3 |
.txt_a + .txt_b { color: red; } |
SAMPLE
テキスト1
テキスト2
テキスト3
テキスト4
A + B
セレクタ間を+で指定することで、先に指定した要素の後に隣接している要素にスタイルが適用されます。
例の場合だと、”txt_b”のクラスの「テキスト3」と書かれた文字のみが赤文字になります。
AとBのセレクタの種類は、タグやid、クラスなど異なった種類が混在していても問題ありません。
後ろの要素の指定
|
1 2 3 4 5 |
<p>テキスト1</p> <p class="txt">テキスト2</p> <p>テキスト3</p> <div><p>テキスト4</p></div> <p>テキスト5</p> |
|
1 2 3 |
.txt_a ~ p { color: red; } |
SAMPLE
テキスト1
テキスト2
テキスト3
テキスト4
テキスト5
A ~ B
セレクタ間を~で指定することで、先に指定した要素より後にある、該当する要素にスタイルが適用されます。
ただし、階層が違う要素には適用されないため、例の場合はテキスト3、5のみが赤文字になります。
テキスト4はdivの中に入っているpのため、スタイルは適用されません。
AとBのセレクタの種類は、タグやid、クラスなど異なった種類が混在していても問題ありません。
属性指定
|
1 2 |
<input type="text" name="namae" size="40" maxlength="20"> <input type="text" name="namae" size="40" maxlength="20" required> |
|
1 2 3 |
input[required] { width: 400px; } |
A[属性名]
inputタグやaタグなど、属性を持つHTML要素の場合は、属性名を指定することができます。
例の場合だと、required属性を持っている2番目のinputタグにのみスタイルが適用されます。
属性と値の指定
|
1 2 |
<input type="text" name="namae" size="40" maxlength="20"> <input type="tel" name="tel" size="12" maxlength="20"> |
|
1 2 3 |
input[type="text"] { width: 400px; } |
A[属性名=”値”]
この形で書くことで、属性名と値に合致する要素にのみスタイルが適用されます。
例の場合だと、type属性を持ち、値がtextである1番目のinputタグにのみスタイルが適用されます。
まとめ
セレクタの指定方法は多数存在します。
上手に利用することで、CSSの記述を減らすことができ、コードが整理されるのでぜひとも活用しましょう。
また、疑似要素と並行して使用すると、より便利になります。
疑似要素については疑似要素について知ろうにて紹介していますので、こちらも見てみてください。
関連記事こちらの記事も合わせてどうぞ。
