子要素セレクタ

2011年4月19日 21:16

いわゆる通常のセレクタ指定「下位要素セレクタ」(と言うらしい)は
指定した要素以下全ての該当要素にスタイルを適用するが、
「子要素セレクタ」はそのスコープが子要素のみに限定される。

HTML

  • hoge
    • hogehoge
  • hoge
    • hogehoge

CSS

/* 下位要素セレクタ */ul.testClass1 li span {
    color: #ff0000;
}

/* 子要素セレクタ */ul.testClass2 > li > span {
    color: #ff0000;
}

表示サンプル

  • hoge
    • hogehoge
  • hoge
    • hogehoge

子要素のスタイルが親のスタイルの影響を受けないのはイイネ!
子要素セレクタは、IE7 以上対応。

カテゴリー: html/css 

コメントはまだありません

No comments yet.

TrackBack URL

Leave a comment