logo

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 (小さいフォント)

これは段落です。