CSS nth-child for greater than and less than.

質問

私のHTMLでは、私は持っています。

<div class="container">
</div>
<div class="container">
</div>
<div class="container">
</div>
<div class="container">
</div>
..................
..................

上記のHTMLの中で、私は container クラスがあります。CSS では、いくつかのスタイルを .container:nth-child(3,4,5,6,..and so on) . つまり、私はすべての nth-child を適用する必要があります。

どのように解決するのですか？

:nth-child() はクラスでは動作せず、要素そのものを探します。そのため .container divs をラッパーで囲み、以下のようにします。

.wrapper div:nth-child(n+3) {
   /* put your styles here... */
}

<div class="wrapper">
    <div class="container"></div>
    <div class="container"></div>
    <div class="container"></div>
    <div class="container"></div>
</div>

動作デモ .

を明確にする :nth-child()

使用方法 .container:nth-child(n+3) を使うことは、うまくいくかもしれないし、いかないかもしれません。なぜなら :nth-child() 擬似クラスは nth セレクタにマッチする子要素 ( .container にマッチする子要素です。）

もし .container 要素でない場合は nth-child であり、その 親 の場合、それは選択されません。

から スペック :

は :nth-child(an+b) 擬似クラス表記は を持つ an+b-1 兄弟 が、ドキュメントツリーでその前にある場合、どのような の正整数またはゼロ値に対して n であり、親要素を持つ。

この例を考えてみましょう。

<div class="parent">
    <div>1st</div>
    <div>2nd</div>
    <div>3rd</div>
    <div class="container">4th</div>
    <div class="container">5th</div>
    <div class="container">6th</div>
    <div>7th</div>
    <div class="container">8th</div>
    <div>9th</div>
</div>

この場合 .container:nth-child(2) が選択されない場合、2番目の div.container 要素 (これは 5th の内容)。なぜなら、その要素は 2番目の の子であるため、親の子ツリーでは

また .container:nth-child(n+3) を選択すると、すべての div.container 要素を選択します。 n から始まっているからです。 0 は、親の子ツリーの最初の要素で、最初の div.container は 4番目の子 であり、その親の

n starts from 0

n = 0: (0 + 3) = 3 => 3rd element
n = 1: (1 + 3) = 4 => 4th element
n = 2: (2 + 3) = 5 => 5th element
...

したがって div.container:nth-child(n+3) はすべての 3 , 4位 , 5位 ... 子要素のマッチング div.container セレクタにマッチする子要素です。

オンラインデモ .