CSS のセレクターは、HTML や XML などのマークアップ言語で記述された要素を指定するための記述方法です。セレクターを使うことで、HTML 要素に対してスタイルを適用することができます。
セレクターは、要素名、ID、クラス、属性などを組み合わせて指定することができます。例えば、以下のようなセレクターがあります。
- 要素名セレクター
- 要素名を指定することで、その要素にスタイルを適用します。
- 例: h1 { color: red; }
- ID セレクター
- ID 属性を指定することで、その ID を持つ要素にスタイルを適用します。
- 例: #header { background-color: gray; }
- クラスセレクター
- class 属性を指定することで、そのクラスを持つ要素にスタイルを適用します。
- 例: .menu { font-size: 16px; }
- 属性セレクター
- 属性名や属性値を指定することで、その属性を持つ要素にスタイルを適用します。
- 例: input[type=”text”] { border: 1px solid gray; }
また、これらのセレクターは組み合わせて使うこともできます。例えば、以下のようなセレクターがあります。
- 子孫セレクター
- 親要素と子要素の関係を指定することで、子要素にスタイルを適用します。
- 例: ul li { list-style-type: square; }
- 直接子孫セレクター
- 親要素と直接の子要素の関係を指定することで、直接の子要素にスタイルを適用します。
- 例: ul > li { font-weight: bold; }
- 隣接兄弟セレクター
- 兄弟関係にある要素のうち、直後にある兄弟要素にスタイルを適用します。
- 例: h1 + p { font-size: large; }
- 汎用兄弟セレクター
- 兄弟関係にある要素のうち、後ろにある兄弟要素全てにスタイルを適用します。
- 例: h1 ~ p { color: gray; }
以上が CSS のセレクターの一部です。他にも様々な種類がありますが、基本的なものはこれらだけでも十分使いこなせるようになります。
