セレクタ

前章に戻る
カスケーディングと継承これは、CSS Getting Started チュートリアルの第 5 章です。ここでは、スタイルを選択的に適用する方法と異なる種類のセレクタが持つ優先度について解説します。前回、サンプルドキュメント内のタグにいくつかの属性を追加し、サンプルスタイルシートでそれらの属性を利用しました。

解説: セレクタとは

CSS は、独自の用語を用いて CSS 言語を説明します。以前、このチュートリアルであなたのスタイルシートに次のような行を加えました:

strong {
  color: red;
}

CSS 用語では、この行全体を ルール と呼びます。この strong から始まるルールを セレクタ といいます。このセレクタは、ルールを適用する DOM 内の要素を指定します。

詳細情報

波括弧の中身を宣言といいます。

color キーワードの部分を プロパティ といい、red の部分を値といいます。

プロパティと値の組の後のセミコロンは、同じ宣言内に書かれる次のプロパティと値の組との区切りです。

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

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

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

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

クラスセレクタ

要素の class 属性は、要素を名前の付いたクラスに所属させるために使用します。クラスに付ける名前は、あなたが自由に選べます。ドキュメント内の複数の要素が同じ class 値を持てます。

スタイルシートでクラス名をセレクタに利用する時は、クラス名の前にピリオドを付けます (例: .className)。

ID セレクタ

要素の id 属性は、要素に ID に割り当てるために使用します。ID に付ける名前は、あなたが自由に選べますが、そのドキュメント内で 1 個のユニークなものでなくてはなりません。

スタイルシートで ID をセレクタに利用する時は、ID の前にナンバー記号 (#) を付けます (例: #idName)。

例

この HTML タグは、class 属性と id 属性の両方をもちます:

<p class="key" id="principal">

id 値の principal は、ドキュメント内で 1 個のユニークなものですが、class 名の key は、ドキュメント内の他のタグでも使用できます。

CSS スタイルシートの次のルールは、クラス key を持つすべての要素の文字を緑色にします (適用される要素が、すべて <p> 要素であるとは限りません)。

.key {
  color: green;
}

次のルールは、id principal を持つ 1 個の要素の文字を太字にします:

#principal {
  font-weight: bolder;
}

属性セレクタ

セレクタは、2 個の特別な属性 class と id に制限されません。角括弧を使用して他の属性を指定できます。括弧内に属性名を書き、オプションとしてマッチ演算子と値を続けて書きます。さらに、値の後に " i" フラグを加えることで、マッチングの大文字と小文字を区別しないようにできます。ただし、この機能は、まだすべてのブラウザでサポートされていません。例:

[disabled]: "disabled" 属性を持つすべての要素を選択します。
[type='button']: "type" 属性の値に "button" を持つ要素を選択します。
[class~=key]: "key" 属性を持つ要素を選択します (ただし、"keyed", "monkey", "buckeye" ではありません)。.key と同等の動作です。
[lang|=es]: スペイン語が指定されている要素を選択します。これは、"es" と "es-MX" を含みますが、"eu-ES" (バスク語) は含みません。
[title*="example" i]: title 属性の値に "example" を含む要素を、値の大文字小文字を無視して選択します。"i" フラグをサポートしないブラウザでは、このセレクタはどの要素にもマッチしないでしょう。
a[href^="https://"]: リンク先の URL が "https://" で始まる安全なリンクを選択します。
img[src$=".png"]: src URL の末尾が ".png" で終わる PNG 画像を選択します。URL の末尾が ".png" でない PNG 画像は選択されません (URL にクエリ文字列が含まれる場合など)。

疑似クラスセレクタ

CSS 疑似クラスは、要素の特殊な状態を指定するキーワードをセレクタに追加したものです。例えば、:hover は、セレクタで指定された要素にユーザがポインタを合わせた時にスタイルが適用されます。

