Targeting every consecutive pair of li elements, possible with CSS3 - HTML CSS CSS Widget

HTML CSS examples for CSS Widget:UL Element

  1. HOME
  2. HTML CSS
  3. CSS Widget
  4. UL Element

Description

Targeting every consecutive pair of li elements, possible with CSS3

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">
li:not(:nth-child(3n+2)) {
   color:Chartreuse;
}
</style> <!--from w  w  w  . j  a v  a 2 s  .co  m-->
 </head> 
 <body> 
  <ul> 
   <li>L</li> 
   <li>L</li> 
   <li>L</li> 
   <li>L</li> 
   <li>L</li> 
   <li>L</li> 
   <li>L</li> 
   <li>L</li> 
   <li>L</li> 
   <li>Lo</li> 
   <li>Lo</li> 
   <li>Lo</li> 
   <li>Lo</li> 
  </ul>  
 </body>
</html>

Related Tutorials