CSS primo bambino quando 7 o più figli

Question

Quindi ho questa query per ottenere il last-child quando ci sono 7 o più elementi

li:nth-last-child(7) ~ li:last-child { 
    background: red; 
} 

Questo funziona per qualsiasi numero di elementi a patto che ci sia un minimo di 7 . Quello che voglio fare è il contrario, prendi il first-child.

ho provato la seguente

li:nth-last-child(7) ~ li:first-child { 
    background: red; 
} 

Ma questo non funziona. Stranamente posso ottenere il secondo elemento figlio utilizzando il seguente

li:nth-last-child(7) ~ li:nth-child(2) { 
    background: red; 
} 

So che questo è piuttosto complessa CSS, e potrebbe anche non essere possibile, ma mi chiedo se si può fare. Preferirei non usare JS se possibile. Immagino che trattarlo come una sfida;)

Answer 1

È possibile selezionare il primo elemento quando ci sono 7 o più elementi utilizzando il selettore di seguito:

div:first-child:nth-last-child(n+7) { 
    color: red; 
} 

Spiegazione:

• nth-last-child(n+7) - selezionerà tutto ma gli ultimi sette elementi figlio. Quando ci sono meno di sette figli, questo non corrisponde a nessuno.
• :first-child:nth-last-child(n+7) - Sarà selezionare solo l'elemento che è anche il primo figlio tra gli elementi che corrispondono dall'altra (che è, selezionare solo primo figlio quando ci sono sette o più figli)

.container > div:first-child:nth-last-child(n+7) { 
 
    color: red; 
 
}

<h3>Has seven children</h3> 
 
<div class='container'> 
 
    <div>Test</div> 
 
    <div>Test</div> 
 
    <div>Test</div> 
 
    <div>Test</div> 
 
    <div>Test</div> 
 
    <div>Test</div> 
 
    <div>Test</div> 
 
</div> 
 

 
<h3>Has six children</h3> 
 
<div class='container'> 
 
    <div>Test</div> 
 
    <div>Test</div> 
 
    <div>Test</div> 
 
    <div>Test</div> 
 
    <div>Test</div> 
 
    <div>Test</div> 
 
</div> 
 

 
<h3>Has nine children</h3> 
 
<div class='container'> 
 
    <div>Test</div> 
 
    <div>Test</div> 
 
    <div>Test</div> 
 
    <div>Test</div> 
 
    <div>Test</div> 
 
    <div>Test</div> 
 
    <div>Test</div> 
 
    <div>Test</div> 
 
    <div>Test</div> 
 
</div>

Fiddle Demo (per qualche motivo non sta lavorando con n+7 nello snippet)

Answer 2

per il primo elemento che potresti usare il primo di tipo nel tuo css. Esempio:

p:first-of-type { 
     background: #ff0000; 
    }