疑似クラスは、疑似要素と一緒に使用します。これは、関連するドキュメントツリーのコンテンツの要素だけでなく、ナビゲータの履歴 (例えば :visited) やコンテンツの状態 (フォーム要素の :checked)、マウスの位置 (:hover は要素上にマウスポインタがあるかどうか知ることができます) など、関連する外部因子にもスタイルを適用できます。セレクタの完全な一覧は、CSS3 Selectors working spec を参照してください。

構文

selector:pseudo-class {
  property: value;
}

疑似クラスの一覧

解説: 限定性

複数のルールが同じ要素にマッチするセレクタを持つことがあります。プロパティが 1 個のルール内でだけ与えられている場合、衝突は無く、プロパティが要素にセットされます。しかし、複数のルールが 1 個の要素に同じプロパティを適用する場合、CSS は、より限定されたセレクタを持つルールに優先権を与えます。ID セレクタは、クラスセレクタや疑似クラス、属性セレクタよりも限定的です。これは、タグや疑似要素セレクタよりも限定的にします。

詳細情報

より限定的なセレクタにするために、セレクタを組み合わせることもできます。例えば、.key セレクタは、クラス名に key を持つすべての要素を選択します。p.key セレクタは、クラス名に key を持つ <p> 要素のみを選択します。

スタイルシートに、同じ指定がされた衝突を起こすルールが書かれている場合、CSS は、スタイルシートの後方に書かれたルールに優先権を与えます。

衝突を起こすルールで問題が起こる時は、いずれかのルールを限定的にして優先権を与えてみてください。それができない場合は、いずれかのルールをスタイルシートの後方へ移動して優先権を与えてみてください。

解説: 関係ベースのセレクタ

CSS には、要素間の関係を基にした要素の選択方法がいくつかあります。これらの方法で、セレクタをより限定的にできます。

一般的な関係ベースのセレクタ
セレクタ	選択要素
`A E`	A 要素の子孫である任意の E 要素 (これは、子要素または孫要素、さらにそれ以降の子要素も含みます。)
`A > E`	A 要素の子である任意の E 要素 (つまり、直接の子孫)
`E:first-child`	その親要素の最初の子である任意の E 要素
`B + E`	B 要素の次の兄弟である任意の E 要素 (これは、同じ親要素の次の子です。)

これらを組み合わせて複雑な関係を明示できます。

また、"任意の要素" を意味する * (アスタリスク) 記号を使用できます。

例

この HTML テーブルは id 属性を持ちますが、その行とセルは個別の識別子を持ちません:

<table id="data-table-1">
...
<tr>
<td>Prefix</td>
<td>0001</td>
<td>default</td>
</tr>
...

次のルールは、各行の最初のセルに下線を引き、各行の最初のセルの兄弟要素 (この例では 2 番目のセル) に取り消し線を引きます。これらは、ドキュメント内の ("data-table-1" の id 属性を持つ) 特定のテーブルにのみ影響します:

    #data-table-1 td:first-child {text-decoration: underline;}
    #data-table-1 td:first-child + td {text-decoration: line-through;}

結果は次のようになります:

Prefix

~~0001~~

default

詳細情報

通常の方法では、より限定的なセレクタを作成した場合、その優先度が上がります。

これらのテクニックを使用した場合、ドキュメント内の数多くのタグに class 属性または id 属性を指定する必要がなくなるでしょう。代わりに CSS のセレクタで動作します。

スピードが重要となる大きな設計では、要素間の関係に依存する複雑なルールを避けることにより、スタイルシートをより効果的に作成できます。

テーブルについての他の例は、CSS リファレンスページの Tables を参照してください。

実習: class セレクタと ID セレクタを使う

あなたの HTML ファイルを編集しましょう。<p> 要素の段落をコピー＆ペーストして複製してください。

そして、以下のように、最初のコピーには id 属性と class 属性を追加し、2 番目のコピーには id 属性だけを追加してください。または、ファイル全体を再びコピー＆ペーストして次のものと差し替えてください:

