CSSセレクター入門

CSSを学び始めたばかりの方にとって、最初の壁となるのがCSSセレクターです。この記事では、「セレクターって何？」という基本的な疑問から「どうやって使うの？」という実用的な使い方までを解説します。

CSSはWebデザインの土台となる技術です。CSSセレクターを理解し、使いこなすことで、特定のHTML要素にスタイルを適用できるようになります。一緒に学んでいきましょう！

CSSセレクターとは

CSSセレクターは、HTML文書内の特定の要素を「選択」し、選択した要素にスタイルを適用するためのものです。

CSSセレクターの基本タイプ

初学者が最初に覚えるべきセレクターは、以下の４種類です。

1. 要素セレクター

HTML要素の名前を指定してスタイルを適用します。「要素名」だけを記述します。

構文：

要素名 {
  プロパティ: 値;
}

例：

h1 {
  color: blue;
}

注意：

このセレクターは同じ名前の要素に適用されるため、注意が必要です。特定の要素にだけ適用したい場合は、クラスやIDセレクターを使用しましょう。

2. クラスセレクター

HTML要素に付けた「クラス名」を使ってスタイルを適用します。クラス名はドット（.）を付けて指定します。

構文：

.クラス名 {
  プロパティ: 値;
}

例：

<span class="highlight">ハイライトするテキスト</span>

.highlight {
  color: blue;
}

ポイント：

クラスセレクターは、複数の要素に同じスタイルを適用したい場合に便利です。

3. IDセレクター

HTML要素に付けた「id名」を使ってスタイルを適用します。id名はシャープ（#）を付けて指定します。

構文：

#id名 {
  プロパティ: 値;
}

例：

<p id="unique">特定の段落</p>

#unique {
  font-size: 20px;
}

注意：

IDはページ内で一意である必要があります。同じIDを複数の要素に適用しないようにしましょう。

4. グループセレクター

複数の要素に同じスタイルを適用したい場合、カンマ（,）で区切って指定します。

構文：

セレクター１,
セレクター２,
セレクター３ {
  プロパティ: 値;
}

例：

h1,
.highlight,
#unique {
  font-weight: bold;
}

解説：

h1要素、highlightクラスを持つ要素、id名がuniqueである要素、全てに同じスタイルが適用されます。

クラスセレクターの応用的な使い方

要素名とクラス名を連結したセレクターや、複数のクラス名を連結したセレクターを用いることで、スタイルを適用する範囲を絞り込むことができます。

要素名とクラス名の連結

要素名とクラス名を連結すると、特定のクラスを持つ要素に対してのみスタイルを適用できます。

構文：

要素名.クラス名 {
  プロパティ: 値;
}

例：

<h2 class="title">heading2</h2>
<h3 class="title">heading3</h3>

.title {
  font-style: italic;
}
h2.title {
  border-bottom: 2px solid blue;
}

結果：

heading2

heading3

解説：

「.title」セレクターで指定されたスタイルは、h2とh3の両方に適用されます。一方、「h2.title」セレクターで指定されたスタイルは、titleクラスを持つh2要素にのみ適用されます。このため、h2要素にはborder-bottomが設定されますが、同じクラス名を持つh3要素には影響しません。

複数のクラス名の連結

複数のクラス名を連結すると、特定のクラスの組み合わせを持つ要素にのみスタイルを適用できます。

構文：

.クラス名１.クラス名２ {
  プロパティ: 値;
}

例：

<ul>
  <li class="bird flying">タカ</li>
  <li class="bird">ダチョウ</li>
  <li class="insect">アリ</li>
  <li class="insect flying">ガ</li>
</ul>

.insect.flying {
  color: blue;
 }

結果：

• タカ
• ダチョウ
• アリ
• ガ

解説：

insectクラスとflyingクラスの両方を持つ要素だけにスタイルが適用されます。

親要素、子要素、孫要素とは

CSSセレクターを使って特定のHTML要素にスタイルを適用するには、HTMLの構造を理解することが重要です。特に、親要素、子要素、孫要素といった関係性を把握しておくと、セレクターの理解が深まります。

• 親要素とは、他の要素を内包している要素
• 子要素とは、親要素に直接含まれる要素
• 孫要素とは、子要素の中に含まれる要素

以下のHTMLを例に、親・子・孫の関係を見てみましょう。

<nav>
  <ul class="main-menu">
    <li>メニュー１</li>
    <li>メニュー２
      <ul class="sub-menu">
        <li>サブメニュー１</li>
        <li>サブメニュー２</li>
      </ul>
    </li>
  </ul>
</nav>

要素間の関係性をしっかり理解しておくと、CSSセレクターを使う際に「どの要素をターゲットにすべきか」が明確になります。

nav要素・・・親
  ul要素・・・navの子、親
    li要素・・・navの孫、ulの子
    li要素・・・navの孫、ulの子、親
      ul要素・・・navの孫、ulの孫、liの子、親
        li要素・・・navの孫、ulの孫、liの孫、ulの子
        li要素・・・navの孫、ulの孫、liの孫、ulの子

子孫セレクター

子孫セレクターは、特定の要素の「中に含まれる全ての子要素と孫要素」を対象にスタイルを適用します。セレクターとセレクターの間にスペースをあけて指定します。

構文：

セレクター１ セレクター２ {
  プロパティ: 値;
}

例：

.main-menu li {
  color: blue;
  list-style: none;
}

解説：

main-menuクラスを持つ要素の中に含まれる全てのli要素を選択します。

結果：

子セレクター

子セレクターは、特定の要素に含まれる「直属の子」にのみスタイルを適用します。セレクターとセレクターの間に大なり記号（>）を使って指定します。

構文：

セレクター１ > セレクター２ {
  プロパティ: 値;
}

例：

.main-menu > li {
  color: blue;
  list-style: none;
}

解説：

main-menuクラスを持つ要素の直下にあるli要素だけが選択されます。

結果：

子孫セレクターと子セレクターの結果の一部が同じ？！

子セレクターが期待通りに動作しない理由のひとつは、CSSプロパティの継承にあります。colorプロパティは親要素から子要素へ継承されるため、「文字の色」が子孫セレクターと子セレクターとで「同じ結果」になります。つまり、メニュー２（親要素）に指定した文字の色が<ul class="sub-menu">（子要素）に継承され、さらにサブメニュー１（<ul class="sub-menu">の子要素であり、メニュー２の孫要素）にも適用されます。このため、子セレクターを使っても、孫要素にまで影響が及んでしまうのです。

以下の画像は、開発者ツールで「サブメニュー１」のCSSを確認した際のものです。子セレクターを使った場合、「Inherited from li」と表示され、「メニュー２」のcolorプロパティが継承されていることが確認できます。

CSSプロパティが継承されるかどうかには一定のルールがありますが、実際にCSSを使っていく中で経験的に学んでいくことが多いです。

その他のセレクター

基本的なセレクターに加えて、使いこなせるようになると便利なセレクターを紹介します。

属性セレクター

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

例：

input[type="text"] {
  background-color: #f0f0f0;
}

擬似クラスセレクター

要素の特定の状態や条件に基づいてスタイルを適用します。コロン (:) の後に擬似クラス名を指定します。擬似クラスは好きなだけ連結することができます。

構文：

セレクター:疑似クラス {
  プロパティ: 値;
}

擬似クラスには以下のような種類があります。

まとめ

CSSセレクターは、Webデザインの基礎となる技術です。HTML要素を効率的に装飾できるよう、一歩ずつ着実に進めていきましょう！

参考リンク

• CSSセレクター – MDN
• CSS Tricks