2007年04月24日

CSSの隣接セレクタを使ってMacのDock風インターフェースを作成する

CSSのセレクタって意外と多いんですよね。未対応ブラウザのことを考えると実際に使用するのはもう少し先のことになりそうなセレクタも多いんですが、ここらで一度実際に使ってみたいと思います。

今回は隣接セレクタを使ってMacのDock風インターフェースを作ってみることにしました。

元記事はLucky bag::blog: CSS だけで Mac OS X の Dock 風ナビゲーションです。

FireFoxとIE7では動きました。IE6では動きません。

<ul>
  <li><img src="icon1.png" alt="icon1"/></li>
  <li><img src="icon2.png" alt="icon2"/></li>
  <li><img src="icon3.png" alt="icon3"/></li>
  <li><img src="icon4.png" alt="icon4"/></li>
  <li><img src="icon5.png" alt="icon5"/></li>
  <li><img src="icon6.png" alt="icon6"/></li>
</ul>

img{
  border:none;
}

li {
  float:left;
  list-style:none;
}

li img {
  width:64px;
  height:64px;
}

li:hover img {
  width:128px;
  height:128px;
}

li:hover +li img {
  width:96px;
  height:96px;
}

li:hover +li +li img {
  width:80px;
  height:80px;
}

隣接セレクタは、ある要素の直後の兄弟要素を指定できます。このソースを例に挙げてみます。

li:hover +li img {
  width:96px;
  height:96px;
}

この場合、li:hoverの直後のli要素内のimg要素を指定していることになります。この例で言うとマウスオーバーした要素の一つ右の画像です。

li:hover +li +li img {
  width:80px;
  height:80px;
}

これだとli:hoverの直後のli要素の直後のli要素なので2つとなりのli要素内のimg要素を指定しています。一つ前の要素とかもしてできればもっとDock風になるんですけど、現在はこれが限界のようです。

こういった便利なセレクタがブラウザ依存を気にせず使えるようになるとコーディングもしやすくなりそうですね。ちなみにCSSのセレクタのまとめは下記サイトなどがうまくまとめられています。