基本的な CSS: 要素、ID、および Class

CSS では、要素、 class、 を選択して id スタイルを適用し、Web ページ上の要素をカスタマイズできます。 それらの使用方法に関する詳細なガイドは次のとおりです。

 

要素の選択

特定の HTML 要素のすべてのインスタンスを選択するには、要素名をセレクターとして使用します。 たとえば、 ドキュメント内の p すべてのタグを選択します。 <p>

 

選択中 Class

同じクラスの要素を選択するには、ドット「.」を使用します。 その後にクラス名が続きます。 たとえば、 .my-class クラス を持つすべての要素を選択します my-class。

複数のクラスを持つ要素を選択するには、ドット「.」を使用します。 クラス名をスペースで区切ってリストします。 たとえば、 とクラス .class1.class2 の両方を持つ要素を選択します 。 class1 class2

 

選択中 id

特定の要素をその で選択するには id 、ハッシュ「#」の後に要素の を使用します id。 たとえば、 #my-id の要素を選択します id my-id。

 

Element、 Class 、および ID 選択項目 の組み合わせ

element、 class 、および id の選択を組み合わせて、特定のクラスおよび を持つ特定の要素をターゲットにすることができます ID。

たとえば、  と を持つ 要素 div.my-class#my-id を選択します 。 <div> class my-class ID my-id

class CSS で要素、、 を選択する具体的な例を次に示します id。

/* Select all <p> tags */  
p {  
  color: blue;  
}  
  
/* Select elements with the class "my-class" */  
.my-class {  
  background-color: yellow;  
}  
  
/* Select the element with the ID "my-id" */  
#my-id {  
  font-weight: bold;  
}  
  
/* Combine element, class, and ID selections */  
div.my-class#my-id {  
  border: 1px solid black;  
}  

element、 、および ID 選択 を使用すると class 、Web ページ上の特定の要素または要素のグループを簡単に選択し、スタイルを設定できます。