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

メモ

構文

セレクタ説明
子孫 結合子 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>リスト1
  <li>リスト2
    <ol>
      <li>リスト
      <li>リスト
      <li>リスト
    </ol>
  <li>リスト3
</ul>
  • リスト1
  • リスト2
    1. リスト
    2. リスト
    3. リスト
  • リスト3
子 結合子】
<style>
ul.class20 > li > ol > li { color:red; }
ul.class21 > ol { font-weight:bold; } /* 対象要素なし */
</style>

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

<ul>
  <li>リスト1
  <li class="class30">リスト2 (指定)
  <li>リスト3
  <li>リスト4
</ul>
  • リスト1
  • リスト2 (指定)
  • リスト3
  • リスト4
一般兄弟 結合子】
<style>
li.class40 ~ li { color:red; }
</style>

<ul>
  <li>リスト1
  <li class="class40">リスト2 (指定)
  <li>リスト3
  <li>リスト4
</ul>
  • リスト1
  • リスト2 (指定)
  • リスト3
  • リスト4

関連