Seleziona le prime tre immersioni

Question

In CSS voglio selezionare le tre prime div. Ho questo codice:

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>

provo sopra i CSS, ma non funziona.

Answer 1

Non funziona come previsto perché :nth-child(3n) selezionerà ogni terzo elemento.

È necessario selezionare ogni elemento a partire dal terzo conteggio all'indietro, pertanto è possibile utilizzare -n + 3 o -1n + 3.

In altre parole, dato il modello an+b, a deve essere 1 (o omesso) poiché non si desidera saltare gli elementi. Inoltre, a dovrebbe essere negativo e b dovrebbe essere 3 poiché stai iniziando dal terzo elemento.

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

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

Vale la pena ricordare che div:nth-child(-1n + 3) selezionerà solo l'elemento se è uno dei primi tre elementi e anche un tipo di elemento div. In altre parole, se il terzo elemento è un span, verranno selezionati i primi due div elementi:

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

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

Se i tipi di elementi variano (come sopra), quindi si dovrebbe utilizzare :nth-of-type() invece:

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

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