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

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

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

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

[css] 横並び、flexboxの使い方

どうも、べ〜やんです。 今回は、CSSで要素を横並びにする方法のflexboxの基本的な使い方を紹介します。 flexboxとは? 要素を横並びに配置する方法のひとつに、flexboxがあります。 f …

[CSS] overflowの使い方

どうも、べ〜やんです。 今回はCSSのoverflowの使い方を紹介します。 テキストが長いけどスペースを大きく取りたくない場合などに便利です。 overflowとは overflowは要素からはみ出 …

アイコンを簡単に表示できる!Icongram

どうも、べ〜やんです。 今回は、簡単にアイコンを表示できるサービス『Icongram』を紹介します。 Icongramとは 引用元:Icongram Icongramは9つのアイコンライブラリからAP …

[超初心者] CSSの書き方

どうも、べ〜やんです。 今回はCSSに付いて超基本をざっくりまとめます。 CSSでできること CSSはwebページの見た目を整える働きがあります。背景色や文字色、デザインの位置や大きさの変更など、様々 …