このブログで色々とカスタマイズを行った結果を、記事としてご紹介しているのですが……
今回は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の確認が行えるので、結構いいですよ!
「スペース」[親 要素]:配下要素まで
「スペース(空白)」を使って指定した場合です。
#parent div { background: #f33; }
この場合、#parentの配下にある、全てdivに適用される為、「test」とかかれた要素は、全て赤く染まります。
「>」[親 > 要素]:子要素のみ
「>」を使って指定した場合です。
#parent > div { background: #f33; }
この場合、#parentの子要素にあたるdivにのみ適用される為、「test」の外側にあたる箇所のみ赤くなります。
「+」[親 + 要素]:隣接する要素のみ
「+」を使って指定した場合です。
#parent +div { background: #f33; }
この場合、#parentに隣接した、次のdivに適用されるため、1つ目のnextのみ赤くなります。
ちなみに、「次の」隣接した要素になので、1つ上の隣は影響を受けません。
あとがき
いかがでしたでしょうか?
個人的なまとめを兼ねた記事でした。
配下(スペース)と子要素(>)は、かなり有用なので、これを知っているだけで、作りこみが結構変わってくるんじゃないでしょうか?
隣接(+)を使うタイミングがイマイチ浮かばないのが現状ですが……