【CSS】親子関係をつなぐ方法・切る方法



HTMLはディレクトリのような階層構造であるため、
それに付随して、CSSでも親子関係をうまく整理しておく必要があります。

親子の関係を明示したいとき、場合によっては切り離したいときの
考え方ややり方を、覚書としてまとめておきます。

親に伝える方法は本当にないのか?、 子の要素のみに反応させたいが親に伝播してしまうときどうすればいいか、そういうときの小技を紹介します。

事前準備:CSS指定方法のおさらい

指定するのは最後の子要素

CSSは表現するとき最後のターゲットに対して、体裁を指定する。

この時は、前にあるDIVに対して指定しているようだけれども
次のように、括弧の直前の指定子の大しての装飾を指定する。


そのため、切り分けたりつなげたりするときは、
子から見て、どういう親子関係のものか、
全体的に見て、独立した指定方法なのか、
自分という要素はユニークなのかを見極めたいといけませんね。

独立した存在の要素であれば、階層構造を意識しないように、
classで指定するやり方がマッチします。

ユニークであれば、# でのid 指定がマッチします。

親子関係を指定するやり方

残りの階層関係を指定する方法を、整理してみると
主によく使うのは

使用記法 使用例 意味
空白  DIV  SPAN DIVの 子孫
 > DIV > SPAN DIVの直下の子のみ、孫などは含まない。
~ DIV ~ DIV DIV と同じ階層の兄弟要素
 + DIV + DIV DIV の次の弟要素(同じ階層で間に兄弟を挟まない) 

切り分ける修飾子は

使用記法 使用例 活用方法
 . (ピリオド) .class タグ、ラベルを張るように他の一般化した要素と区別する。
特殊要素の指定。
# #id ユニークな存在として指定。HTML仕様上、一つしか存在できない。
:not(~~) :not(.class) 条件を除くことができる。 タグ名、クラス名、など指定可能

このように、処理が混ざることから切り分けることができます。
その他にも属性指定(html の フォームが独特なのでたまに使う)や、 first/last/nth-child指定などありますね。

インタラクティブな修飾子


それは動くのか、動かないのか
ユーザの操作に対して、反応してあげることがユーザインタフェースとして大事です。

即時反応をさせたいときは、次のような修飾子がよく使われます。

使用記法 使用例 活用方法
:active :active マウスが当たっているとき。タッチパネル上だとやや切り替えが必要。
:focus :focus フォーカスを得ているとき。
:checked :checked チェックボックス、ラジオボタンでチェックされているとき。

さて、前準備はこれくらいにして
本題に向けた小技を紹介します。

CSS で親に戻ることはできる?


上記のようにCSSの文法では、そのようなことを直接指定することはできません。

CSSのような指定方法であれば、子から親への指定すると、走査完了タイミングが計れず永久ループになってしまうので、単純な仕様策定には至らないかと思います。

それでも、この状態を親要素に伝えたいとき

 

マウスのhover で子要素だけに反応してほしいけど、親要素も反応してしまう !!!

何かできないか?

そんなとき

特定の条件下で、HTML全体に伝播させることができる小技があります。

 

 

まず一つ目、それは

label タグです。

ラベルタグは  for 属性でどのチェックボックスに対してか指定できるため、
要素の切り替えで、HTML全体に表示を切り替える信号を実質送ることができます。

 

label 要素 - HTML | MDN


いざとなったら、これを活用できないか考えてみてもいいと思います。
余りにも強力で柔軟性があるので、バグの温床にならないように、気を付けましょう。

子要素にのみ反応させたいのに、親要素が反応してしまうのを回避したい時


普通のケースでは、子の要素に指定できるのですが、 :activeなどを指定すると
親要素もどうしてもその条件に当てはまってしまい、子の要素のみ指定したいときに、上記の普通の方法ではできません。

 

そんなときの小技です。

色々さがしたり、:not を活用してもうまくいきませんでした。
あきらめかけた時、次のことに気付きました。

リストのように、子から親に情報が行くときそれは包含関係になっているからなので
包含関係でなくして、階層構造を切り分ければいいと気づきました。


やり方は、親要素からさらに、子要素を作り
今までつながっていた、親から子への直系の流れを分離し断ち切ります。

こうすることで、 li > span 要素と    li  li の要素の親子関係が分かれ  別々の指定方法ができるようになりました。

 

 

Delicious にシェア
Digg にシェア
reddit にシェア
LinkedIn にシェア
LINEで送る
email this
Pocket




コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です