CSSセレクター

CSSセレクター 使用されています スタイルを設定したいコンテンツを選択します 。セレクターは CSS ルール セットの一部です。 CSS セレクターは、ID、クラス、タイプ、属性などに基づいて HTML 要素を選択します。

CSS にはいくつかの異なるタイプのセレクターがあります。

  1. CSS要素セレクター
  2. CSS ID セレクター
  3. CSSクラスセレクター
  4. CSSユニバーサルセレクター
  5. 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 (小さいフォント)

これは段落です。