CODING

[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の中でcontentitemだけを指定できます。

.content + .item {
  
}

See the Pen RwwvrpO by beeyan (@orientado) on CodePen.


間接


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

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

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

.content ~ .item {
  
}

See the Pen GRRzoQK by beeyan (@orientado) on CodePen.


直下


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

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

.cover > .item {
  
}

See the Pen JjjxGZm by beeyan (@orientado) on CodePen.


おわりに


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

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



-CODING
-,

執筆者:


comment

関連記事

[CSS] 変化Transitionの使い方

どうも、べ〜やんです。 今回は、変化の詳細を指定するTransitionを紹介します。 CSSだけで設定できるので初心者の方にもおすすめですよ。 Transitionとは transitionとは:h …

[CSS] :beforeと:afterでハンバーガーメニューを作る

どうも、べ〜やんです。 今回は、:beforeと:afterでハンバーガーメニューを作る方法を紹介します。 :beforeと:afterを使った方法 以前spanを使ったハンバーガーメニューの作り方も …

[HTML] リストの作り方ul・ol・liタグ

どうも、べ〜やんです。 今回はHTMLでリストや箇条書きをざっくり作る方法を紹介します。 リストとは ul・ol・liタグを使うとリストや箇条書きを作ることができます。 目次や手順、メニュー、スライド …

[jQuery] jQueryのアコーディオンの作り方

どうも、べ〜やんです。 今回は、jQueryでのアコーディオンの作り方を紹介したいと思います。 アコーディオンとは よくメニューバーやQ&Aなどで使われているクリックすると、楽器のアコーディオ …

[超初心者] HTMLとは

どうも、べ〜やんです。 webデザインやプログラミングを学びはじめたとき、最初にHTMLとCSSから学ぶ人が多いのではないでしょうか?私も一番最初にHTMLから学びました。ということで、今回はHTML …