【初心者向け】覚えておくべきCSSセレクタ5つ!(中級編)

前回はセレクタの種類の中から、初心編として5つのセレクタをご紹介しました。

【初心者向け】覚えておくべきCSSセレクタ5つ!(初級編)

 

前回より少し複雑な内容となりますが、より高度な要素指定ができるようになるために、

さらに

・セレクタの種類5つ(中級編)

・複数セレクタで指定する方法

をご紹介いたします。

 

セレクタの種類(中級編)

 

初級編でご紹介したよりもさらに限定的な指定の方法についてご紹介します。

 

 

擬似要素セレクタ

擬似要素セレクタとは、要素や属性だけでは特定できない「要素のある部分だけ」を対象としてスタイルを適用させるセレクタです。

 

CSS3から、擬似クラスと判別しやすくするために擬似要素セレクタは「要素名::○○」という書き方となっています。

※2020年6月時点では、どちらの書き方でも適用されます。

 

・要素名:first-line(::first-line)

要素の最初の一行に装飾を反映します。

 

・要素名:first-letter(::first-letter)

要素の最初の一文字に装飾を反映します。

 

・要素名:before(::before)

要素の直前に装飾を反映します。

 

・要素名:after(::after)

要素の直後に装飾を反映します。

 

属性セレクタ

属性セレクタとは、「指定された属性が存在するかどうかや、その値に基づいて要素を選択できるセレクタ」です。

 

・要素名[属性名]

特定の属性を持つ指定要素に装飾を反映します。

 

・要素名[属性名= “属性値”]

指定した属性値と一致する指定要素に装飾を反映します。

 

・要素名[属性名*= “属性値”]

指定した属性値を含む指定要素に装飾を反映します。

・要素名[属性名$= “属性値”]

指定した値候補で終わる指定要素に装飾を反映します。

 

・要素名[属性名^= “属性値”]

指定した値候補で始まる指定要素に装飾を反映します。

 

 

子孫セレクタ

「下の階層の子孫要素セレクタ」です。

  • セレクタA セレクタB { プロパティ:値 }

という書き方をすることで、

  • 「セレクタA の中にある セレクタB全て」に対して装飾する

となります。

 

 

子セレクタ

「直下の階層の子要素セレクタ」です。

  • セレクタA > セレクタB { プロパティ:値 }

という書き方をすることで、

  • 「セレクタA の直下にある セレクタB全て」に対して装飾する

となります。

 

 

隣接セレクタ

「直後に隣接している要素セレクタ」です。

  • セレクタA + セレクタB { プロパティ:値 }

という書き方をすることで、

  • 「セレクタA の直後に隣接している セレクタB」に対して装飾する

となります。

 

複数セレクタで指定する方法

 

区切り文字がカンマ(,)

セレクタを複数指定することができます。

 

区切り文字がない場合

複数の条件を満たしている要素にのみ適用するセレクタです。

【注意】「子孫セレクタ」と混同してしまいがちですので、ご注意ください。

まとめ

いかがでしたでしょうか?

初級編とあわせて、こちらでご紹介したセレクタを使いこなすことで、かなり複雑な要素指定ができるようになります。

【初心者向け】覚えておくべきCSSセレクタ5つ!(初級編)

 

以上、CSSのセレクタについて

・セレクタの種類5つ(中級編)

・複数セレクタで指定する方法

についてご紹介しました。

プログラミング学習を始めたばかりの方は、CSS理解のためにぜひ参考にしてみてください。

BLOGコンテンツをパーソナライズします

あなたは現在「プログラミング学習者」ですか?