Blog
Select Page

CSS zebra-striping in sets of three and four

CSS

Here is a simplest way to create zebra styled elements in sets of three using CSS only.

DEMO

See the Pen CSS zebra-striping in sets of three by Puneet Sharma (@webdevpuneet) on CodePen.

Effective CSS

.zebraStrip > div:nth-child(6n+1),
.zebraStrip > div:nth-child(6n+4){
  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #FFF3C2 100%);

}
.zebraStrip > div:nth-child(6n+2),
.zebraStrip > div:nth-child(6n+5){
  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #DB96FF 100%);
    
}
.zebraStrip > div:nth-child(6n+3),
.zebraStrip > div:nth-child(6n){
  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #FFDADE 100%);
    
}

CSS zebra-striping in sets of four

DEMO

See the Pen CSS zebra-striping in sets of four by Puneet Sharma (@webdevpuneet) on CodePen.

Effective CSS

.zebraStrip{
  border:1px solid #cecece;
}
.zebraStrip > div{
  height:50px;
}
.zebraStrip > div:nth-child(8n+1),
.zebraStrip > div:nth-child(8n+5){
  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #FFF3C2 100%);

}
.zebraStrip > div:nth-child(8n+2),
.zebraStrip > div:nth-child(8n+6){
  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #DB96FF 100%);
    
}
.zebraStrip > div:nth-child(8n+3),
.zebraStrip > div:nth-child(8n+7){
  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #FFDADE 100%);
    
}

.zebraStrip > div:nth-child(8n+4),
.zebraStrip > div:nth-child(8n){
  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #cecece 100%);
    
}