マークアップの授業でプルダウンのグローバルナビゲーションの実装をしていたとき、改めて子セレクタと隣接セレクタって便利だなと思ったのでここでおさらい。

今年度からマークアップの授業ではIE6がターゲットブラウザから外れました。これはIE6への対応に時間をかけるよりも、新しい技術の習得に時間をかけようという学校側の判断によるもの。子セレクタや隣接セレクタは別段新しい技術ではないですが、IE7からサポートされている為、IE6がターゲットから外れた今積極的に使っていかないともったいない。昨年の授業では影が薄かったというかまったく出てこなかったような。

子セレクタ

親要素に含まれる直接の子要素のみにスタイルをあてることが出来る。例えばプルダウンのグローバルナビゲーション（横並び）を作るときHTMLは・・・

 例えばページ幅1000ｐｘに設定していたとして、ブラウザのウインドウ幅が1000ｐｘ以下になったとき、コンテンツの上にbodyに設定した背景色や背景画像が食い込んでくるという現象が起きました。

この現象が起きたときはCSSでbodyに対してmin-widthを設定すると防ぐことが出来ます。

body {

min-width:1000px;

}