Ciao, la pseudo-classe :nth-child(x) fa riferimento ad un elemento (in posizione x) che ha semplicemente la caratteristica di essere "figlio", a prescindere dal tipo e da qualsiasi classe sia specificata per questo.
Cerco di spiegarti la logica di funzionamento di tale pseudo-classe facendo qualche esempio.
Supponiamo di avere questo:
codice:
#attributes_0 :nth-child(2)
Qui verrà selezionato esattamente il secondo "figlio" di #attributes_0. Cioè l'elemento in seconda posizione, rispetto all'ordine in cui tali elementi sono disposti all'interno dell'elemento contenitore. Nel tuo caso è <div class="pb_clr">...</div> del gruppo1.
Tra parentesi, non è detto che sia un figlio discendente diretto. Per cui, se quei div hanno a loro volta dei figli, questo selettore cerca in profondità andando a selezionare tutti i secondi figli discendenti (anche indirettamente) di #attributes_0.
Nello specifico sarebbe meglio scrivere in questo modo:
codice:
#attributes_0>:nth-child(2)
Ad ogni modo, otterresti un risultato analogo anche specificando il tipo di elemento (cioè div) in questo modo:
codice:
#attributes_0 div:nth-child(2)
o così:
codice:
#attributes_0>div:nth-child(2)
Perché, nel tuo esempio, il secondo figlio è, di fatto, un div.
Ma andando ad aggiungere la classe .atr_line, come tu hai fatto con l'intento di selezionare il secondo figlio con quella classe, non otterrai alcunché:
codice:
#attributes_0 div.atr_line:nth-child(2)
In questo caso, infatti, viene cercato qualsiasi elemento che sia di tipo div, che abbia la classe .atr_line. e che sia il secondo figlio (a prescindere comunque dagli altri fattori).
Come controprova, scrivendo in questo modo (occhio alla classe):
codice:
#attributes_0 div.pb_clr:nth-child(2)
...puoi osservare che sarà selezionato esattamente il secondo elemento div tra i figli di tale contenitore; e non il secondo elemento preso dal sottogruppo di elementi che hanno classe .pb_clr.
Non so se sono riuscito a farti capire la sottile differenza.
Un selettore analogo, ma più specifico, è :nth-of-type() il quale seleziona gli elementi figli in base al loro tipo.
In questo caso è una cosa più simile a ciò che vorresti ottenere, anche se comunque non risolve.
Ad esempio se la situazione fosse questa:
codice:
<div id="padre">
<div>...</div>
<p>...</p>
<div>...</div>
<p>...</p>
<div>...</div>
<p>...</p>
</div>
...con un css del genere:
codice:
#padre>div:nth-of-type(2){
color: red;
}
...puoi notare che viene selezionato il secondo elemento tra quelli, però, di tipo div. Cioè la posizione indicata fa riferimento al sottogruppo di elementi figli che siano di quello stesso specifico tipo.
Per concludere, non esiste attualmente un selettore simile che consideri il sottogruppo di elementi in base ad una specifica classe.
Puoi risolvere però in diversi modi:
- Se la tua struttura prevede un numero fisso di elementi per ogni tuo gruppo, allora fai i dovuti calcoli per specificare la posizione su :nth-child(x). Cioè, se ogni gruppo ha esattamente due div, uno di seguito all'altro, avrai che il secondo elemento con classe .atr_line è in realtà il terzo.
In sostanza, il selettore sarà questo:
codice:
#attributes_0>:nth-child(3)
- Se invece puoi modificare la struttura html annidando i vari div, ad esempio:
codice:
<div id="attributes_0">
<!--gruppo1-->
<div class="atr_line">
...
<div class="pb_clr">...</div>
</div>
<!--gruppo2-->
<div class="atr_line">
...
<div class="pb_clr">...</div>
</div>
<!--gruppo3-->
<div class="atr_line">
...
<div class="pb_clr">...</div>
</div>
</div>
.. in questo caso il secondo figlio è chiaramente:
codice:
#attributes_0>:nth-child(2)
- Se puoi usare diversi tipi di elementi, allora potresti adoperare :nth-of-type(), come già mostrato sopra.
Vedi tu come meglio pensi di procedere, o attendi eventuali altre risposte; personalmente non mi viene in mente altro, anzi, perdona la lungaggine 
Permessi di invio
Rispondi quotando