要素・クラス・ID によるセレクター

This translation is incomplete. Please help translate this article from English

このレッスンでは、利用できる最も簡単にみえるセレクタをとりあげます。これは今後あなたが作業でよく使うことになります。

前提条件: 基本的なコンピューターリテラシー、基本的なソフトウェアがインストールされていること、ファイルの扱い、HTML の基本(HTML 入門)および CSS に関するアイデア(CSS の第一歩)に関する基本的な知識を得ている。
目的: CSS をドキュメントに適用するためのさまざまな CSS セレクターについて学ぶ。

タイプセレクタ

タイプセレクタタグ名セレクタ または 要素セレクタ を参照します。これはあなたのドキュメント中のタグまたは要素を選択するからです。次の例で span, em それに strong セレクタを使用します。そのため <span>, <em><strong> の要素はスタイル修飾されます。

CSS ルールを追加して <h1> 要素を選択してその色を青に変えましょう。

ユニバーサルセレクタ

ユニバーサルセレクターはアステリスク (*) で表します。またこれはドキュメントの全て または親要素に含まれる全ての要素( これは例えばそれが 連なっている、他の要素やそれらの子要素に連なっている 要素全て) を選択します。  次の例では全ての要素から margin を削除しています。これはブラウザによって追加されたデフォルトのスタイルの代りに、 章立てやパラグラフの margin を消してそれぞれを近く配置させます。これにより個々のパラグラフが見分けがつかなくなってしまいます。

この種類の動作はしばしば「スタイルシートのリセット」と呼び、ブラウザのスタイル指摘を取り消します。ある一点ではとてもよくあります。しかし全てのスタイルを削除することは、つまり、スタイルを新しく設定しなおす作業があるということです。そのため特定の状況ではユニバーサルセレクターの使用には注意が必要です。これを次に説明します。

ユニバーサルセレクタを使用してセレクターの可読性をあげる

ユニバーサルセレクターの使用方法のひとつに、セレクターを読みやすくし、その動作を明かにするのものがあります。例えば、<article> 要素の全ての子要素を選択したかったとします。それがなんの要素であったとしてもそれを bold 指定したいとします。:first-child セレクタを使うことができます。これはあとの 疑似クラスと疑似要素 のコースで詳細を学びますが、 <article> 要素セレクターの後ろで指定します。

article :first-child {

}

しかしこれは、article:first-childで混乱しかねません。他の要素の第一子要素の<article> 要素を選択してしまうのです。

この混乱を避けるために、:first-child にユニバーサルセレクターを追加します。これで何を選択しているかが明らかです。<article> 要素の第一子要素にあたるすべての要素を選択しています。

article *:first-child { 

} 

クラスセレクター

クラスセレクターの名前はピリオド (.) から始まります。そしてそのクラスが適用されている、ドキュメント内の全てを選択します。次の例では、 .highlight というクラスを作成し、ドキュメントのいくつかの場所に適用します。このクラスが適用された全ての要素をハイライトします。

特定要素のクラスを対象にする

特定クラスが適用された特定要素を対象にするセレクターを作成できます。次の例では、highlight クラスの <span> をハイライトしますが、highlight クラスの <h1> 見出しを異なるようにハイライトします。対象にしたい要素にタイプセレクターを使用して実現できます。クラスの後ろに指定を追加しますが、クラスとの間にホワイトスペースをいれません。

この方法はCSSが再利用しにくくなります。というのも、クラスが特定の要素に対してのみ適用されることがあり、別の要素にルールを適用させると決定した場合他のセレクターを追加する必要があるようになるからです。

複数のクラスが適用された要素を対象にする

複数のクラスを一つの要素に適用できます。それらを個別に選択することもすべてのクラスがあるものだけを選択することもできます。この方法が便利なのは、あなたのサイトでそれぞれ別の方法でコンポーネントを組み立てるときです。

次の例は、ノートのある <div> です。灰色の境界はそのボックスが notebox クラスもっている場合にのみ適用されます。もしそれが warningdanger クラスも持っていた場合 border-color を変更します。

ブラウザに、全てのクラスが存在する要素だけ一致するように指定するには、それらのクラスをすべて繋げて指定します。クラスの間に半角スペースをいれません。

IDセレクター

ID セレクターは ピリオドではなく # で始めますが、それ以外は基本的にクラスセレクターと同じです。しかし ID はそのドキュメントの名にはただ一度しか使用できません。IDセレクターはその id が設定されている要素を選択します。要素をIDの両方に一致するものだけを対象にする場合、IDセレクターをタイプセレクターの前に置くことができます。これを次の例で確認しましょう。:

: このレッスンの特例で学んだように ID は非常に特別なもので、他のセレクターを上書きすることがあります。これは対応が難しくなることがあります。多くの場合、IDを使用する代りにクラスを追加するほうが望ましいです。しかしその要素を対象にする方法がIDを使うしないような場合、例えばそのマークアップにあなたがアクセスできず、編集できないような場合、この方法を使用できます。

次の記事

属性セレクター によるセレクターを調べます。

このモジュール

  1. カスケードと継承
  2. CSS セレクター
  3. ボックスモデル
  4. 背景と枠線
  5. テキスト方向の操作
  6. 要素のはみ出し(オーバーフロー)
  7. CSS の値と単位
  8. CSS によるサイズ設定
  9. 画像・メディア・フォーム要素
  10. 表のスタイリング
  11. CSS のデバッグ
  12. CSS の整理