Skip to main content

Visit Mozilla.org

CSS:Getting Started:Selectors

出典: MDC



この文書では、どのようにすればスタイルを選択的に適用できるかや、異なるセレクタがどのように異なる優先度をもつようになるかについて解説します。

前回、サンプルにあるタグにいくつかの属性を指定し、スタイルシートでそれらの属性を利用しました。

[編集] 解説: セレクタとは

CSS はその言語について説明するのに、独特の専門用語を利用しています。このチュートリアルでは、以前次のような行を加えたと思います。 

strong {color: red;}

CSS 用語ではこの行全体を ルール と呼びます。このルールは、strong から始まり、これを セレクタ といいます。そして、セレクタにより DOM のなかのどのエレメントへルールを適用するかを指定します。

詳細情報
ここで、この 宣言 についてより詳しくみます。

color キーワードは プロパティ で、red は 値 です。

プロパティーと値のペアの後ろにあるセミコロンは、同じ宣言の中の異なるプロパティと値の組を分けるためのものです。

このチュートリアルでは、strong を タグ のセレクタとして扱います。 ただし、CSS 仕様では、これは 型 のセレクタです。

チュートリアルのこのページでは、CSS の中で利用できるセレクタについてより詳細に説明します。

タグ名に加えて、セレクタには属性名も利用できます。これにより、より限定された範囲にルールを適用できます。

CSS では二つの属性が特別視されています。class と id です。

タグにつけた class 属性はタグをある名前のついたクラスに所属させることを意味します。クラスには自由に名前をつけることが可能です。

スタイルシートにて、クラス名をセレクタに利用するためには、クラス名の前にピリオドが必要です。

タグにある固有 ID を適用する場合は id 属性を利用してください。名前は自由に付けられますが、一つの文書の中で名前は固有でなくてはなりません。

スタイルシートにて、id 名をセレクタに利用するためには、名前の前にシャープ (#) が必要です。

Examples
この HTML タグは class 属性と id 属性の両方をもちます : 
<P class="key" id="principal">

ID principal は文書の中で唯一でなくてはなりませんが、クラス名 key は重複可能です。

CSS スタイルシートでは、次のルールで全てのクラス key に属するエレメントを緑にできます。 (全ての P エレメントではありません。) 

.key {color: green;}

次のルールで id principal をもつエレメントを太字にできます。 

#principal {font-weight: bolder;}

一つのエレメントに対して二つ以上のルールが同じプロパティに指定されていた場合、CSS はルールを適用する優先順位をより限定されたセレクタとなっている順に設定します。id セレクタは class セレクタより限定されており、この二つは tag セレクタより限定されています。

More details
より限定するためにセレクタを組み合わせることも可能です。

たとえば、.key セレクタでは class 名が key となっている全てのエレメントを選択します。セレクタ p.key はその中でも P エレメントのみを選択します。

また、これら class と id だけが利用できるわけではありません。他の属性についても書式に従って記述できます。たとえば、セレクタ [type=button] は type 属性の値が button であるエレメントを選択します。

このチュートリアルのあとのページ (Tables) に、複数利用するより複雑なセレクタについての情報があります。

セレクタの完全な情報については、CSS (2.1) 仕様の セレクタ を参照してください。

スタイルシートに同程度に限定された衝突するルールが記述されていた場合、CSS はよりあとに指定されたルールを採用します。

衝突しているルールで何か問題があれば、優先度を変えるためにルールをより限定したものにすることを試してください。もしそれが出来ないなら、ルールをスタイルシートの最後の方に移動してください。

[編集] 実例: class と id をセレクタに利用してみる

あなたの HTML ファイルの本文をコピー・ペーストしてください。 そして、コピーした一つ目に id と class を追加し、二つ目に id を次のように追加してください。 もしくは、ファイルの中身を次のものに差し替えてください。 

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
  <meta http-equiv="Content-Type" content="text/html; 
  charset=iso-8859-1">
  <title>Sample document</title>
  <link rel="stylesheet" type="text/css" href="style1.css">
  </head>
  <body>
    <p id="first">
      <strong class="carrot">C</strong>ascading
      <strong class="spinach">S</strong>tyle
      <strong class="spinach">S</strong>heets
    </P>
    <P id="second">
      <strong>C</strong>ascading
      <strong>S</strong>tyle
      <strong>S</strong>heets
    </p>
  </body>
</html>

次に、CSS ファイルを編集します。中身を次のものに置き換えてください。 

strong {color: red;}
.carrot {color: orange;}
.spinach {color: green;}
#first {font-style: italic;}

ブラウザで再読み込みするとどうなるか分かります。

Cascading Style Sheets
Cascading Style Sheets

CSS ファイルでの指定を変更して、他の部分へ影響しないことを確認してみてください。

class セレクタ .carrot と <copde>.spinach</code> はタグセレクタ strong よりも優先度が高いです。

id セレクタ #first はクラス・タグセレクタより優先度が高いです。

試してみましょう
HTML ファイルを変更せず、CSS に一つルールを追加することで先頭の文字色は変えずに二つ目のパラグラフの他の文字色を青に変更しましょう。
Cascading Style Sheets
Cascading Style Sheets

追加したルールのみを変更して、一つ目のパラグラフの文字も青くしましょう。

Cascading Style Sheets
Cascading Style Sheets


[編集] 次は ?

もし、この文書の内容を難しいと思ったり、コメントを付け加えたい場合、議論 ページ (英語版) までお願いします。

あなたのスタイルシートはだんだん複雑になってきました。 次では CSS を読みやすくする方法を解説します。 読みやすい CSS

"http://developer.mozilla.org/ja/docs/CSS:Getting_Started:Selectors" より作成