[CSS] 隣接・間接・直下セレクタの使い方

どうも、べ〜やんです。

今回は、CSSで隣接・間接・直下セレクタを指定する方法を紹介します。

隣接・間接・直下セレクタ

隣接・間接・直下セレクタを指定するには、要素同士をそれぞれの結合子で結んで使用します。

隣接・間接・直下セレクタを指定すれば余計なクラスを作成しなくていいですね。

今回使用するHTML↓

<div class="content item">text</div>
<div class="item">text</div>
<div class="item">text</div>
<div class="item">text</div>
<div class="cover">
  <div class="item">text</div>
  <div class="item">text</div>
</div>
<div class="item">text</div>

隣接

隣接セレクタとは隣あった要素の事で、結合子「 + 」で要素を繋いで指定します。

例えば.content + .item{}とすれば、複数あるitemの中でcontentの隣のitemだけを指定できます。

.content + .item {
  
}

間接

間接セレクタとは、ある要素と同じ親要素に属する要素の事で、結合子「 ~ 」で要素を繋いで指定します。

例えば、.content ~ .item {}とすれば、親要素にcontentクラスをもつitemクラスを指定できます。

隣接セレクタと違い隣あっていなくても、同じ階層であれば適用されます。

.content ~ .item {
  
}

直下

直下セレクタとは、ある要素の直下にある要素の事で、結合子「 > 」で要素を繋いで指定します。

例えば、.cover > .item {}とすれば、複数あるitemの中でcoverの直下にあるitemのみを指定できます。

.cover > .item {
  
}

おわりに

今回は、CSSで隣接・間接・直下セレクタを指定する方法を紹介しました。

クラス名をたくさん考えるのが嫌いなので、隣接・間接・直下セレクタも使いこなしていきたいです。