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

関連記事

爆速!!Emmetを使う

どうも、べ〜やんです。 今回は、コーディングのスピードが抜群に速くできる方法のEmmetの使い方を紹介します。 Emmetとは HTMLやCSSを記述するときに全て手打ちしていると時間がかかってしまい …

[jQuery] jQueryでハンバーガーメニューを作る

どうも、べ〜やんです。 今回は、jQueryを使ってハンバーガーメニューを作る方法を紹介します。 ハンバーガーメニューとは ハンバーガーメニューとは、例えばヘッダーのメニューを隠しておいてアイコンをク …

[css] font-sizeの種類

どうも、べ〜やんです。 今回は、CSSで指定するフォントサイズの種類と簡単な使い方をまとめて紹介します。 フォントサイズの種類 フォントサイズを適当に決めてませんか?なんとなくpxだけを使ってませんか …

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

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

[CSS] white-spaceの使い方/空白・改行

どうも、べ〜やんです。 今回は、半角スペースや改行の表示を指定するプロパティのwhite-spaceを紹介します。 white-spaceとは white-spaceとはHTMLに書いた半角スペースや …