CSS3のnth-childやnth-last-childを使って途中の連続した要素を指定する

CSS3から追加されたnth-childやnth-last-childという擬似クラス。前者が前からの要素を指定する擬似クラスで後者が後ろからの要素を指定する擬似クラスとなります。
この二つのよく見る例が、:nth-child(3)と一つだけの要素を指定したものや、:nth-child(2n)と偶数番目の要素だけ指定したものをよく見ますが、連続した要素を指定することもできます。
例えば、最初の5つを指定したい場合は下記のようになります。

li:nth-child(-n+5){
    background-color:red;
}

上記の書き方だと、liタグの最初の5つの要素の背景を赤にするとなります。逆に、6つ目以降だと下記のようになります。

li:nth-child(n+6){
    background-color:red;
}

後ろからで考えたい場合は、nth-childの部分をnth-last-childとするだけです。

ところで、上記の例は確実に最初か最後を指定しなけければいけませんが、途中の連続した要素を指定したい場合ということが、稀にあるかもしれません(あまりないとは思いますが)。

そういう場合はどうすればいいかというと、複数nth-childやnth-last-childを使うことによって解決できます。
例えば、6つ目の要素から4つ、また11個目の要素から最後から6番目までというのを指定したい場合は下記のようになります。

/* 6つ目の要素から4つ(最初から9番目まで) */
li:nth-child(n+6):nth-child(-n+9){
    background-color:green;
}
/* 11個目の要素から最後から6番目まで */
li:nth-child(n+11):nth-last-child(n+6){
    background-color:yellow;
}

複数つかう事によって、どうやらAnd条件(論理積)になるようです。

というわけで以下、サンプルと実行結果。分かりやすいと思い、わざと何も指定してない要素もあります。

ul#nthChildText{
    list-style:none;
    padding:0;
}
ul#nthChildText li{
    margin:0;
    padding:0;
    border:1px solid #666;
    background-color:#666;
}
/* 最初から4つ */
ul#nthChildText li:nth-child(-n+4){
    background-color:red;
}
/* 最後から4つ */
ul#nthChildText li:nth-last-child(-n+4){
    background-color:blue;
}
/* 6つ目の要素から4つ */
ul#nthChildText li:nth-child(n+6):nth-child(-n+9){
    background-color:green;
}
/* 11個目の要素から最後から6番目まで */
ul#nthChildText li:nth-child(n+11):nth-last-child(n+6){
    background-color:yellow;
}

注意したいのが、6つ目の要素から4つの要素としたい場合に、『li:nth-child(n+6):nth-child(-n+4)』としてしまいそうになること。後ろにつけた『:nth-child』は『li:nth-child(n+6)』ではなく、あくまで『li』のほうに対応しているようです。
慣れるまでちょっと時間がかかりそうですが、覚えておくと便利かも。