結合子

子孫コンビネーター（通常は単一のスペース（" "）文字で表される）は、2 つのセレクターを結合して、最初のセレクターと一致する祖先（親、親の親、親の親の親など）要素がある場合、2 番目のセレクターと一致する要素が選択されるようにします。 子孫コンビネーターを利用するセレクターは、子孫セレクターと呼ばれます。

body article p

これらのセレクターは、他のセレクターの子孫である要素を選択します。それらは一致するように直接の子供である必要はありません。

以下の例では、要素の内部にある <p> 要素のみを .box クラスと照合しています。

子コンビネーターは、大なり記号（ > ）であり、セレクターが直接の子である要素を選択した場合にのみ一致します。階層のさらに下の子孫は一致しません。例えば、<article> 要素の直接の子である <p> 要素のみを選択するには：

article > p

次の例では、順序付けられていないリストがあり、その中にネストされているのは別の順序付けられていないリストです。子コンビネータを使用して、<ul> の直接の子である <li> 要素のみを選択し、上部の境界線を設定しています。

これを子コンビネーターとして指定している > を削除すると、子孫セレクターになり、すべての <li> 要素に赤い境界線が表示されます。

隣接する兄弟セレクター（ + ）は、階層の同じレベルにある別の要素のすぐ隣にある場合に選択します。例えば、<p> 要素の直後に来るすべての <img> 要素を選択するには：

p + img

一般的な使用例は、以下の私の例のように、見出しに続く段落で何かを行うことです。ここでは、<h1> に直接隣接する段落を探し、スタイルを設定しています。

<h1> と <p> の間に <h2> のような他の要素を挿入すると、段落がセレクタによってマッチしなくなり、要素が隣接しているときに適用される背景色と前景色が得られなくなることに気づくでしょう。

要素が直接隣接していなくても、その要素の兄弟を選択したい場合は、一般的な兄弟コンビネーター( ~ )を使うことができます。<p> 要素の後のどこかに来る <img> 要素をすべて選択するには、次のようにします。

p ~ img

以下の例では、<h1> の後に続くすべての <p> 要素を選択しています。また、ドキュメントに <div> がある場合でも、その後にある <p> が選択されています。

ドキュメントの一部を選択するために、前のレッスンで発見したセレクタをコンビネータと組み合わせることができます。 たとえば、<ul> の直接の子であるクラス "a"のリストアイテムを選択する場合、次のように使用できます。

ul > li[class="a"]  {  }

ただし、文書の特定の部分を選択する大きなセレクタのリストを作成する際には注意が必要です。マークアップの中でその要素の位置を特定してセレクタを作成しているので、CSS ルールを再利用するのは難しいでしょう。

多くの場合、単純なクラスを作成し、それを問題の要素に適用する方が適切です。つまり、ドキュメント内の何かにアクセスする必要があり、HTML にアクセスできない場合、おそらく CMS によって生成されているために、コンビネーターに関する知識は非常に役立ちます。

この記事では多くのことを取り上げましたが、最も重要な情報を覚えていますか？先に進む前に、この情報を保持しているかどうかを確認するためのテストがいくつかあります - あなたのスキルをテストするを参照してください。Test your skills: Selectors (en-US) を参照してください。

これは、セレクターに関するレッスンの最後のセクションです。次に、CSS のもう 1 つの重要な部分であるCSS ボックスモデルに進みます。

• 前のページ
• Overview: Building blocks
• 次のページ