クリエイター:コーディング備忘録ブログ

コーディング

nth-child(n)

・疑似クラス
nth-child(n)は、ある要素の隣接している子要素を最初から数えて、n番目にあたる要素にスタイルを適用します。
n番目というのは隣接している要素を全て数えるので、間に別の要素が有るとその要素もカウントしてn番目にスタイルが適用されます。

▼偶数行だけにスタイルを適用することで、しましまにする事も出来ます。
:nth-child(2n)
:nth-child(even)

▼奇数を指定したい場合は、下記のようにスタイルを指定します。
:nth-child(odd)
:nth-child(2n+1)(1番目の子要素を指定しその後2つおきにスタイルを指定)

▼任意の子要素にスタイルを適用したい場合は以下のように指定します。
:nth-child(5)/*5番目のみスタイルを適用*/
:nth-child(3n)/*3の倍数のみスタイルを適用/*
:nth-child(3n+5)/*5番目の子要素から3つおきにスタイルを適用*/
:nth-child(n+4)/*4番目以降の子要素にスタイルを適用*/
:nth-child(-n+3)/*3番目までの子要素にスタイルを適用*/

▼書き方
.sample li:nth-child(2n){}

参考サイト:http://design.webclips.jp/css3-nth-child/
参考サイト:http://zero.css-happylife.com/selectors/nth-child.shtml

コメント

この記事へのコメントはありません。

RELATED

PAGE TOP