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] CSSで背景色と文字色を半々にする方法

どうも、べ〜やんです。 今回は、CSSで背景色と文字色が半々で入れ替わるようなデザインの作り方を紹介します。 おしゃれなデザイン 背景色と文字色が半々で入れ替わるような表現が出来ると、一段とおしゃれな …

[css] borderで枠線をつける方法

どうも、べ〜やんです。 今回はCSSで枠線を指定する方法のborderの使い方を紹介します。 borderとは borderは枠線を指定できるプロパティです。 線の種類、太さ、色などを指定してさまざま …

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

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

[CSS] 中央揃え

どうも、べ〜やんです。 今回はCSSでテキストやブロックを中央配置する方法を紹介します。 ブロックとインライン ブロック要素とインライン要素とでは中央揃えの方法が違うので、まずはブロック要素とインライ …

[超初心者] HTMLのタグ・要素

どうも、べ〜やんです。 今回は、HTMLのよく使うタグ・要素などをまとめました。 タグとは <html>、<head>、<footer>、<div>など …