CSSセレクター
CSSセレクターは、スタイルを設定するHTML要素を選択します。
CSSセレクター
CSSセレクターは、スタイルを設定するHTML要素を「検索」（または選択）するために使用されます。
CSSセレクターは次の5つのカテゴリに分類できます。
- 単純なセレクター（名前、ID、クラスに基づいて要素を選択します）
- コンビネータセレクター（要素間の特定の関係に基づいて要素を選択します）
- 疑似クラスセレクター（特定の状態に基づいて要素を選択します）
- 疑似要素セレクター（要素の一部を選択してスタイルを設定する）
- 属性セレクター（属性または属性値に基づいて要素を選択します）
このページでは、最も基本的なCSSセレクターについて説明します。
CSS要素セレクター
要素セレクターは、要素名に基づいてHTML要素を選択します。
例
ここでは、ページ上のすべての<p>要素が中央揃えになり、テキストの色が赤になります。
p
{
text-align: center;
color: red;
}
CSSIDセレクター
idセレクターは、HTML要素のid属性を使用して、特定の要素を選択します。
要素のIDはページ内で一意であるため、idセレクターを使用して1つの一意の要素を選択します。
特定のIDを持つ要素を選択するには、ハッシュ（＃）文字を記述し、その後に要素のIDを記述します。
例
以下のCSSルールは、id = "para1"のHTML要素に適用されます。
#para1
{
text-align: center;
color: red;
}
注： ID名を数字で始めることはできません！
CSSクラスセレクター
クラスセレクターは、特定のクラス属性を持つHTML要素を選択します。
特定のクラスの要素を選択するには、ピリオド（。）文字の後にクラス名を記述します。
例
この例では、class = "center"のすべてのHTML要素が赤で、中央揃えになります。
.center {
text-align: center;
color: red;
}
特定のHTML要素のみがクラスの影響を受けるように指定することもできます。
例
この例では、class = "center"の<p>要素のみが赤で中央揃えになります：
p.center {
text-align: center;
color: red;
}
HTML要素は、複数のクラスを参照することもできます。
例
この例では、<p>要素はclass = "center"およびclass = "large"に従ってスタイル設定されます。
<p class="center large">This paragraph refers to two classes.</p>
注：クラス名を数字で始めることはできません。
CSSユニバーサルセレクター
ユニバーサルセレクター（*）は、ページ上のすべてのHTML要素を選択します。
例
以下のCSSルールは、ページ上のすべてのHTML要素に影響します。
*
{
text-align: center;
color: blue;
}
CSSグループ化セレクター
グループ化セレクターは、同じスタイル定義を持つすべてのHTML要素を選択します。
次のCSSコードを見てください（h1、h2、およびp要素は同じスタイル定義を持っています）：
h1
{
text-align: center;
color: red;
}
h2
{
text-align: center;
color: red;
}
p
{
text-align: center;
color: red;
}コードを最小限に抑えるために、セレクターをグループ化することをお勧めします。
セレクターをグループ化するには、各セレクターをコンマで区切ります。
例
この例では、上記のコードのセレクターをグループ化しました。
h1, h2, p
{
text-align: center;
color: red;
}
すべてのCSSシンプルセレクター
| Selector | Example | Example description |
|---|---|---|
| #id | #firstname | Selects the element with id="firstname" |
| .class | .intro | Selects all elements with class="intro" |
| element.class | p.intro | Selects only <p> elements with class="intro" |
| * | * | Selects all elements |
| element | p | Selects all <p> elements |
| element,element,.. | div, p | Selects all <div> elements and all <p> elements |