Coloring even and odd rows using css

Coloring even and odd rows using css

Last day worked in a project, where I need to coloring even and odd rows. I’d worked coloring rows using jQuery before, but this time my client asked me to do it only using CSS. It’s very simple to color rows using CSS rather than jQuery. By using only 2 lines of simple CSS code you can coloring any even and odd rows. I’m going to show you, how to color both paragraph and div rows. Let’s have a look what we are going to design.

even and odd row coloring using css

– CSS Snippets:

p{width: 500px; padding: 0; margin: 0;
border: 1px solid lightblue;line-height: 1.8em; 
margin-bottom: 3px;}
p:nth-child(odd) {background: #73f072;}
p:nth-child(even) {background: #4bb848;}

div{ width: 500px; 
    border: 1px solid lightgray;line-height: 1.8em; 
    margin-bottom: 3px;}
div:nth-child(odd) {background: #d3ba59;}
div:nth-child(even) {background: #f0e393;}

– HTML Snippets:

<h2>Paragraph Row Coloring</h2>
<p>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed         
</p>    

<p>
    do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
</p>

<p>
    Ut enim ad minim veniam, nulla pariatur. Excepteur sint occaecat 
</p>

<p>
    cupidatat non proident, sunt in culpa qui 
</p>

<h2>Div Row Coloring</h2>
<div>
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea 
</div>

<div>
    commodo consequat. Duis aute irure dolor in reprehenderit in 
</div>

<div>
    voluptate velit esse cillum dolore eu fugiat officia deserunt mollit 
</div>

<div>        
    anim id est laborum.
</div>

 

Demo

Download

 

Enjoy.

Tags:  

Share It

Related Posts