このセレクターについての最初の記事では、「単純」セレクターを学びます。これは要素の型や classid に基づいて、文書中の1つまたは複数の要素を直接選択するものです。

型セレクター(要素セレクター)

このセレクターでは、セレクター名で HTML の要素名を大文字小文字の区別なく選択するものです。これは指定された型の要素すべてを対象とするために、もっとも単純な方法です。以下の例を見てみましょう。

HTML はこちらです。

<p>どの色が好きですか?</p>
<div>青が好きです。</div>
<p>赤の方が好きです!</p>

単純なスタイルシートです。

/* すべての p 要素を赤に */
p {
  color: red;
}

/* すべての div 要素を青に */
div {
  color: blue;
}

そして、次のような結果になります。

実習: 別な要素の選択

この実習では、1つの CSS 規則のセレクターを変更して、例の中の別な要素にスタイルを適用してみましょう。複数のセレクターに規則を適用する書き方は分かりますか?

間違えた場合は、いつでも[初期化]ボタンを使って元に戻すことができます。本当に行き詰まったら、[答えを表示]ボタンで解答例を見ることができます。

クラスセレクター

クラスセレクターは、ドット('.')と、それに続くクラス名から成ります。クラス名は空白を含まない任意の値で、 HTML の class 属性に置かれています。クラス名の選択はあなた次第です。文書内の複数の要素が同じクラス値を持つことができること、単一の要素が空白で区切られた複数のクラス名を持つことができることにも注意してください。簡単な例を示します。

HTML はこちらです。

<ul>
  <li class="first done">HTML 文書を作成する</li>
  <li class="second done">CSS スタイルシートを作成する</li>
  <li class="third">互いにリンクさせる</li>
</ul>

単純なスタイルシートです。

/* "first" クラスの要素を太字に */
.first {
  font-weight: bold;
}

/* "done" クラスの要素に取り消し線を */
.done {
  text-decoration: line-through;
}

そして、以下のような結果になります。

実習: 複数のクラスの扱い

実習として、段落 (p) 要素の class 属性を変更して、複数の個別の効果を適用してみましょう。まず base-box クラス、加えて役割のクラス(editor-note または warning)、そして重要なボックスを強調したい場合は任意で important を適用してみてください。 この種の規則セットを使用して、スタイルを部品単位に構築する方法について考えてみましょう。

間違えた場合は、いつでも[初期化]ボタンを使って元に戻すことができます。本当に行き詰まったら、[答えを表示]ボタンで解答例を見ることができます。

ID セレクター

ID セレクターは、ハッシュ記号 (#) と、続いて ID に設定された名前から成ります。どの要素にも、 id 属性で固有の ID 名を設定することができます。 ID 名の選択はあなた次第です。これは単一の要素を選択する最も効率的な方法です。

重要: ID 名は文書の中で固有でなければなりません。 ID が重複したときの動作は予期しないものになります。例えば、ブラウザーによっては、最初のものだけがカウントされ、それ以外は無視されます。

簡単な例を見てみましょう。 HTML はこちらです。

<p id="polite"> — 「おはようございます。」</p>
<p id="rude"> — 「あっち行け!」</p>

単純なスタイルシートです。

#polite {
  font-family: cursive;
}

#rude {
  font-family: monospace;
  text-transform: uppercase;
}

And we get this as an output:

実習: ID で勝者の色を適用

この実習では、競技の1位、2位、3位に金、銀、銅の色をつけましょう。そのためには、 CSS の2~4番目の規則に対して、関連する要素を ID で選択する適切なセレクターを設定してください。

間違えた場合は、いつでも[初期化]ボタンを使って元に戻すことができます。本当に行き詰まったら、[答えを表示]ボタンで解答例を見ることができます。

全称セレクター

全称セレクター (universal selector) (*) は、究極のジョーカーです。これでページ内のすべての要素を選択できます。ページ内のすべての要素にスタイルを適用するために使われることもありますが、他のセレクターとの組み合わせでよく使われます(下記の 結合子 を参照してください)。

重要: 全称セレクターの使用には注意してください。これはすべての要素に適用されるので、長いウェブページに使用すると速度にかなり影響を与え、ウェブページが予想よりも遅くなることがあります。このセレクターを使用する場面は多くはありません。

例を見てみましょう。まず HTML です。

<div>
  <p>I think the containing box just needed
  a <strong>border</strong> or <em>something</em>,
  but this is getting <strong>out of hand</strong>!</p>
</div>

そして、単純なスタイルシートです。

* {
  padding: 5px;
  border: 1px solid black;
  background: rgba(255,0,0,0.25)
}

一緒にすると、以下のような結果になります。

次の記事へ向けて

セレクターの最初のチュートリアルで、最後までよくたどり着きました。セレクターの面白さが分かっていただければ幸いです。ここまでは、よく使う基本的で単純なセレクターを見てきました。 属性セレクターで、もっと高度な機能にレベルアップしましょう。

 

このモジュールの文書

 

ドキュメントのタグと貢献者

 このページの貢献者: mfuji09
 最終更新者: SphinxKnight,