例えばリストの最初(最後)だけ罫線を消したい場合に使うのが: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恐るべし