CSS3 nth-child tiles background color alternate based on number of columns - HTML CSS CSS Layout

HTML CSS examples for CSS Layout:3 Column

  1. HOME
  2. HTML CSS
  3. CSS Layout
  4. 3 Column

Description

CSS3 nth-child tiles background color alternate based on number of columns

Demo Code

ResultView the demo in separate window 

<html>
 <head> 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
  <style id="compiled-css" type="text/css">

ul{<!--   w  w  w . j  a  v a  2 s. c  o  m-->
   border: 1px solid #ccc;
   list-style: none;
   padding: 0;
}
ul:before, ul:after{
   content:'';
   display: table;
}
ul:after{
   clear: both;
}
ul.five{
   width: 500px;
}
ul.four{
   width: 400px;
}
ul li{
   width: 100px;
   color: red;
   float: left;
   border: 1px solid #ccc;
   box-sizing: border-box;
   text-align: center;
   height: 80px;
   padding-top:30px;
}
ul.five li:nth-child(even){
   background-color: #6a8bab;
}
ul.five li:nth-child(odd){
   background-color: rgb(106, 170, 126);
}
ul.four li {
   background-color: silver;
}
ul.four li:nth-child(5n+1), ul.four li:nth-child(5n+3), ul.four li:nth-child(9)   {
   background-color: black;
}
      </style> 
 </head> 
 <body> 
  <h4>Odd number of columns in each row</h4> 
  <ul class="five"> 
   <li>1</li> 
   <li>2</li> 
   <li>3</li> 
   <li>4</li> 
   <li>5</li> 
   <li>6</li> 
   <li>7</li> 
   <li>8</li> 
   <li>9</li> 
   <li>10</li> 
  </ul> 
  <h4>Even number of columns in each row</h4> 
  <ul class="four"> 
   <li>1</li> 
   <li>2</li> 
   <li>3</li> 
   <li>4</li> 
   <li>5</li> 
   <li>6</li> 
   <li>7</li> 
   <li>8</li> 
   <li>9</li> 
   <li>10</li> 
   <li>11</li> 
   <li>12</li> 
  </ul>  
 </body>
</html>

Related Tutorials