nth-childはリスト構造など、同じ要素が多く連なる場合、5番目の要素に指定したり3の倍数の要素に、
cssの指定をしたりなど、多くの場面で活用できる擬似要素です。
実は、nth-childにはネガティブな値も指定できます。
1 2 3 4 5 6 7 8 9 10 11 12 |
<ul id="sample"> <li>テキスト</li> <li>テキスト</li> <li>テキスト</li> <li>テキスト</li> <li>テキスト</li> <li>テキスト</li> <ul> #sample li:nth-child(-n+5) { color:green; } |
上記では、最初から5番目の要素までフォントの色が緑になります。
コメント