Zebra che striscia un tavolo flexbox con articoli di imballaggio

Question

Sto cercando il modo più semplice per zebra di strisciare le righe sulla seguente tabella di risposta flessibile.

In altre parole, le righe 2 e 4 in questo esempio, ma illimitate, non posso sapere quante righe ci saranno perché questo è per un componente riutilizzabile in un sistema CMS.

L'HTML non può cambiare ma il numero di righe e colonne cambierà spesso. Sono felice di impostare un limite per le colonne ma non per le righe.

C'è un modo per farlo in puro CSS?

.Rtable { 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
} 
 

 
.Rtable-cell { 
 
    box-sizing: border-box; 
 
    flex: 33.33%; 
 
    margin: -1px 0 0 -1px; 
 
    padding: 5px 10px; 
 
    border: solid 1px slategrey; 
 
} 
 

 
h3 { margin: 0; } 
 

 
@media all and (max-width: 500px) { 
 
    .Rtable { 
 
    display: block; 
 
    } 
 
}

<div class="Rtable"> 
 

 
    <div style="order:1;" class="Rtable-cell"><h3>Eddard Stark</h3></div> 
 
    <div style="order:2;" class="Rtable-cell">Has a sword named Ice</div> 
 
    <div style="order:3;" class="Rtable-cell">No direwolf</div> 
 
    <div style="order:4;" class="Rtable-cell">Male</div> 
 
    <div style="order:5;" class="Rtable-cell"><strong>Lord of Winterfell</strong></div> 
 

 
    <div style="order:1;" class="Rtable-cell"><h3>Jon Snow</h3></div> 
 
    <div style="order:2;" class="Rtable-cell">Has a sword named Longclaw</div> 
 
    <div style="order:3;" class="Rtable-cell">Direwolf: Ghost</div> 
 
    <div style="order:4;" class="Rtable-cell">Male</div> 
 
    <div style="order:5;" class="Rtable-cell"><strong>Knows nothing</strong></div> 
 

 
    <div style="order:1;" class="Rtable-cell"><h3>Arya Stark</h3></div> 
 
    <div style="order:2;" class="Rtable-cell">Has a sword named Needle</div> 
 
    <div style="order:3;" class="Rtable-cell">Direwolf: Nymeria</div> 
 
    <div style="order:4;" class="Rtable-cell">Female</div> 
 
    <div style="order:5;" class="Rtable-cell"><strong>No one</strong></div> 
 

 
</div>

Answer 1

Idealmente, il selettore che si desidera targetizzerà i valori pari contenuti nell'attributo style. Qualcosa di simile a questo:

.Rtable > div[style*="order"][style*={even}] { ... } 

In sostanza, questo selettore fantasia dice: bersaglio tutti i div con attributo style che contiene (*) i valori di "ordine" e un numero pari.

quest'ultimo possa essere semplificato a poco:

.Rtable > div[style*={even}] { ... } 

Ma questa sorta di magia CSS non esiste, che io sappia. (CSS Selectors 3 complete list)

Selectors 4 offre un miglioramento :nth-child() pseudo-class, che può essere in grado di eseguire tali strisce zebra. Ma questo non è pronto per il prime time.

Per ora, direi il metodo CSS più semplice per realizzare il vostro obiettivo ...

Sto cercando il modo più semplice per le righe della banda della zebra nella tabella seguente FlexBox reattivo.

... potrebbe essere quella di aggiungere una classe ad ogni elemento con un valore anche order.

E con una leggera regolazione della query multimediale, lo zebra striping funziona su diverse dimensioni dello schermo.

.Rtable { 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
} 
 

 
.Rtable-cell { 
 
    box-sizing: border-box; 
 
    flex: 33.33%; 
 
    margin: -1px 0 0 -1px; 
 
    padding: 5px 10px; 
 
    border: solid 1px slategrey; 
 
} 
 

 
h3 { margin: 0; } 
 

 
/* NEW */ 
 
