今さらだけどcssのセレクタの親子関係の確認まとめ #css3 #css

今さらだけどcssのセレクタの親子関係の確認まとめ #css3 #css

今さらだけど、CSS3で追加されたセレクタも合わせてCSSのセレクタの親子関係をまとめてみようと思います。

ここでは、便宜上、クラス名を親、子、孫といったふうに日本語で表記します。

CSS1:子孫まで全部関係する「親 子」の関係

HTMLとして書くとこんな感じです。まぁ、よくある書き方だと思いますので、ここ自体はそんなツッコミはしないことにします。

CSS1からある半角スペースで各クラスを区切る書き方、

ということをすると、上のHTMLでは

マークしたところ、全部に適用されます。だから、子だけに適用させたいときや孫だけに適用させたい場合などには、けっこう四苦八苦したのを今でも覚えています。

CSS2:子にだけ関係する「親 > 子」の関係

CSS2で追加されたのが、孫は置いといて親子関係のときだけ適用できるようにするセレクタが半角の「>」です。

これでCSSを書くと

という感じになるのですが、HTMLでの適用範囲がさっきと変わります。

孫は放置して、親に対する直接の子にしかCSSが適用されなくなります。いやぁ、便利ですね。

CSS2:要素1に隣接する要素2にだけ適用する「要素1 + 要素2」

隣接するという状態をつくるために、さっきのHTMLを増やしてみました。またわかりやすいように親1、親2というクラス名にしてみました。

CSSで書くとこうなります。

こうすると、親1に隣接する親2にだけCSSで設定したスタイルが適用されるようになります。

親3には何の影響もないわけです。

CSS3: 要素1と同じ階層にある要素に対して適用できる「要素1 ~ 要素」

CSS3から追加されたセレクタがこの「~」を使ったものです。同階層にあるクラスに対して適用できるのがメリットですね。さっきの「+」が同階層の直後の要素に対して発動するもので、「~」は直後以外のものに対して発動するものだと思ってもいいと思います。

さっきの「+」のときと同じHTMLに対して、CSSを

とすると、

親2をすっとばして、親3にだけ適用できるようになるわけです。

いろんなクラス名を設定して対応していたのが、ウソみたいにすっきりと書けるようになるのがCSS3なのでした。セレクタの仕組みをしっかりと覚えることって重要ですよね。

1,087 views/total