CSS セレクター

CSS（カスケーディングスタイルシート）は、スタイルを適用する HTML 要素を選択するためのさまざまなセレクターを提供します。

CSS セレクターは、スタイルを適用したい要素を選択するためのパターンです。

下の表の「CSS」列は、CSS バージョンでの定義を示します。CSS1、CSS2 および CSS3 はカスケーディングスタイルシート（Cascading Style Sheets）の異なるバージョンであり、各バージョンはウェブページのスタイルの制御とデザインを改善するために新しい機能と特徴を導入しました。

一般的な CSS セレクター

以下は一般的な CSS セレクターです：

要素セレクター（Element Selector）：要素名によって HTML 要素を選択します。

次のコードのように、pセレクターはすべての<p>要素:

p {
  color: blue;
}

クラスセレクター（Class Selector）：クラス名によって特定のクラスを持つ HTML 要素を選択します。

クラスセレクターは.で始まり、その後ろにクラス名が続きます。

次のコードのように、.highlightセレクターは、クラスが"highlight"であるすべての要素を選択します。

.highlight {
  background-color: yellow;
}

ID セレクター（ID Selector）：要素の一意の識別子（ID）によって HTML 要素を選択します。

ID セレクターは#で始まり、その後ろに ID 名が続きます。

次のコードのように、#サンプルセレクターは、ID が"サンプル"である要素を選択します。

#サンプル {
  width: 200px;
}

属性セレクター（Attribute Selector）：要素の属性を使用して HTML 要素を選択します。属性セレクターは、属性名と属性値に基づいて選択できます。

次のコードのように、input[type="text"]セレクターはすべてのtype属性が"text"の <input> 要素を選択します。

input[type="text"] {
  border: 1px solid gray;
}

子孫セレクター（Descendant Selector）：要素の子孫関係を指定して HTML 要素を選択します。

子孫セレクターはスペースを使用して要素名を区切ります。

次のコードのように、div p セレクターは <div> 要素内のすべての <p> 要素を選択します。

div p {
  font-weight: bold;
}

より多くのセレクターは以下の表を参照してください：