Zebra, sarıcı öğeler içeren bir esnek kutu tablosunu çiziyor

Question

Aşağıdaki yanıt veren esnek posta kutusu tablosundaki satırları zebra uygulamasının en kolay yolunu arıyorum.

Başka bir deyişle, bu örnekte satır 2 ve 4, ancak sınırsız, kaç tane satır olacağını bilmiyorum çünkü bu bir CMS sisteminde yeniden kullanılabilir bir bileşen için.

HTML değiştirilemez, ancak satır ve sütun sayısı sık sık değişecektir. Sütunlarda bir sınır koymadan mutluyum ama satırlar değil.

Saf CSS'de yapmanın bir yolu var mı?

.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

İdeal olarak, istediğiniz seçici, style özniteliğinde bulunan çift değerleri hedefler. Böyle bir şey:

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

Temelde, bu fantezi seçici diyor ki: Hedef bir stille tüm div'ler (*) içerdiğini değerler "emri" ve eşit sayıda bağlıyor.

O sadece basitleştirilmiş olabilir:

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

Ama CSS büyü bu tür bildiğim kadarıyla yok. (CSS Selectors 3 complete list)

Selectors 4, bu tür zebra şeritlerini gerçekleştirebilecek gelişmiş bir :nth-child() pseudo-class sunar. Ama bu asal zaman için hazır değil.

Şimdilik, aşağıdaki duyarlı FlexBox tabloda zebra şerit sıraları için en basit yol arıyorum amacı gerçekleştirmek için en basit CSS yöntemi ...

söyleyebilirim.

... daha order değeri ile her öğe için bir sınıf eklemek olacaktır.

Ve medya sorgunuzda hafif bir ayarlamayla, zebra şeridi farklı ekran boyutlarında çalışır.

.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

Sana doğru olsun ve sen numara 2, 4 üzerine zebra şerit sıraları istiyor diyorsan, ... zebra şeritleme satır İki numaralı

değiştirmek zorunda 2, 5, 7, ... 'un arka plan rengi, böylece cevap Rtable > div:nth-child(5n + 2) { background-color: #ccc; } olacaktır. 4. sıra için formül nth-child(5n + 4) ve benzeri olacaktır.

İşlemi sınırsız olarak tekrarlamak istediğiniz durumlarda, SASS gibi bir önişlemci kullanmanız veya JAVASCRIPT ürününü kullanmanız gerekir. Aksi takdirde, css'deki tek seçenek, satırların çizgili olması gerektiğini kesin olarak bilmek.

Answer 3

her sütun için 4 kural, yani her saniye hücreyi seçmek için olabilir, böylece sonsuz sütunlar, sadece sonsuz satırlar için ölçekli gerekiyordu belirtmedi :

              
  
 
   
 
    
/* 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; 
 
    }
 
   
 
  
 
 

 

LESS gibi bir önişlemci kullanıyorsanız, bunu aşağıdaki gibi yapabilirsiniz:

              
  
 
   
 
    
/* 
 
    .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); 
 
    */