MDN wants to learn about developers like you: https://www.surveygizmo.com/s3/5171903/MDN-Learn-Section-Survey-Recruiter-Pathway

セレクタに関する最後の記事では、コンビネーターとセレクタのグループについて詳しく説明します。複数のセレクタを組み合わせてさらに有用な選択機能を得る2つの方法です。

コンビネーターとセレクタリスト

一度に1つのセレクタを使用すると便利ですが、状況によっては効率が悪くなることがあります。CSS セレクタは、それらを組み合わせてきめ細かい選択を実行するとさらに便利になります。CSS には、要素間の関係に基づいて要素を選択する方法がいくつかあります。これらの関係は、コンビネーターを使って次のように表現されます (A と B は、上記のセレクタを表します)。

名前 構文 セレクト
セレクタリスト A, B A または B、あるいはその両方と一致する要素 (Groups of selectors on one ruleを参照。セレクタのグループは組み合わせとは見なされません)。
子孫結合子 A B A と一致する要素の子孫である B と一致する任意の要素 (つまり、子、または子の子など)。コンビネーターは1つ以上のスペース、または符号より2倍大きいです。
子結合子 A > B A に一致する要素の直接の子である、B に一致する任意の要素
隣接兄弟結合子 A + B A に一致する要素の次の兄弟である B に一致する任意の要素 (つまり、同じ親の次の子)
一般兄弟結合子 A ~ B A と一致する要素の次の兄弟の1つである B と一致する任意の要素 (つまり、同じ親の次の子の1つ)

Combinators example

これらすべてが連携して動作する例を見てみましょう。

<table lang="en-US" class="with-currency">
  <thead>
    <tr>
      <th scope="col">Product</th>
      <th scope="col">Qty</th>
      <th scope="col">Price</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <th colspan="2" scope="row">Total:</th>
      <td>148.55</td>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <td>Lawnchair</td>
      <td>1</td>
      <td>137.00</td>
    </tr>
    <tr>
      <td>Marshmallow rice bar</td>
      <td>2</td>
      <td>1.10</td>
    </tr>
    <tr>
      <td>Book</td>
      <td>1</td>
      <td>10.45</td>
    </tr>
  </tbody>
</table>

それでは、次のスタイルシートを使用しましょう。

/* Basic table setup */
table {
  font: 1em sans-serif;
  border-collapse: collapse;
  border-spacing: 0;
}

/* All <td>s within a <table> and all <th>s within a <table>
   Comma is not a combinator, it just allows you to target
   several selectors with the same CSS ruleset */
table td, table th {
  border : 1px solid black;
  padding: 0.5em 0.5em 0.4em;
}

/* All <th>s within <thead>s that are within <table>s */
table thead th {
  color: white;
  background: black;
}

/* All <td>s preceded by another <td>,
   within a <tbody>, within a <table> */
table tbody td + td {
  text-align: center;
}

/* All <td>s that are a last child,
   within a <tbody>, within a <table> */
table tbody td:last-child {
  text-align: right
}

/* All <th>s, within a <tfoot>s, within a <table> */
table tfoot th {
  text-align: right;
  border-top-width: 5px;
  border-left: none;
  border-bottom: none;
}

/* All <td>s preceded by a <th>, within a <table> */
table th + td {
  text-align: right;
  border-top-width: 5px;
  color: white;
  background: black;
}

/* All pseudo-elements "before" <td>s that are a last child,
   appearing within elements with a class of "with-currency" that
   also have an attribute "lang" with the value "en-US" */
.with-currency[lang="en-US"] td:last-child::before {
  content: '$';
}

/* All pseudo-elements "after" <td>s that are a last child,
   appearing within elements with the class "with-currency" that
   also have an attribute "lang" with the value "fr" */
.with-currency[lang="fr"] td:last-child::after {
  content: ' €';
}

これにより、次のような非常に優れたテーブルスタイルが得られました。

アクティブラーニング: 自身のコンビネーターを書く

上記の例は、コンビネーターで達成し始めることができる種類の複雑さを示すために設計されました。このアクティブラーニングでは、コンビネーターを含む自身の、もっと単純なセレクタのいくつかを書いてもらいます。この課題では、ルール2〜4にセレクタを追加して、次のことを行います。

  1. スタイルリンク。ただし、番号なしリストの中にあるリンクのみ
  2. 番号なしリスト内のリンクにスタイルを設定します。ただし、それらがホバーされているときだけです
  3. 最上位の見出しの直後に来る段落だけにスタイルを適用します

間違えた場合は、リセットボタンを使用していつでもリセットできます。本当に動かなくなったら、Show solution ボタンを押して答えを確認してください。

1つのルール上のセレクタのグループ

これまでにいくつもの実例を見てきましたが、明確にするためにそれを詳しく説明しましょう。選択した要素の複数のセットに同じ規則を同時に適用するために、カンマで区切ってセレクタのグループを書くことができます。例えば:

p, li {
  font-size: 1.6em;
}

またはこれです:

 h1, h2, h3, h4, h5, h6 {
  font-family: helvetica, 'sans serif';
}

重要: 単一のセレクタがブラウザでサポートされていない場合は、セレクタリスト全体が無視されます。

:is()  擬似クラスはこの制限の影響を受けませんが、執筆時点ではまだ広くサポートされていません。

次は何ですか

おめでとうございます - あなたは CSS セレクタについて学ぶ非常に長い旅の終わりに来ました。最も熟練した Web 開発者でさえ、セレクタを使用して何が可能かに驚いています。ただし、すべてのオプションを覚えていなくても気にしないでください。メインのセレクタページをブックマークし、必要に応じて参照してください。

次回の記事では、もう1つ非常に重要な基本的な CSS トピック、つまりプロパティが持つことができる値の種類、長さ、色、またはその他の必要な値の表現にどのような単位が関係しているかについて説明します。CSS の値と単位を調べてみましょう。

このモジュール

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

このページの貢献者: silverskyvicto, mdnwebdocs-bot
最終更新者: silverskyvicto,