nth-child
2013.09.11
first-childは、IE8でもきくのですが、
nth-child(n)はきかないのですよねー。
これが使えたらすごく便利なのに。
ということで調べてみました。
いろいろ適応させる方法はあるようなのですが、使いたい部分がサイトの共通部分で
その案件が、大きめの案件で既に納品しているページもあったので
ヘッターの記述に新たに何か追加したくなかったことと、
はずかしながら、自分はjsの理解度が低いので、CSS内で解決という条件で探しました。
下記ページのハックが簡単でわかりやすかったです。
CSS: Internet Explorer 7-8 nth-child hack
これを
------------
.test ul li:nth-child(3){
background: yellow;
}
------------
こう書く
------------
.test ul > *:first-child + * + * {
background: yellow;
}
------------
「+ *」の数を増やして調節する。
IE８でもききました。
nth-child(n)はきかないのですよねー。
これが使えたらすごく便利なのに。
ということで調べてみました。
いろいろ適応させる方法はあるようなのですが、使いたい部分がサイトの共通部分で
その案件が、大きめの案件で既に納品しているページもあったので
ヘッターの記述に新たに何か追加したくなかったことと、
はずかしながら、自分はjsの理解度が低いので、CSS内で解決という条件で探しました。
下記ページのハックが簡単でわかりやすかったです。
CSS: Internet Explorer 7-8 nth-child hack
これを
------------
.test ul li:nth-child(3){
background: yellow;
}
------------
こう書く
------------
.test ul > *:first-child + * + * {
background: yellow;
}
------------
「+ *」の数を増やして調節する。
IE８でもききました。
