lisz-works

技術系だけど関係ないこと多い系ブログ

CSSセレクタの子、孫、隣について試してみた

【スポンサーリンク】

プログラムのソースコード

このブログで色々とカスタマイズを行った結果を、記事としてご紹介しているのですが……

今回はCSSのセレクタについて、復習した内容を試して、まとめました。

内容は、ある要素についての「子要素」、「孫(配下)要素」、「隣接要素」を指定する方法についてです。

下準備:ベース環境

ベース環境はこのような状況を用意しました。

それぞれの要素に余白を持たせ、適当な色で識別できるようにしました。

ベース環境

HTMLはコチラ。

  <div id="parent">
    <div class="child">
      <div class="grandson">test</div>
    </div>
    <div class="child">
      <div class="grandson">test</div>
    </div>
  </div>
  <div class="next">next</div>
  <div class="next">next</div>

CSSはコチラ。
このうち、先頭で指定している「#parent」のところをいじくって、変換をチェックします。

#parent {
  background: #f33;
}

#parent, .child, .grandson, .next {
  padding: 5px;
  margin: 5px;
}
.child { background: #388; }
.grandson { background: #995; }
.next {background: #959;}

ちなみに画像の例は、liveweave.comというサイトを使用しています。

リアルタイムに、HTML/Javascript/CSSの確認が行えるので、結構いいですよ!

http://liveweave.com/

「スペース」[親 要素]:配下要素まで

「スペース(空白)」を使って指定した場合です。

#parent div {
  background: #f33;
}

配下要素

この場合、#parentの配下にある、全てdivに適用される為、「test」とかかれた要素は、全て赤く染まります。

「>」[親 > 要素]:子要素のみ

「>」を使って指定した場合です。

#parent > div {
  background: #f33;
}

子要素

この場合、#parentの子要素にあたるdivにのみ適用される為、「test」の外側にあたる箇所のみ赤くなります。

「+」[親 + 要素]:隣接する要素のみ

「+」を使って指定した場合です。

#parent +div {
  background: #f33;
}

隣接要素

この場合、#parentに隣接した、次のdivに適用されるため、1つ目のnextのみ赤くなります。

ちなみに、「次の」隣接した要素になので、1つ上の隣は影響を受けません。

前要素は適用されない

あとがき

いかがでしたでしょうか?

個人的なまとめを兼ねた記事でした。

配下(スペース)と子要素(>)は、かなり有用なので、これを知っているだけで、作りこみが結構変わってくるんじゃないでしょうか?

隣接(+)を使うタイミングがイマイチ浮かばないのが現状ですが……