知っておくと便利なcssの小技 part16 （セレクタの使い方編）

HTML / CSS / JavaScript

今回は知っておくと便利なcssの小技 part16 セレクタの使い方編です。

バックナンバー

子セレクタとは、対象の親要素の直下にある子要素に対してのみスタイルを適用するセレクタです。
孫要素は対象になりません。

今回は親要素の直下の子要素に対してのみ、文字を赤色にしてみます。

DEMO

HTML

  <article id="contents">
    <p>親要素の範囲</p>
    <section>
      <p>孫要素の範囲</p>
    </section>
  </article>

<p>親要素の範囲</p>

<p>孫要素の範囲</p>

</section>

</article>

CSS

#contents > p{
	color: #FF0000;
}

#contents > p{

color: #FF0000;

}

隣接セレクタでは、隣り合う要素の直後のもの（今回でいう『要素2』）の方にのみスタイルを適用することができます。
同じ階層にあっても指定した要素に隣接していなければスタイルは適用されません。

DEMO

HTML

    <h2>h2と隣接するpは赤くなって、マージンがつく</h2>
    　<p>赤くなる+マージン</p>
    <h3>h3と隣接するpはそのまま</h3>
    　<p>赤くならない</p>

<h2>h2と隣接するpは赤くなって、マージンがつく</h2>

<h3>h3と隣接するpはそのまま</h3>

　<p>赤くならない</p>

CSS

#contents02 h2 + p{
	color: #FF0000;
	margin-bottom: 30px;
}

#contents02 h2 + p{

color: #FF0000;

margin-bottom: 30px;

}

Web制作、Webサービスに関する技術やノウハウを発信するコラムサイト