<!doctype html>
<html>
  <head>
  <meta charset="UTF-8">
  <title>Sample document</title>
  <link rel="stylesheet" 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 ファイル内の行を並べ替えてみてください。それが何も影響しないことが分かるでしょう。

クラスセレクタの .carrot と .spinach は、タグセレクタの strong よりも優先度が高いです。

ID セレクタの #first は、クラスセレクタとタグセレクタよりも優先度が高いです。

挑戦しよう

HTML ファイルを変更せずに、CSS ファイルに 1 個のルールを追加、すべての最初の文字色は変えずに、2 番目の段落の他のすべての文字を青色にしましょう:

Cascading Style Sheets

Cascading Style Sheets
それでは、追加したルールのみを変更して (他は変更せずに)、最初の段落も青色にしましょう:

Cascading Style Sheets

Cascading Style Sheets

解答例

以下のように、#second の ID セレクタを持つルールと color: blue; の宣言を追加します:
```
#second { color: blue; }
```
より限定的なセレクタである p#second でも動作します。
新しいルールのセレクタを、p を使用して、タグセレクタになるように変更します:
```
p { color: blue; }
```

解答を隠す

この問題の解答例を見る

実習: 疑似クラスセレクタを使う

次の内容の HTML ファイルを作成してください:

<!doctype html>
<html>
  <head>
  <meta charset="UTF-8">
  <title>Sample document</title>
  <link rel="stylesheet" href="style1.css">
  </head>
  <body>
    <p>Go to our <a class="homepage" href="https://www.example.com/" title="Home page">Home page</a>.</p>
  </body>
</html>

それでは、CSS ファイルを編集しましょう。中身を次のものと置き換えてください:

a.homepage:link, a.homepage:visited {
  padding: 1px 10px 1px 10px;
  color: #fff;
  background: #555;
  border-radius: 3px;
  border: 1px outset rgba(50,50,50,.5);
  font-family: georgia, serif;
  font-size: 14px;
  font-style: italic;
  text-decoration: none;
}

a.homepage:hover, a.homepage:focus, a.homepage:active {
  background-color: #666;
}

ファイルを保存し、ブラウザで再読み込みすると次の結果になります (リンクにマウスポインタを合わせると効果が分かります):

Go to our Home page

実習: 関係ベースのセレクタと疑似クラス

関係ベースのセレクタと疑似クラスで、複雑なカスケードアルゴリズムを作成できます。これは、一般的に使用されるテクニックです。例えば、純粋な CSS ドロップダウンメニュー (JavaScript なしで、CSS のみを使用したもの) を作成するために利用できます。このテクニックの本質は、次のようなルールを作ることにあります:

div.menu-bar ul ul {
  display: none;
}

div.menu-bar li:hover > ul {
  display: block;
}

HTML 構造に適用するには、次のようにします:

<div class="menu-bar">
  <ul>
    <li>
      <a href="example.html">Menu</a>
      <ul>
        <li>
          <a href="example.html">Link</a>
        </li>
        <li>
          <a class="menu-nav" href="example.html">Submenu</a>
          <ul>
            <li>
              <a class="menu-nav" href="example.html">Submenu</a>
              <ul>
                <li><a href="example.html">Link</a></li>
                <li><a href="example.html">Link</a></li>
                <li><a href="example.html">Link</a></li>
                <li><a href="example.html">Link</a></li>
              </ul>
            </li>
            <li><a href="example.html">Link</a></li>
          </ul>
        </li>
      </ul>
    </li>
  </ul>
</div>

完成したものは、CSS ベースのドロップダウンメニューの例をご覧ください。

次は何？

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

解説: セレクタとは

クラスセレクタ

ID セレクタ

属性セレクタ

疑似クラスセレクタ

疑似クラスの一覧

解説: 限定性

解説: 関係ベースのセレクタ

実習: class セレクタと ID セレクタを使う

実習: 疑似クラスセレクタを使う

実習: 関係ベースのセレクタと疑似クラス

次は何？

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