CSSセレクター 使用されています スタイルを設定したいコンテンツを選択します 。セレクターは CSS ルール セットの一部です。 CSS セレクターは、ID、クラス、タイプ、属性などに基づいて HTML 要素を選択します。
CSS にはいくつかの異なるタイプのセレクターがあります。
- CSS要素セレクター
- CSS ID セレクター
- CSSクラスセレクター
- CSSユニバーサルセレクター
- CSSグループセレクター
1) CSS要素セレクター
要素セレクターは、HTML 要素を名前で選択します。
p{ text-align: center; color: blue; } <p>This style will be applied on every paragraph.</p> <p id="para1">Me too!</p> <p>And me!</p>今すぐテストしてください
出力:
このスタイルはすべての段落に適用されます。
私もです!
そして私も!
2) CSS ID セレクター
id セレクターは、HTML 要素の id 属性を選択して、特定の要素を選択します。 ID はページ内で常に一意であるため、単一の一意の要素を選択するために選択されます。
これは、ハッシュ文字 (#) の後に要素の ID が続く形で記述されます。
ID が「para1」の例を見てみましょう。
#para1 { text-align: center; color: blue; } <p id="para1">Hello Javatpoint.com</p> <p>This paragraph will not be affected.</p>今すぐテストしてください
出力:
こんにちは、Javatpoint.com
この段落は影響を受けません。
3) CSSクラスセレクター
クラス セレクターは、特定のクラス属性を持つ HTML 要素を選択します。ピリオド文字と一緒に使用されます。 (ピリオド記号) の後にクラス名が続きます。
注: クラス名を数字で始めることはできません。
クラス「center」の例を見てみましょう。
.center { text-align: center; color: blue; } <h2>Hello Javatpoint.com (In smaller font)</h2> <p>This is a paragraph.</p>今すぐテストしてください
出力:
こんにちは、Javatpoint.com
こんにちは、Javatpoint.com (小さいフォント)
これは段落です。