【CSS入門】セレクタの種類と使い方を解説

CSSセレクタは、HTMLドキュメント内の要素にスタイルを適用するためのパターンを定義するものです。

主なセレクタの種類

様々なセレクタを使うことで、特定の要素やグループに対してスタイルを適用できます。

要素セレクタ

タグ名で指定し、該当する全ての要素にスタイルを適用します。
例: 段落などはpタグで指定します。

クラスセレクタ

クラス名で指定し、該当するクラス属性を持つ全ての要素にスタイルを適用します。クラス名の前にドット（.）を付けます。
例: .example はクラス example を持つ全ての要素に適用されます。

IDセレクタ

ID名で指定し、該当するIDを持つ特定の要素にスタイルを適用します。ID名の前にハッシュ記号（#）を付けます。

属性セレクタ

特定の属性や属性値を持つ要素にスタイルを適用します。角括弧（[]）を使用します。

子孫セレクタ

特定の親要素内の全ての子要素にスタイルを適用します。セレクタの間にスペースを入れます。

子セレクタ

特定の親要素の直接の子要素にスタイルを適用します。セレクタの間に > を入れます。
例: ul > li は全ての <ul> の直下の <li> に適用されます。

これらのセレクタを駆使することで、効率的かつ精確にウェブページのスタイルを管理できます。