CSS セレクタとは？知っておくと便利なセレクタを紹介
CSSセレクターは、スタイルを設定するHTML要素を選択します。
CSSセレクター
CSSセレクターは、スタイルを設定するHTML要素を「検索」(または選択)するために使用されます。
CSSセレクターは、次の5つのカテゴリに分類できます。
- 単純なセレクター(名前、ID、クラスに基づいて要素を選択)
- コンビネータセレクタ(要素間の特定の関係に基づいて要素を選択）
- 疑似クラスセレクター(特定の状態に基づいて要素を選択)
- 疑似要素セレクター(選択する要素の一部をスタイルする）
- 属性セレクター(属性または属性値に基づいて要素を選択)
このページでは、最も基本的なCSSセレクターについて説明します。
CSS要素セレクター
要素セレクターは、要素名に基づいてHTML要素を選択します。
CSS IDセレクター
idセレクターは、HTML要素のid属性を使用して特定の要素を選択します。
要素のIDはページ内で一意であるため、IDセレクターを使用して1つの一意の要素を選択します。
特定のIDを持つ要素を選択するには、ハッシュ(#)文字を書き、その後に要素のIDを続けます。
注：ID名は数字で始めることはできません!
CSSクラスセレクター
クラスセレクターは、特定のクラス属性を持つHTML要素を選択します。
特定のクラスの要素を選択するには、ピリオド(.)文字を書き、その後にクラス名を続けます。
特定のHTML要素のみがクラスの影響を受けるように指定することもできます。
HTML要素は、複数のクラスを参照することもできます。
例
この例では、<p>要素はclass="center"およびclass="large"に従ってスタイル設定されます。
注：クラス名は数字で始めることはできません!
CSSユニバーサルセレクター
ユニバーサルセレクター(*)は、ページ上のすべての HTML要素を選択します。
CSSグループ化セレクター
グループ化セレクターは、同じスタイル定義を持つすべてのHTML要素を選択します。
次のCSSコードを見てください(h1、h2、およびp要素のスタイル定義は同じです)。
コードを最小限に抑えるには、セレクターをグループ化することをお勧めします。
セレクターをグループ化するには、各セレクターをコンマで区切ります。
すべてのCSSシンプルセレクター
|
セレクタ |
例 |
例の説明 |
|---|---|---|
| #ID | ＃firstname | id="firstname"を持つ要素を選択します |
| .class | .intro | class="intro"を持つすべての要素を選択します |
| * | * | すべての要素を選択します |
| element | p | すべての<p>要素を選択します |
| element、element、.. | div、p | すべての<div>要素とすべての<p>要素を選択します |
プログラミング学習を加速させる
プログラミングをプロの講師に教えてもらいませんか。