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

2021-01-24

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

隣接セレクタ: 要素を結合子「+」でつなぎます。例えば要素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>