前回はセレクタの種類の中から、初心編として5つのセレクタをご紹介しました。
【初心者向け】覚えておくべきCSSセレクタ5つ！（初級編）
前回より少し複雑な内容となりますが、より高度な要素指定ができるようになるために、
さらに
・セレクタの種類5つ（中級編）
・複数セレクタで指定する方法
をご紹介いたします。
セレクタの種類（中級編）
初級編でご紹介したよりもさらに限定的な指定の方法についてご紹介します。
擬似要素セレクタ
擬似要素セレクタとは、要素や属性だけでは特定できない「要素のある部分だけ」を対象としてスタイルを適用させるセレクタです。
CSS3から、擬似クラスと判別しやすくするために擬似要素セレクタは「要素名::○○」という書き方となっています。
※2020年6月時点では、どちらの書き方でも適用されます。
・要素名:first-line（::first-line）
要素の最初の一行に装飾を反映します。
|
1 2 3 4 |
// pタグ要素の中の「最初の1行」だけ 文字色を 青く します p::first-line { color : blue; } |
・要素名:first-letter（::first-letter）
要素の最初の一文字に装飾を反映します。
|
1 2 3 4 |
// pタグ要素の中の「最初の１文字」だけ 文字サイズを 30px にします p::first-letter { font-size : 30px; } |
・要素名:before（::before）
要素の直前に装飾を反映します。
|
1 2 3 4 |
// aタグ要素の文字表示の前に 『を つける a::before { content :"『"; } |
・要素名:after（::after）
要素の直後に装飾を反映します。
|
1 2 3 4 |
// aタグ要素の文字表示の後ろに →を つける a::after { content :"→"; } |
属性セレクタ
属性セレクタとは、「指定された属性が存在するかどうかや、その値に基づいて要素を選択できるセレクタ」です。
・要素名[属性名]
特定の属性を持つ指定要素に装飾を反映します。
|
1 2 3 4 |
// title属性を持つaタグ要素の 文字色を 紫に する a[title] { color : purple; } |
・要素名[属性名= “属性値”]
指定した属性値と一致する指定要素に装飾を反映します。
|
1 2 3 4 |
// href属性の値が 「https://sample.com」 と一致する aタグ要素の 文字色を 青に する a[href="https://sample.com"] { color : blue; } |
・要素名[属性名*= “属性値”]
指定した属性値を含む指定要素に装飾を反映します。
|
1 2 3 4 |
// href属性の値に 「sample」を 含む aタグ要素の 文字色を 赤に する a[href*="sample"] { color : red; } |
・要素名[属性名$= “属性値”]
指定した値候補で終わる指定要素に装飾を反映します。
|
1 2 3 4 |
// href属性の値が 「.com」で終わる aタグ要素の 文字色を 緑に する a[href$=".com"] { color : green; } |
・要素名[属性名^= “属性値”]
指定した値候補で始まる指定要素に装飾を反映します。
|
1 2 3 4 5 |
// href属性の値が「https://」で始まる aタグ要素の 文字色を グレー にする a[href^="https://"] { color : gray; } |
子孫セレクタ
「下の階層の子孫要素セレクタ」です。
- セレクタA セレクタB { プロパティ：値 }
という書き方をすることで、
- 「セレクタA の中にある セレクタB全て」に対して装飾する
となります。
|
1 2 3 4 5 6 7 |
// p要素タグの中の strong要素タグ 全ての 文字色を 赤に する p strong { color : red; } // p要素タグ直下のstrongタグ要素（子要素）だけでなく、 // p要素タグ直下のspanタグ要素（子要素）の中のstrong要素タグ（孫要素）にも適用されます |
子セレクタ
「直下の階層の子要素セレクタ」です。
- セレクタA > セレクタB { プロパティ：値 }
という書き方をすることで、
- 「セレクタA の直下にある セレクタB全て」に対して装飾する
となります。
|
1 2 3 4 5 6 7 |
// p要素タグ直下の strong要素タグ 全ての 文字色を 緑に する p > strong { color : green; } // p要素タグ直下のstrongタグ要素（子要素）だけ // p要素タグ直下のspanタグ要素（子要素）の中のstrong要素タグ（孫要素）には適用されない |
隣接セレクタ
「直後に隣接している要素セレクタ」です。
- セレクタA + セレクタB { プロパティ：値 }
という書き方をすることで、
- 「セレクタA の直後に隣接している セレクタB」に対して装飾する
となります。
|
1 2 3 4 5 6 |
// h2要素タグの 直後に隣接している pタグ要素の 文字色を 青 にする h2 + p { color : blue; } // h2タグ要素の直後にあったとしても、タグ要素がpでなければ適用されません |
複数セレクタで指定する方法
区切り文字がカンマ（,）
セレクタを複数指定することができます。
|
1 2 3 4 5 6 7 8 9 10 |
// h2要素タグとpタグ要素の 文字色を 赤 にする h2,p { color : red; } // classセレクタやidセレクタも使えます。 //class名「sample」を持つ要素 と id名「demo」を持つ要素の 文字色を 青 にする .sample,#demo { color : blue; } |
区切り文字がない場合
複数の条件を満たしている要素にのみ適用するセレクタです。
|
1 2 3 4 |
//class名に 「sample」 と 「demo」 の両方を持つ要素の 文字色を 緑 にする .sample.demo { color : green; } |
【注意】「子孫セレクタ」と混同してしまいがちですので、ご注意ください。
まとめ
いかがでしたでしょうか？
初級編とあわせて、こちらでご紹介したセレクタを使いこなすことで、かなり複雑な要素指定ができるようになります。
【初心者向け】覚えておくべきCSSセレクタ5つ！（初級編）
以上、CSSのセレクタについて
・セレクタの種類5つ（中級編）
・複数セレクタで指定する方法
についてご紹介しました。
プログラミング学習を始めたばかりの方は、CSS理解のためにぜひ参考にしてみてください。
