CSS セレクタ IE6、7でも使えるようにする方法

※この記事は10年以上前の記事です。
現在は状況が異なる可能性がありますのでご注意ください。

みやびプリン、転職しました。
といっても、前と変わらず、WEBですがｗ
コーダーとして今回就職しました。
前からデザインよりそっちの気があったので、
けっこう楽しくやってます。
転職多すぎっていうツッコミはご勘弁をｗ

相変わらず前置き長いですね。

さて、今回はCSSセレクタの話だ。
こいつは非常に便利にできている。
例えば、
擬似クラスの":first-child"がある。

div p:first-child {
 font-size: 120%;
}

<div>
<p>・こんなに便利な</p>
<p>・ものがあったとは</p>
<p>・思いもよらなかった</p>
</div>

以上のようにすると、divの中の、最初のpにだけ、スタイルを効かせることができるのだ。

他にも、n番目の要素に対してスタイルを効かせる":nth-child(n)"や、
"h1 + p"のようにセレクタを書けば、h1のすぐ隣にあるpにだけスタイルを効かせることができるのだ。

詳しくは下記エントリをご参照あれ

意外と知らない!?CSSセレクタ20個のおさらい
http://weboook.blog22.fc2.com/?no=268

CSSって超便利！

とまぁ、これはコーダーなら誰でも知ってること。
しかし、このセレクタを使っている人は、ほとんどいない。
なぜかはおわかりでしょう。

天下のクソブラウザIE6がこのCSSセレクタのほとんどを使うことができないのだ！
（IE7も使えないセレクタが多い・・・）

全てこいつのせいで、いちいち、最初の要素にはクラスをつけなければいけなかったりと、めんどうになるし、
コーディングにやたら時間かかったりする。
いちいち、クラスとかIDをつけなければいけないし。
Sassを使えれば大分いいんだろうけど、みやびは、練習中・・・。

そこで、今回紹介したいのは、IE6、7でも、便利なCSSセレクタを使う方法である！
（やっと本題かよ）
その方法とは、jQueryとプラグインを使う方法である。

下記ページからJavaScriptをダウンロードして、
HTMLに読み込んでください。

■IE6の表示や、機能をIE7に近づけるプラグイン
https://code.google.com/p/ie7-js/ ※下の方にDownloadとあるので、
URLの飛び先にて、2.1(beta4)/ > IE7.js　と飛ぶと、JavaScriptのコードが出てくるので、
それをコピーして、JavaScriptに保存

■IE7、IE8でCSS3用のセレクタを使えるようにするプラグイン
http://selectivizr.com/
※右の黄緑色のダウンロードボタンを押してダウンロード

ダウンロードしたら、条件付きコメントで読み込む。

<script src="JSを置いているディレクトリ/jquery.js"></script>
<!--[if lt IE 7]>
<script src="JSを置いているディレクトリ/IE7.js" type="text/javascript">
< ![endif]-->

<!--[if (gte IE 6)&(lte IE 8)]>
<script type="text/javascript" src="JSを置いているディレクトリ/selectivizr.js"></script>
<noscript><link rel="stylesheet" href="[fallback css]" /></noscript>
<![endif]-->

jQueryプラグインなので当然jQuery本体も読み込みます。

これを読み込んでおけば、IE6、7でもセレクタが自由に使えるようになる！
HTMLのコードもすっきりするでしょう。
これとSassやEmmetなどを使えば、作業時間は半減するはず。
コーダーにはぜひとも採用していただきたい。