IE8・IE7でCSS3のnth-childを使えるようにするハック

ie
このエントリーをはてなブックマークに追加
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

COMMENT

コメントを残す

PR

9ineBBの管理人が運営するサイト

WDG WEB DESIGN GALLERY ウェブデザインギャラリー CC0 PHOTO 無料で使える高画質な写真をダウンロード、クレジット表記、リンク不要

9ineBBの最新情報をチェック・購読

Twitter Facebook Google+ Feedly RSS

どこをクリックしてもこの表示を消せます
(3日後以降に再度表示されます)