cssの記述をしていてよく使用するなと思った二つの記述方法の違いについてまとめました。
すでにたくさん記事はありますが参考までに。
①不等号の方
正式名称
子結合子(child combinator)
参考：https://developer.mozilla.org/ja/docs/Web/CSS/Child_combinator
記述方法
セレクタ1 > セレクタ2 {
プロパティ: 値;
}
ポイント
・セレクタ1を親として、子のセレクタ2の要素がcssの適用対象となる。
・つまり、セレクタ1-セレクタX-セレクタ2の階層構造であれば適用対象外となる
・セレクタ1-セレクタ1-セレクタ2のように対象のセレクタが連なった構造の場合は、セレクタ1-セレクタ2の構造はできているので適用対象となる
②空白の方
正式名称
子孫結合子(descendan combinator)
参考：https://developer.mozilla.org/ja/docs/Web/CSS/Descendan_combinator
記述方法
セレクタ1 セレクタ2 {
プロパティ: 値;
}
ポイント
・セレクタ1を親として、子と孫のセレクタ2の要素が対象となる。
・つまり、セレクタ1-セレクタX-セレクタ2の階層構造は適用対象となる。
・セレクタ1-セレクタX-セレクタX-セレクタX-セレクタ2のようにいくら対象ではないセレクタが挟まっていても、セレクタ2は孫と認識される
比較
See the Pen
Untitled by Seiya Takahashi (@takasei)
on CodePen.
コメント