CSS/セレクタ

セレクタ

CSSにおけるセレクタとは、スタイルを適用するHTML要素を選択するためのパターンを定義するものです。セレクタは単純なものから複雑なものまで幅広く用意されており、HTML要素の種類、属性、状態、あるいは親子関係や兄弟要素の関係を基に要素を選択することが可能です。

セレクタはまた、JavaScriptでDOMノードを取得する際にも利用され、要素を効率的に操作するための強力な手段となります。

セレクタの種類

セレクタは以下のように分類されます。

シンプルセレクタ

シンプルセレクタは、基本的な要素や属性を基に要素を選択するためのものです。

タイプセレクタ (Type Selector)

要素の名前を指定して選択します。

p {
  color: blue;
}

この例では、すべての<p>要素の文字色を青に設定します。

クラスセレクタ (Class Selector)

クラス名を基に要素を選択します。

.button {
  background-color: green;
  color: white;
}

この例では、クラス名がbuttonの要素に緑色の背景と白色の文字色を適用します。

IDセレクタ (ID Selector)

特定のIDを持つ要素を選択します。

#header {
  font-size: 24px;
}

この例では、IDがheaderの要素に24pxのフォントサイズを適用します。

ユニバーサルセレクタ (Universal Selector)

すべての要素を選択します。

* {
  margin: 0;
  padding: 0;
}

この例では、すべての要素の余白と内側の余白をリセットします。

属性セレクタ (Attribute Selector)

特定の属性を持つ要素を選択します。

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

この例では、type属性がtextの<input>要素に黒い枠線を適用します。

コンビネータ (Combinator)

コンビネータを使用すると、要素間の関係に基づいて選択が可能になります。

子孫セレクタ (Descendant Combinator)

指定された要素のすべての子孫要素を選択します。

div p {
  color: red;
}

この例では、<div>要素内にあるすべての<p>要素の文字色を赤にします。

子セレクタ (Child Combinator)

特定の親要素に直接属する子要素を選択します。

div > p {
  font-weight: bold;
}

この例では、<div>の直接の子である<p>要素の文字を太字にします。

隣接セレクタ (Adjacent Sibling Combinator)

指定された要素に隣接する要素を選択します。

h1 + p {
  margin-top: 0;
}

この例では、<h1>の直後に続く<p>要素の上余白を0にします。

兄弟セレクタ (General Sibling Combinator)

指定された要素の兄弟要素をすべて選択します。

h1 ~ p {
  color: gray;
}

この例では、<h1>の後に続くすべての<p>要素を灰色にします。

擬似クラス (Pseudo-classes)

擬似クラスは、要素の状態に基づいて選択を行うために使用します。

a:hover {
  text-decoration: underline;
}

この例では、リンク要素にカーソルを合わせた際に下線を表示します。

擬似要素 (Pseudo-elements)

擬似要素は、要素の一部にスタイルを適用するために使用されます。

p::first-line {
  font-weight: bold;
}

この例では、<p>要素の最初の行を太字にします。

セレクタの詳細度 (Specificity)

CSSセレクタは「詳細度 (Specificity)」というルールに従って適用順序が決まります。詳細度の計算は以下のように行われます。

IDセレクタ: 1点
クラスセレクタ、属性セレクタ、擬似クラス: 1点
タイプセレクタ、擬似要素: 1点

例えば以下の場合：

#header {
  color: blue;
}
.header {
  color: red;
}

IDセレクタ#headerの詳細度が高いため、color: blue;が適用されます。

まとめ

CSSのセレクタは、単純なスタイリングから複雑な条件付きスタイリングまで幅広く対応します。シンプルなセレクタを基本とし、必要に応じてコンビネータや擬似クラス、擬似要素を組み合わせることで、効率的なスタイリングが可能です。また、セレクタの詳細度を理解し、競合を避けることが重要です。