子要素セレクタ

2011年4月19日 21:16 html/css — littlepad

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

HTML

  • hoge
    • hogehoge
  • hoge
    • hogehoge

CSS

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

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

表示サンプル

  • hoge
    • hogehoge
  • hoge
    • hogehoge

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

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

No comments yet.

TrackBack URL

Leave a comment

about

ハンドルネーム:littlepad
都内で WEB 制作(デザイン, html/css, Flash, MT, WordPress etc)をしているBOØWY研究家

category:

search:


archives:

GO TO PAGETOP