CSS では、セレクターはスタイルを適用したいウェブページ上の HTML 要素を取得するのに使用されます。CSS セレクターは幅広い種類があり、スタイルを適用する要素を選択するとき、きめ細かく指定できます。以下のいくつかの記事で、とても詳しく複数の種類を見ていきます。
| 前提条件: | 基本的なコンピューターリテラシー、基本的なソフトウェアのインストール、基本的なファイル操作の知識、 HTML の基本 (HTML 入門 の学習)、How CSS works の知識。 |
|---|---|
| 目的: | CSS セレクターがどのように動作するか詳しく学ぶ。 |
基本
前の記事では一般的な CSS 文法と記述方法 を詳しく説明しました。要約すると、セレクターは CSS 規則の一部分で、 CSS 宣言ブロックの前に記述されます。
セレクターの種類
セレクターは、以下のカテゴリーに分類されます:
- 簡易セレクター (Simple selectors):
classまたはidの要素タイプを基に、1 つ以上の要素にマッチします。 - 属性セレクター (Attribute selectors): 属性または属性値を基に 1 つ以上の要素にマッチします。
- 疑似クラス (Pseudo-classes): マウスポインターでホバーや、無効化あるいはチェックされているチェックボックスや、DOM ツリーの 1 番目の子要素といった、特定の状態にある 1 つ以上の要素にマッチします。
- 疑似要素 (Pseudo-elements): 要素との関連で特定の位置にある 1 つ以上のコンテンツパーツにマッチします。例えば、各段落の最初の語や要素の前に表示される生成されたコンテンツなどがあります。
- コンビネーター (Combinators): これは、正確にはセレクターそのものではありませんが、2 つ以上のセレクターを連結して便利に特定の選択を行う方法です。例えば、div よその直接の子孫の段落のみを選択したり、見出し要素の直後に来る段落を選択できます。
- 複数選択: これも、独立したセレクターではありません; 同じ CSS 規則に複数のセレクターをコンマで区切って記述し、1 つの宣言内容をそのセレクターで選択された要素のすべてに適用する方法です。
セレクターの記事概要
以下の 4 つの記事は、セレクターについて異なる観点で記述されています — これらは情報量が多いため、分割しました。分割したことにより、威圧感を減らし、明確なポイントを与え、学習の途中で休憩できます。記事は以下の通りです:
- Simple selectors
- Attribute selectors
- Pseudo-classes and pseudo-elements
- Combinators and multiple selectors
大切な情報を見逃さないように、まずは、簡単なセレクターから挑戦することを強く推奨します。