隣接セレクタ・間接セレクタ・直下セレクタでCSSを記述したい

隣接セレクタ・間接セレクタ・直下セレクタとは？

隣接セレクタ

要素を結合子「+」でつなぎます。例えば要素A+要素Bの場合、要素Aと同じ階層にあるすぐ後の要素Bにスタイルがつきます。

間接セレクタ

要素を結合子「~」でつなぎます。例えば要素A~要素Bの場合、要素Aと同じ親に含まれる要素Bにスタイルがつきます。

直下セレクタ

要素を結合子「>」でつなぎます。例えば要素A>要素Bの場合、要素Aの直下の要素Bにスタイルがつきます。

隣接セレクタ・間接セレクタ・直下セレクタの使用例

• 会社紹介
  • 理念
  • 会社概要
  • 沿革
• サービス
  • 販売
  • 営業
  • 製造
• お問い合わせ
  • メール
  • 電話
  • FAX
  • LINE

• <ul class="selector-sitemap">
    <li class="menu01">会社紹介
      <ul class="sub-menu01">
        <li class="child" id="child01">理念</li>
        <li class="child">会社概要</li>
        <li class="child">沿革</li>
      </ul>
    </li>
    <li class="menu02">サービス
      <ul class="sub-menu02">
        <li class="child" id="child02">販売</li>
        <li class="child">営業</li>
        <li class="child">製造</li>
      </ul>
    </li>
    <li class="menu03">お問い合わせ
      <ul class="sub-menu03">
        <li class="child pc">メール</li>
        <li class="child">電話</li>
        <li class="child">FAX</li>
        <li class="child pc">LINE</li>
      </ul>
    </li>
  </ul>

   

• <style>
  /*隣接セレクタ*/
  #child01 + .child {
    color:red;
    font-weight:bold;
  }
  /*間接セレクタ*/
  #child02 ~ .child {
  color: #fff;
  background: #bfbfbf;
  padding: 1px 10px;
  text-align:center;
  }
  /*直下セレクタ*/
  .menu03 > .sub-menu03 .pc  {
    border-bottom:1px dashed #ccc;
    font-weight:bold;
  }
  </style>