cocoonサンプルビジネスサイトのサーバの凍結解除しました。ご不便をおかけしました。

【初心者CSS】間接セレクタ・隣接セレクタ・直下セレクタまとめ

WEB
スポンサーリンク

CSSの間接セレクタ・隣接セレクタ・直下セレクタ、って知ってますか?
知ってる方はここ見なくて大丈夫です。
ちなみに私は見たことはあるけど知らないレベルです。

間接セレクタ・隣接セレクタ・直下セレクタとはなにか、使い方などをサンプル付きでまとめておきます。

 

間接セレクタ

ある要素以降の要素を指定するためのセレクタです。

 

それで何が便利かというと、見出しが繰り返し出てくる場合、最初の見出しに上マージンは要らないけど二つ目以降の見出しには広めのマージンが欲しい!!ってときです。
これね、けっこうありますからね!

これはh3見出しのいっこめはマージンなし、2個目以降は上マージンを50pxとってます。
間接セレクタは要素が飛んでも効くので、間にh4見出しはさんでますがその下のh3見出しはちゃんとマージンが取られてます。

h3見出し

本文本文本文本文本文本文本文本文本文

h3見出し

本文本文本文本文本文本文本文本文本文

h3見出し

h4見出し

本文本文本文本文本文本文本文本文本文

h3見出し

h4見出し

本文本文本文本文本文本文本文本文本文

HTMLサンプル

<h3>h3見出し</h3>
<p>本文本文本文本文本文本文本文本文本文</p>
<h3>h3見出し</h3>
<p>本文本文本文本文本文本文本文本文本文</p>
<h3>h3見出し</h3>
<h4>h4見出し</h4>
<p>本文本文本文本文本文本文本文本文本文</p>
<h3>h3見出し</h3>
<h4>h4見出し</h4>
<p>本文本文本文本文本文本文本文本文本文</p>

CSSサンプル

h3 ~ h3 { margin-top: 50px; }

 

これは定義つきリストのdtいっこめはマージンなし、2個目以降のdtは上マージンを50pxとってます。

定義つきリスト
なんかせつめいなんかせつめいなんかせつめいなんかせつめい
定義つきリスト
なんかせつめいなんかせつめいなんかせつめいなんかせつめい
定義つきリスト
なんかせつめいなんかせつめいなんかせつめいなんかせつめい

CSSサンプル

dt ~  dt { margin-top: 50px; }

 

隣接セレクタ

ある要素のとなりの要素を指定するためのセレクタです。
h4見出しの隣のpにだけ赤い色をつけています。

h3見出し

本文本文本文本文本文本文本文本文本文

h3見出し

本文本文本文本文本文本文本文本文本文

h3見出し

h4見出し

本文本文本文本文本文本文本文本文本文

h3見出し

h4見出し

本文本文本文本文本文本文本文本文本文

CSSサンプル

h4 + p { color:red; }

 

直下セレクタ

ある要素の直下の要素を指定するためのセレクタです。
「one」のなかに「two」が入れ子になっています。
「one」直下のh3だけ赤くなっています。
「two」のなかにもh3がありますが、直下ではないので赤くならないんですね。

h3見出し

本文本文本文本文本文本文本文本文本文

h3見出し

本文本文本文本文本文本文本文本文本文

h3見出し

本文本文本文本文本文本文本文本文本文

h3見出し

本文本文本文本文本文本文本文本文本文

h3見出し

本文本文本文本文本文本文本文本文本文

h3見出し

本文本文本文本文本文本文本文本文本文

HTMLサンプル

<div class="one">
  <h3>h3見出し</h3>
  <p>本文本文本文本文本文本文本文本文本文</p>
  <h3>h3見出し</h3>
  <p>本文本文本文本文本文本文本文本文本文</p>
  <h3>h3見出し</h3>
  <p>本文本文本文本文本文本文本文本文本文</p>
    <div class="two">
      <h3>h3見出し</h3>
      <p>本文本文本文本文本文本文本文本文本文</p>
      <h3>h3見出し</h3>
      <p>本文本文本文本文本文本文本文本文本文</p>
    </div>
  <h3>h3見出し</h3>
  <p>本文本文本文本文本文本文本文本文本文</p>
</div>

CSSサンプル

.one > h3 { color:red; }

 
半角スペースで繋げると、「two」内のh3も赤くなります。

.one h3 { color:red; }

 

初心者CSS、間接セレクタ・隣接セレクタ・直下セレクタまとめ

セレクタを使えるようになると、いちいちこまかくクラス指定しなくてよくなるのでソースがすっきりしますよー。
いまだにどれがなんだか混乱する時がありますが…

コメント

タイトルとURLをコピーしました