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

 

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

子セレクタ

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

<ul class="hoge">
   <li>
      <a href="#">メインメニュー1</a>
      <ul>
　　　　<li><a href="#">サブメニュー</a></li>
　　　　<li><a href="#">サブメニュー</a></li>
　　　　<li><a href="#">サブメニュー</a></li>
      </ul>
   </li>
   <li>
      <a href="#">メインメニュー2</a>
      <ul>
　　　　<li><a href="#">サブメニュー</a></li>
　　　　<li><a href="#">サブメニュー</a></li>
　　　　<li><a href="#">サブメニュー</a></li>
      </ul>
   </li>
</ul>

作ろうとしているのは横並びのグローバルナビゲーションなので、class="hoge"の直下にある<li>にたいしてのみfloatをかけたい。その場合入れ子にしてある<li>にはfloatがかからないようにclassを付ける必要がありますが、子セレクタを使えばclassを省くことができます。以下のようにCSSを書きます。

.hoge > li {
            float:left;
           }

隣接セレクタ

<h2>hoge</h2>
<p>hogehoge</p>
<p>hogehoge</p>

上記のようなHTMLがあったとして、一番目の<ｐ>の文字色を黒、二番目の<ｐ>の文字色を白にしたい場合、それぞれにclassを付ける必要がありますが、隣接セレクタを使えばclassを省くことが出来ます。

最初の<p>の文字色を黒にする

h2 + p { color : #000;}

二番目の<ｐ>の文字色を白にする

h2 + p + p { color :#FFF;}

合わせて使う

もちろん合わせて使うことも出来ます。最初に書いたグローバルナビゲーションのHTMLにある、メインメニュー２というテキストを囲っている<a>に対してのみスタイルをあてたい場合、子セレクタと隣接セレクタを使うことでclassを省くことが出来ます。

.hoge > li + li > a { color: #red;}

子セレクタと隣接セレクタをうまく使えば、グロバールナビゲーションのメニューにそれぞれ異なった画像を画像置換で付ける場合にもclassを省くことができます。ですが、classを省くためにCSSが複雑になりすぎても本末転倒だと思いますし、メンテナンス性も悪そうなので、場合によってはおとなしくclassを使った方が良いと思います。

 

IE6がターゲットから外れたのなら、HTMLもCSSもそれなりの書き方を覚えないとナンセンスっていわれるかも。ということをCSSHAPPYLIFEのひらっちさんが以前書いていたので、まだ読んでいない方は参考にどうぞ。

 

最後に、さっそくhogeってみました。