E F【子孫 結合子】
E > F【子 結合子】
E + F【隣接兄弟 結合子】
E ~ F【一般兄弟 結合子】

メモ 外部リンク 構文 例

メモ

  • 子孫・子・隣接兄弟 (直後)・一般兄弟 (後) 要素に適用するセレクタ
  • 要素については、HTML5 リファレンス メモ 参照

構文

セレクタ説明
子孫 結合子 E F     { スタイル定義 } E要素の子孫のF要素に適用
子 結合子 E > F  { スタイル定義 } E要素の子のF要素に適用
連続指定で孫以降の要素も可能：E > F【子】 > G【孫】
隣接兄弟 結合子 E + F  { スタイル定義 } E要素の直後の兄弟F要素に適用
一般兄弟 結合子 E ~ F  { スタイル定義 } E要素の後の兄弟F要素に適用

例

【子孫 結合子】
<style>
ul.class10 li { color:red; }
ul.class11 ol { font-weight:bold; }
</style>

<ul class="class10 class11">
  <li>リスト１
  <li>リスト２
    <ol>
      <li>リスト
      <li>リスト
      <li>リスト
    </ol>
  <li>リスト３
</ul>
  • リスト１
  • リスト２
    1. リスト
    2. リスト
    3. リスト
  • リスト３ 
【子 結合子】
<style>
ul.class20 > li > ol > li { color:red; }
ul.class21 > ol { font-weight:bold; } /* 対象要素なし */
</style>

<ul class="class20 class21">
  <li>リスト１
  <li>リスト２
    <ol>
      <li>リスト
      <li>リスト
      <li>リスト
    </ol>
  <li>リスト３
</ul>
  • リスト１
  • リスト２
    1. リスト
    2. リスト
    3. リスト
  • リスト３ 
【隣接兄弟 結合子】
<style>
li.class30 + li { color:red; }
</style>

<ul>
  <li>リスト１
  <li class="class30">リスト２ (指定)
  <li>リスト３
  <li>リスト４
</ul>
  • リスト１
  • リスト２ (指定)
  • リスト３
  • リスト４ 
【一般兄弟 結合子】
<style>
li.class40 ~ li { color:red; }
</style>

<ul>
  <li>リスト１
  <li class="class40">リスト２ (指定)
  <li>リスト３
  <li>リスト４
</ul>
  • リスト１
  • リスト２ (指定)
  • リスト３
  • リスト４