3つの最初のdiv私は最初の3つのdivを選択したいCSSで

Question

を選択します。私はこのコードを持っている：

div:nth-child(3n) { 
 
    background: red; 
 
}

<div> 
 
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore laborum necessitatibus nobis obcaecati, mollitia, eos sint dolor odit. Possimus dolores recusandae sed totam, voluptatibus, voluptatum. Voluptatibus minus aut, quam ratione. 
 
</div> 
 

 
<div> 
 
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates perferendis et saepe omnis nemo, dolores quia ipsam ea blanditiis quaerat autem aut id itaque magnam recusandae sint architecto! Error, consequuntur. 
 
</div> 
 

 
<div> 
 
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem doloremque quis perspiciatis vel odio impedit itaque laborum eveniet quasi aperiam, autem cumque vero recusandae, voluptates et nesciunt quibusdam aliquid! Deleniti. 
 
</div> 
 

 
<div> 
 
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem doloremque quis perspiciatis vel odio impedit itaque laborum eveniet quasi aperiam, autem cumque vero recusandae, voluptates et nesciunt quibusdam aliquid! Deleniti. 
 
</div>

私はCSSの上にしようとしたが、それは動作しません。

Answer 1

:nth-child(3n)は、すべての第三の要素を選択しますので、期待どおりに動作していません。

3つめの要素から順にすべての要素を選択する必要があります。したがって、-n + 3または-1n + 3を使用できます。

つまり、パターンをan+bとすると、要素をスキップしたくないため、aは1（または省略）になります。さらに、aも負でなければならず、bは3である必要があります。これは3番目の要素から始めるためです。

div:nth-child(-1n + 3) { 
 
    background: #f00; 
 
}

<div>One</div> 
 
<div>Two</div> 
 
<div>Three</div> 
 
<div>Four</div> 
 
<div>Five</div>

それは最初の3つの要素と、要素タイプdivのいずれかである場合div:nth-child(-1n + 3)は唯一の要素を選択することを指摘する価値があります。第三の要素はspanある言い換えれば、最初の2つのdiv要素が選択される。

div:nth-child(-1n + 3) { 
 
    background: red; 
 
}

<div>First div</div> 
 
<div>Second div</div> 
 
<span>Span</span> 
 
<div>Third div</div>

要素タイプは、（上記のように）変わる場合は、使用すべき:nth-of-type()代わりに：

div:nth-of-type(-1n + 3) { 
 
    background: red; 
 
}

<div>First div</div> 
 
<div>Second div</div> 
 
<span>Span</span> 
 
<div>Third div</div>