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


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

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

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

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

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

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

DIV{
・・・
}

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

DIV SPAN{
・・・
}

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

独立した存在の要素であれば、階層構造を意識しないように、 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のような指定方法であれば、子から親への指定すると、走査完了タイミングが計れず永久ループになってしまうので、単純な仕様策定には至らないかと思います。

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

そんなとき

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

まず一つ目、子要素からHTMLの前側や親に反応させるやり方です。

それはlabel タグです。

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

<input id="switch" type="checkbox">


<label for="switch"></label>

適用可能な対象はhover要素ではなく、 checkbox や radioボタン要素ですが、 活用例は結構あると思います。

label 要素 - HTML | MDN

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

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

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

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

<ul>
   <li> parent
         <ul>
              <li> child </li>

そんなときの小技です。

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

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

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

<ul>
   <li>   <span> parent </span>
         <ul>
              <li> child </li>

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

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

718 views.



コメントを残す

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