CSSのnth-childの使い方

私が完璧に使いたいとき:nth-childあるいは:nth-of-typeは少しめまいがします.それらを理解すればするほど、良いCSSルールを書くことができます!
これらの簡単な「レシピ」(実際には式)では、簡単なリストを繰り返し使用し、数字を選択します.しかし、類似のセレクタを得るためにそれらを変更することは明らかである.
 
5番目の要素のみ選択

li:nth-child(5){

color: green;

}

最初の要素を選択するには、first-childを使用するか、上記の例を変更して実現できると信じています.
 
前の5つ以外のすべての要素を選択

li:nth-child(n+6){

color: green;

}

10以上の要素がある場合は、5以上が選択されます.
 
前の5つだけ選択

li:nth-child(-n+5){

color: green;

}

最初から4番目を選びます

li:nth-child(4n-7) {

/* or 4n+1 */

color: green;

}

奇数または偶数を選択

li:nth-child(odd){

color: green;

}



li:nth-child(even){

color: green;

}

もちろんここにも2つの実現があります.あなたは知っています.神飛
 
最後の要素を選択
 
最後から2番目を選択

li:nth-last-child(2){

color: green;

}

 
この例から,上記の例にも第2の実現方法があることがわかる.
 
ブラウザのサポート
 
興味深いことに、first-childと:last-childはIE 7にサポートされていますが、IE 9が残りのセレクタをサポートしていることを知っています.IEが心配ならSelectivizrを使ってもいいです.ブラウザの互換性が重要な場合は、When can I useに注目してください.
 
ええと、CSS 3セレクタを使うのは面白いことで、簡単な数学の問題をするようです.