Dynamically lighten the background on each list item child - HTML CSS CSS Widget

HTML CSS examples for CSS Widget:UL Color

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

Description

Dynamically lighten the background on each list item child

Demo Code

ResultView the demo in separate window 

<html lang="en">
 <head> 
  <title>Lorem ipsum dolo</title> 
  <style>
ul li {
   padding:11px;
   background-color:Chartreuse;
}

.list-item-1 {<!--  w  w w.  j a  v  a  2 s.  c om-->
   background-color:yellow;
}

.list-item-2 {
   background-color:blue;
}

.list-item-3 {
   background-color:pink;
}

.list-item-4 {
   background-color:OrangeRed;
}

.list-item-5 {
   background-color:grey;
}
</style> 
 </head> 
 <body translate="no"> 
  <ul> 
   <li class="list-item-1">L</li> 
   <li class="list-item-2">L</li> 
   <li class="list-item-3">L</li> 
   <li class="list-item-4">L</li> 
   <li class="list-item-5">L</li> 
  </ul>  
 </body>
</html>

Related Tutorials