Flexible nth-child formula for infinite amount of posts - HTML CSS CSS Layout

HTML CSS examples for CSS Layout:Flex Container

  1. HOME
  2. HTML CSS
  3. CSS Layout
  4. Flex Container

Description

Flexible nth-child formula for infinite amount of posts

Demo Code

ResultView the demo in separate window 


<html>
 <head> 
  <style>

*, *:before, *:after {<!--   w ww  .  j  ava 2 s .c o  m-->
   -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
}
body {
   margin: 0;
}
ul {
   list-style: none;
   padding: 0;
}
li {
   float: left;
   width: 75%;
   background: green;
   padding: 20px; 
   margin-bottom: 20px; 
}
li:nth-child(even) {
   width: 25%;
}
li:nth-child(4n+1) {
   width: 25%;
   background: red;
}

li:nth-child(4n+1) + li {
   width: 75%;
}

li:nth-child(4n+4) {
   background: red;
}

      </style> 
 </head> 
 <body> 
  <ul> 
   <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