CSSセレクタとは（HTML・CSSの基礎知識）

CSSはHTMLに記述された指定の範囲または要素に対して装飾を施します。そして、CSSによるデザイン指定をどのHTML要素に適用させるかを指定するのに用いられるのが「CSSセレクタ」です。

HTMLの構造

CSSを理解する前にまずHTMLがどのような仕組みで記述されているかを理解しておく必要があります。

タグの属性

HTMLタグはその種類に応じて設定を付加することが出来ます。この設定のことを「属性」、設定の内容のことを「属性値」といいます。

付加することの出来る属性はタグごとに異なっています。
例えばリンクを定義する<a>タグには、リンク先を指定するhref属性を付加し、属性値としてリンク先のURLなどを設定することが出来ます。

CSSの適用対象として活用されるId名やclass名も、id属性の属性値、class属性の属性値となります。
CSSはこれら要素、階層、属性、属性値を指定して装飾を施します。

CSSの基本文法

CSSは、「セレクタ」「プロパティ」「値」の3つで構成されます。
それぞれを記述することで「どの要素（セレクタ）の、何を（プロパティ）、どのように（値）する」という命令文が成立します。

上記例の場合、「pタグの中（＝セレクタ）の文字色（＝プロパティ）を#F80206（＝値）にする」という内容になります。

基本的なセレクタの種類

スタイルを適用したい要素を指定する際に用いられる「CSSセレクタ」ですが、CSSセレクタには幅広い種類があり、様々な指定方法があります。

それでは、一般的によく使われるCSSセレクタを紹介します。

1．要素の指定

上記のようにHTMLとCSSの記述をしたとき、セレクタで指定してあるpタグにのみ装飾が適用されます。spanタグには適用されません。

2．*（すべての要素を指定）

先ほど同じHTMLの記述であっても、タグに関係なくすべての要素に装飾が適用されます。

3．.class（クラス名の指定）

クラス名を指定するとそのクラス名が付加されている要素すべてに装飾が適用されます。

---

exampleクラスが付加されているpタグ要素にのみ、装飾が適用されます。

4．#id（ID名の指定）

クラス名の指定と同じく、要素に続けて指定することで、そのID名が付加された要素に装飾が適用されます。

5．A B（子孫セレクタの指定）

ｐタグに囲われたspanタグにのみ、装飾が適用されます。

---

上記の例の場合は、pタグで囲われていて、かつexampleのクラス名が指定されているspanタグ要素に装飾が適用されます。

---

divタグで囲われているすべてのspanタグに装飾が適用されます。

6．A > B（子セレクタの指定）

先ほどと同じHTMLの記述であっても、divタグの一階層下にあるspanタグにのみ装飾が適用されます。

7．A + B（隣接セレクタの指定）

divタグの直後にあるpタグに装飾が適用されます。

8．A ~ B（要素の後ろにある同じ階層のセレクタの指定）

divタグの以降にあるすべてのpタグに装飾が適用されます。ただし階層が違うと適用されません。

9．A , B（複数のセレクタの指定）

divタグとspanタグに装飾が適用されます。

さいごに

今回はCSSに関して基本的な知識をまとめました。

CSSセレクタの指定方法を複数知っていることは、CSS設計をするうえで非常に大切なことです。web制作を始めたばかりという方も、より効率的なCSS設計を目指すうえで本記事を参考にしていただければ幸いです。

今回紹介したセレクタにも、属性を指定することで装飾を適用する「属性セレクタ」や、HTMLに記述されていない要素を疑似的に作り出して装飾を適用する「疑似要素」「疑似クラス」などの指定方法もあります。本記事では扱いませんが、知識として持っておくとコーディングの幅が広がりますので、ぜひ活用してみてください。