
隣接セレクタ・間接セレクタ・直下セレクタとは?
- 隣接セレクタ
- 要素を結合子「+」でつなぎます。例えば要素A+要素Bの場合、要素Aと同じ階層にあるすぐ後の要素Bにスタイルがつきます。
- 間接セレクタ
- 要素を結合子「~」でつなぎます。例えば要素A~要素Bの場合、要素Aと同じ親に含まれる要素Bにスタイルがつきます。
- 直下セレクタ
- 要素を結合子「>」でつなぎます。例えば要素A>要素Bの場合、要素Aの直下の要素Bにスタイルがつきます。
隣接セレクタ・間接セレクタ・直下セレクタの使用例
-
123456789101112131415161718192021222324<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>
-
12345678910111213141516171819<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>