how to apply odd, even and last two cgild for li-CodePudding

I have a list and I want to apply color for odd, even and last two child elements. I have bad result which last two child effect odd elements !

          ul {
            list-style-type: none; 
            display: inline-block;
            text-align: center;
            width: 100%;
            margin: 0;
          }
          
          ul:last-child(n-2) li{
          background-color:blue}
          
          li {
            height: 25px;
            width: 25px;
            border-radius: 50%;
            display: inline-block;
          }
        
         li:nth-child(even) {
           background-color: red;
        }
        li:nth-child(odd) {
        background-color: green ;
        }

<!DOCTYPE html>
    <html>
      <head>
        <title>Christmas tree</title>
 
      </head>
      <body>
        <div>
          <ul>
            <li></li>
          </ul>
          <ul>
            <li></li>
            <li></li>
          </ul>
          <ul>
            <li></li>
            <li></li>
            <li></li>
          </ul>
          <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
          </ul>
          <ul>
            <li></li>
          </ul>
          <ul>
            <li></li>
          </ul>
        </div>
      </body>
    </html>

CodePudding user response：

In each ul list counting start over.
Is this what do you want?

<!DOCTYPE html>
<html>
  <head>
    <title>Christmas tree</title>
    <style>
      ul {
        list-style-type: none; 
        display: inline-block;
        text-align: center;
        width: 100%;
        margin: 0;
      }
      
      li {
        height: 25px;
        width: 25px;
        border-radius: 50%;
        display: inline-block;
      }
    
     ul:nth-child(even) > li {
       background-color: #cc1212;
    }
    ul:nth-child(odd) > li {
    background-color: #1bcc12 ;
    }

    </style>
  </head>
  <body>
    <div>
      <ul>
        <li></li>
      </ul>
      <ul>
        <li></li>
        <li></li>
      </ul>
      <ul>
        <li></li>
        <li></li>
        <li></li>
      </ul>
      <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
      </ul>
      <ul>
        <li></li>
      </ul>
      <ul>
        <li></li>
      </ul>
    </div>
  </body>
</html>

CodePudding user response：

not entirely clear what you are trying to do, but from what you say here's how to handle the last two

ul {
            list-style-type: none; 
            display: inline-block;
            text-align: center;
            width: 100%;
            margin: 0;
          }
          
          ul:last-child(n-2) li{
          background-color:blue}
          
          li {
            height: 25px;
            width: 25px;
            border-radius: 50%;
            display: inline-block;
          }
        
         li:nth-child(even) {
           background-color: red;
        }
        li:nth-child(odd) {
        background-color: green ;
        }
        
         ul:nth-last-child(2) li{
              background-color:blue}
            
              
           ul:last-child li {
              background-color:blue}

<!DOCTYPE html>
    <html>
      <head>
        <title>Christmas tree</title>
 
      </head>
      <body>
        <div>
          <ul>
            <li></li>
          </ul>
          <ul>
            <li></li>
            <li></li>
          </ul>
          <ul>
            <li></li>
            <li></li>
            <li></li>
          </ul>
          <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
          </ul>
          <ul>
            <li></li>
          </ul>
          <ul>
            <li></li>
          </ul>
        </div>
      </body>
    </html>