IE8・IE7でCSS3のnth-childを使えるようにするハック
PR
nth-childはCCS3で使えるもので
使い方は数値で指定、もしくはn+1といった形で指定することが出来ます
nth-child(5)とした場合は、連続する要素で5番目のみに対して何かスタイルを与えるというものです
div p:nth-child(5) {color:red;}
他には偶数(even)、奇数(odd)とういう指定の仕方も出来ます
これらの全部の機能をIE7・IE8で実現するのは出来ないのですが、何番目かというのは指定することが出来ます
IE7・8でnth-childの一部の機能を使えるようにする
div p > *:first-child + * + * {color:red;}
このコードが意味するのは、3番目の要素に対して効果を与えます、nth-childではnth-child(3)と同じ役割です
まず最初にアスタリスク* その次に:first-child そのあとにプラスを付けた後にアスタリスクを足していくことで何番目かを指定します
アスタリスクの数だけの番目と数えると分かりやすいです
上のコードでは3つのアスタリスクがありますから3番目とうことになります
関数は使えませんが、一応何番目に何かのスタイルを当てるときには使えます
参考URL
http://kim-aspnet-blog.blogspot.jp/2012/03/internet-explorer-7-8-nth-child-hack.html
http://www.gravity-works.jp/gravica/web/003862.html
PR
短縮URL:
COMMENT