細々と運営してきた当ブログですが、突如この記事がはてなブックマークで人気のエントリーになってビックリです。サイト来訪者がえらい増えました（汗
初めての方も、いつも見に来てくださる方も、今後とも役に立ちそうな情報をアウトプットしていきますのでどうぞよろしくお願いしますm(_ _)m

さて、いつも参考にさせてもらっているCSS Happy Lifeさんが「フッターとかの区切り『｜』のサンプル4種」という記事で隣接セレクタについて言及しているので、それに便乗してみます。隣接セレクタって便利ですよねー。ただやっぱりIE6でサポートしてないのが痛いですね。そんなIE6でも隣接セレクタを使ってしまおうという試みです。

もちろんそのままでは使うことができないので、どうするかと言えば結局javascriptの力を借りるわけなのですが、当ブログでも何度か紹介しているjQueryは比較的簡単に適用することができます。Happy Lifeさんで紹介している隣接セレクタを使ったフッターの区切り(ボーダーの表示)をjQueryでやろうとすれば下記のようになります

$(document).ready(function() {
  $("#sampleFooter_04 li+li")
  .css("border-left-color","#999")
  .css("border-left-style","solid")
  .css("border-left-width","1px")
})

jQueryはクロスブラウザ対応なのでIE6でも問題なく表示されます。本当はCSSだけで実現できれば一番良いのでしょうけど・・・そう考えるとIE6って厄介ものですね。

jQueryは他にもIE6が未対応の属性セレクタや子セレクタ（E > F）をサポートしています。さらにはCSS3で追加予定の「内包テキストマッチング属性セレクタ」もつかうことができるので(書き方がちょっと特殊ですが)、上手く使えばとても便利です。jQueryのCSSセレクタ対応状況についてはjQueryの公式サイトに詳しく書かれているので、興味のある方はそちらを参照してみてください

• jQuery公式サイト(CSSセレクタについて)

関連エントリー

• 透過pngをIE6で使う方法いろいろとjQueryプラグイン
• jQueryでCSS3を先取り！
• 使えそうなjQueryプラグイン
• シマシマなテーブルをjQueryで作る
• コーディングコンテストの種明かし
• jQueryを使ってCSS切替機能を実装
• jQueryを使ったアコーディオンメニュー
• jQueryでフォントサイズ切替機能
• jQueryでクロスフェードをやってみる
• IE7でE[foo^="bar"]とかはほぼ対応しています

• Category
  • CSS
  • jQuery
• コメントはまだありません
• TrackBack URL

このエントリーのトラックバックURL

http://www.lllcolor.com/web/css/53.html/trackback