【忘備録】Selectivizr.js IE6~8でCSS3セレクタを利用出来るライブラリー

IE6やIE7のシェア数が減少した事もありこれまで使えなかったCSSセレクタも使えるケースも増えてきました。

これはとても喜ばしい事です。

しかし
まだまだIE6やIE7に対応を希望するお客様は多いです。

そんな時に幾つか対応する方法があるのですが、最近試してみた方法をご紹介します。

続きを読む 【忘備録】Selectivizr.js IE6~8でCSS3セレクタを利用出来るライブラリー

疑似クラス

例えばリストの最初(最後)だけ罫線を消したい場合に使うのが:first-child(:last-child)

とても便利ですよね~最後だけクラスを指定しなくていいので項目が増えた場合でも更新が楽
これらがIEに対応してたらもっとえぇのに・・・と何度思ったことか・笑

その場合は

<!--[if lt IE 9]>
<script src="http://ie7-js.googlecode.com/svn/trunk/lib/IE9.js"></script>
<![endif]-->

をヘッダに指定してIEでも使えるようにすればOK!
これで幸せなマークアップライフを過ごせますね

さて、CSS3では上記以外にも様々な擬似クラスが定義されています
結構使えるんですよね~

 

:nth-type(n)

これは、ある要素の隣接している子要素を最初から数えてn番目にあたる要素にスタイルを適用するもの
最後から数えたい場合は:nth-last-child(n)

nの値を変えることで様々な箇所に対応できます
奇数の場合はoddもしくは2n+1、偶数はevenもしくは2n
数字を直接指定するとその番目のみ・・・
というように

あぁ、素晴らしい

 

上記に似て非なるものが

:nth-of-type(n)

これはある要素の同じ子要素を最初から数えて、n番目に当たる要素にスタイルを適用
最後からの場合は:nth-last-of-type(n)

nの指定の仕方は前のと同じ

これらの違いは、子要素すべてか同じ子要素のみか

<p>~</p>
<p>~</p>
<h2>~</h2> ←p:nth-child(3)
<p>~</p> ←p:nth-of-child(3)
<p>~</p>
<p>~</p>

ということですな

 

ちなみに

<script type="text/javascript">
$('e:last-child').css('border', 'none');
</script>

とjQueryで指定したらIE関係なく疑似クラス使えたり。。。
もちろん:nth-child(n)や:nth-of-child(n)もありますよん

jQuery恐るべし

参考:CSS Happy Life ZERO