.stripe { 
 
    background-color: black; 
 
    color: white; 
 
} 
 

 
/* ADJUSTED */ 
 
@media all and (max-width: 500px) { 
 
    .Rtable { display: block; } 
 
    .stripe { background-color: white; color: black; } 
 
    .Rtable-cell:nth-child(even) { background-color: black; color: white;} 
 
}

<div class="Rtable"> 
 

 
    <div style="order:1;" class="Rtable-cell"><h3>Eddard Stark</h3></div> 
 
    <div style="order:2;" class="Rtable-cell stripe">Has a sword named Ice</div> 
 
    <div style="order:3;" class="Rtable-cell">No direwolf</div> 
 
    <div style="order:4;" class="Rtable-cell stripe">Male</div> 
 
    <div style="order:5;" class="Rtable-cell"><strong>Lord of Winterfell</strong></div> 
 

 
    <div style="order:1;" class="Rtable-cell"><h3>Jon Snow</h3></div> 
 
    <div style="order:2;" class="Rtable-cell stripe">Has a sword named Longclaw</div> 
 
    <div style="order:3;" class="Rtable-cell">Direwolf: Ghost</div> 
 
    <div style="order:4;" class="Rtable-cell stripe">Male</div> 
 
    <div style="order:5;" class="Rtable-cell"><strong>Knows nothing</strong></div> 
 

 
    <div style="order:1;" class="Rtable-cell"><h3>Arya Stark</h3></div> 
 
    <div style="order:2;" class="Rtable-cell stripe">Has a sword named Needle</div> 
 
    <div style="order:3;" class="Rtable-cell">Direwolf: Nymeria</div> 
 
    <div style="order:4;" class="Rtable-cell stripe">Female</div> 
 
    <div style="order:5;" class="Rtable-cell"><strong>No one</strong></div> 
 

 
</div>

JSFIDDLE DEMO

Answer 2

Se ti prendo a destra e dire che si desidera righe zebra striscia sulla numero 2, 4, ...

per Zebra striping fila numero due è necessario cambiare il colore di sfondo di 2, 5, 7, ... quindi la risposta sarebbe Rtable > div:nth-child(5n + 2) { background-color: #ccc; }. per la 4a riga la formula sarebbe nth-child(5n + 4) e così via.

Per i casi in cui si desidera ripetere il processo a numero illimitato, è necessario utilizzare un preprocessore come SASS o utilizzare JAVASCRIPT. Altrimenti l'unica opzione in css è sapere con precisione quali righe devono essere striate.

Answer 3

non è stato specificato che doveva scalare per infinite colonne, solo infinite righe, così si potrebbe 4 regole per ogni colonna per selezionare ogni seconda cella, vale a dire :

             
  
 
   
 
    
/* 4(columns)*2(every second cell) = 8n */ 
 
    /* then repeat for each column (+1, +2 etc) */ 
 
    .Rtable-cell:nth-child(8n+1) { 
 
     background-color: pink; 
 
    }  
 
    .Rtable-cell:nth-child(8n+2) { 
 
     background-color: pink; 
 
    }  
 
    .Rtable-cell:nth-child(8n+3) { 
 
     background-color: pink; 
 
    }  
 
    .Rtable-cell:nth-child(8n+4) { 
 
     background-color: pink; 
 
    }
 
   
 
  
 
 

 

Se si utilizza un preprocessore come MENO, è possibile effettuare un mixin:

             
  
 
   
 
    
/* 
 
    .mxn-TableStripes(@n, @i: 1) when (@i =< @n) { 
 
     @second-row: @n*2; 
 
     @sel: ~"@{second-row}n + @{i}"; 
 
     .Rtable-cell:nth-child(@{sel}) { 
 
     background-color: pink; 
 
     } 
 
     .mxn-TableStripes(@n, (@i + 1)); 
 
    } 
 
    //Param is number of columns 
 
    .mxn-TableStripes(4); 
 
    */