Selezionare la seguente ennesima sibling

Question

mi sono chiesto se c'è una soluzione migliore rispetto a quello che ho trovato senza cambiare l'html-struttura di

La struttura HTML simile a questo

<div class="wrap"> 
    <div class="divider"></div> 
    <div class="block"></div> 
    <div class="block"></div> 
    <div class="divider"></div> 
</div> 

Quindi c'è varie DIV sulla allo stesso livello, quello che voglio fare è colorare ogni quarto blocco in modo diverso, fino a quando appare un divisore, quindi dovrebbe ricominciare.

Ho pensato che qualcosa come .block:nth-child(4n) avrebbe fatto il trucco, ma in realtà conta gli elementi in base al genitore, non in base alla classe.

Ecco il JSFiddle da provare. Block # 4 e # 8 in ogni riga devono essere diversamente colorati http://jsfiddle.net/SKgdH/3/

E questo è come ho fatto sorta-di lavoro: http://jsfiddle.net/SKgdH/1/

Quello che ho fatto è stato quello di cercare il quarto fratello del .divider come questo .divider + .block + .block + .block + .block

Funziona, tuttavia, dovrei scrivere lo stesso per l'8, 12, 16, ... blocco, che non lo rende più automatico.

C'è qualcosa come .divider + .block:nth-sibling(4) o .divider + .block:nth-of-class(4)?

Forse uno di voi ha un'idea su come risolvere questo problema senza modificare il codice sorgente o utilizzare javascript.

Answer 1

Una tale pseudo-classe non funzionerebbe perché ci si aspetta che corrisponda agli elementi relativi a un diverso selettore composto, che non è il modo in cui funzionano i selettori semplici. Ad esempio, se hai scritto un selettore complesso che aveva solo un singolo selettore composto con quella pseudo-classe (e nessun combinatori di pari livello):

.block:nth-sibling(4n) 

ci si può aspettare questo per abbinare .block:nth-child(4n), match niente affatto, o essere non valido?

Sarebbe bello poterlo sopprimere + .block + .block + .block + .block e farlo ripetere in qualche modo, ma sfortunatamente a causa di come è stata progettata la sintassi del selettore, non è possibile.

È necessario utilizzare JavaScript e/o aggiungere classi aggiuntive agli elementi appropriati.

Answer 2

Come spiegato da BoltClock, non è possibile farlo senza JavaScript. Se si sceglie questa strada (anche se si dice esplicitamente senza JavaScript), si può fare con jQuery come questo:

var counter = 0; 
$('.wrap > div').each(function() { 
    if ($(this).hasClass('divider')) { 
     counter = 0; 
    } 
    else if ($(this).hasClass('block')) { 
     counter++; 
     if (counter % 8 == 4) { 
      $(this).css('background-color','#ff0'); 
     } 
    } 
}); 

che coloreranno il 4 ° colonna in ogni riga gialla.

Answer 3

Il problema è che :nth-of-type riferisce alla il tipo di elemento ed entrambi .divider e .block sono elementi di tipo <div>.

Quello che serve veramente è che .divider sia un diverso tipo di elemento da .block.

---

Su questa base, se gli unici due elementi figlio di <div class="wrap"> sono:

1. <div class="divider">
2. <div class="block">

sarei tentato di scambiare <div class="divider"> per <hr> - l'elemento tematico interruzione.

Quindi è possibile uso:

.wrap div:nth-of-type(4) 

allo stile .block.