セレクタ

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

解説: セレクタとは

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

strong {
  color: red;
}

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

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

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

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

クラスセレクタ

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

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

ID セレクタ

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

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

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

.key {
  color: green;
}

#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;
} 

疑似クラスの一覧

• :link
• :visited
• :active
• :hover
• :focus
• :first-child
• :last-child
• :nth-child
• :nth-last-child
• :nth-of-type
• :first-of-type
• :last-of-type
• :empty
• :target
• :checked
• :enabled
• :disabled

解説: 限定性

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

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

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

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

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

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

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

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

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

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

1. あなたの HTML ファイルを編集しましょう。<p> 要素の段落をコピー＆ペーストして複製してください。
2. そして、以下のように、最初のコピーには 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>
   

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

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

4. ファイルを保存し、ブラウザで再読み込みすると次の結果になります:

   Cascading Style Sheets

   Cascading Style Sheets

   CSS ファイル内の行を並べ替えてみてください。それが何も影響しないことが分かるでしょう。

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

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

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

1. 次の内容の 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>
   

2. それでは、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;
   }
   

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

   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