子セレクタの使い方と、子孫セレクタの違い。また2つを複合して使う場合も結構あるので、それぞれ使用例をあげてます。
HTMLタグの要素や、親要素や子要素の関係と基本的なclass、id、タイプ、全称、子孫セレクタと優先順位について書いたHTMLタグの装飾、セレクタの指定方法と優先順位の第2弾『子セレクタ』です！
サクッと見てさいごの強引な問題の意味がわかれば、当分これで迷うことがないかも！さっそく順に見ていきましょー♪
子セレクタ：指定した子要素を装飾できる
子セレクタは親要素直下の子要素内の『指定した全ての要素（例：段落pなど）』などのスタイルを反映させたいときに使います。
- 親要素<div class=”s_box”>の中の子要素『段落p』のフォントを青にしたい
- .s_box > p{ color: blue }
- 親要素『.s_box』の、子要素『段落p』全て対象にしたスタイルってこと。
詳しくは画像のとおり。
- <section>の中の段落は反映しない
- <div class=”s_box”>のリストは反映しない
- <div class=”s_box”>の段落だけを装飾したいときに使う
じっくりその関係を見たら案外簡単！って思いますよね。
親の兄弟要素のは、子どもの親が違うので関係ないとわかりますよね！？兄弟要素の説明は、下記リンクはじめの方を読めば直感的にわかります。『兄弟要素を覚える』の見出しにもガッツリ書いてるので参考まで。
LINK基本CSSのセレクタの指定★親子孫要素を知れば装飾が反映するよ！ブログ構造HTMLを見て理解
子孫セレクタと複合して使う子セレクタの使い方
子孫セレクタと子セレクタは複合して使うと、範囲を選択してピンポイントで装飾することが可能になります。親要素の子孫にあたる要素、その直下にある要素を指定したい場合ですね。
画像の<div class=”s_box”>の中にあるリスト『ulのli』を装飾したい場合。
セレクタは、ul > liとすると、ブログの全てのリストが選択されるので、子孫セレクタと子セレクタを複合させてあげます。
- .s_box ul > li
『.s_box』の子孫要素［『ul』直下の子要素『li』］なので、子孫セレクタと子セレクタの複合で使った感じですね。
<section>のなかの番号なしリストulのliは『反映しない』となり、その部分のみ反映させたい場合は、例えば下記のようにセレクタを指定します。
- section ul > li
『section』『ul > li』は子孫セレクタ。『ul > li』は子セレクタ。おなじく複合で使って範囲の指定となる♪
『ul > li』は、つい『li』と指定して、反映しない…と初心者が必ず引っかかる部分でもあります。指定方法に子セレクタを使えば反映！これチェックです！
LINK見出し：子孫セレクタについて
ちなみに、sectionはタイプセレクタで、クラスセレクタより優先順位が低いです。子孫セレクタの使い方、親要素優先順位も考えての指定しないと場合によって反映しないことも考えられます。セレクタの優先順位の詳細度を読めば理解が深まりそうです＾＾
子孫セレクタと子セレクタの違い
2つの大きな違い。
- 『子孫セレクタ』は『子要素&孫要素』の『指定した要素』のスタイル。
- 子セレクタは、それより選択範囲を狭めた『子要素のみ』の指定した要素。
言葉のあやのように感じちゃうますよね。下記画像の祖父母、両親、子供の関係図で祖父母を親として見てみましょう。
- 親Aから見て子孫セレクタは、子Bと孫Cの要素を含む。
- 親Aからみて子セレクタは子Bの要素のみ。
『親A』『子B』『孫C』と言うセレクタと仮にすれば、子孫セレクタは『親Aにある全ての子孫Cを反映させる』。
親A 孫C { スタイル }
子セレクタは、『子Bの中の孫Cのみ反映させる』。
子B > 孫C{ スタイル }
ざっと違いをわかっていただけましたか＾＾
さいごに
擬人化して復習してみましょう！
子セレクタは、『親要素 > 親直下の子の要素（段落やリストなど）』。人間で言ったら、
- 『祖母』の子のパーツ『顔』の{色を:青くして;}っと指定して装飾する感じ
子孫セレクタは。『親要素 その子孫の要素』を選択して装飾する感じ。
- 『祖母』の子や孫のパーツ『鼻』の{色を:ピンクにね;}
『』は指定したセレクタで、付け方はこんな感じかなぁ～。おばあちゃんは『被害なし』なのは、親を指定しただけだから。※顔と鼻に色つけちゃってごめんなさいねっ:(
でもこの意味が（強引ながらも）理解できれば、子孫セレクタと子セレクタの違いは迷わないかも知れません…きっと:)
ブログ構造HTMLを見て親要素、子孫要素を理解出来るページの冒頭を読めば、子孫関係が、サクリわかりますよ♪優先順位の詳細度と子孫セレクタも書いてるよりシンプルなセレクタも合わせて読んでみてくださいね。
それでは、かうたっくでしたっ！
Comments