How to Style Even and Odd Elements

How can I style even and odd elements?

Demo: http://jsfiddle.net/thirtydot/K3TuN/1323/

li {    color: black;}li:nth-child(odd) {    color: #777;}li:nth-child(even) {    color: blue;}

<ul>    <li>ho</li>    <li>ho</li>    <li>ho</li>    <li>ho</li>    <li>ho</li></ul>

Div odd and even

You can use the nth-of-type pseudo-class, combined with the keywords odd and even:

.box:nth-of-type(odd) {background-color:#000;}    .box:nth-of-type(even) {background-color:#fff;}
.box {display: inline-block;width: 100px;height: 100px;border: 1px solid #f00;}

<div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div>

Apply CSS to even and odd elements following a peer element (table with sub-headers)

The best way to approach what you are trying to do is to use multiple adjacent tables, like this:

.eval h3, .eval td {    padding: 2px 10px;}
.eval h3 {    color: rgb(233, 231, 239);    background: #5E4F67;    margin: 0;    font-weight: normal;}.eval table {    width: 100%;    margin: 0;    border-collapse: collapse;}tr.tableHeadings{    background: #9084A0;}
tr.tableItems:nth-child(odd) {background-color: rgb(233, 231, 239);} 
tr.tableItems:nth-child(even) {background-color: #f9f9f9;}tr.tableItems td:nth-child(even) {background-color: rgba(255,255,255,.5);}

<div class="eval">    <h3>Chapter Heading</h3>    <table>        <thead>            <tr class="tableHeadings"><td colspan="3">Section Heading</td></tr>            <tr class="ratingHead"><td>4</td><td>3</td><td>2</td></tr>        </thead>        <tbody>            <tr class="tableItems"><td>odd</td><td>odd</td><td>odd</td></tr>            <tr class="tableItems"><td>even</td><td>even</td><td>even</td></tr>            <tr class="tableItems"><td>odd</td><td>odd</td><td>odd</td></tr>            <tr class="tableItems"><td>even</td><td>even</td><td>even</td></tr>            <tr class="tableItems"><td>odd</td><td>odd</td><td>odd</td></tr>        </tbody>    </table>    <table>        <thead>            <tr class="tableHeadings"><td colspan="3">Section Heading</td></tr>            <tr class="ratingHead"><td>4</td><td>3</td><td>2</td></tr>        </thead>        <tbody>            <tr class="tableItems"><td>odd</td><td>odd</td><td>odd</td></tr>            <tr class="tableItems"><td>even</td><td>even</td><td>even</td></tr>            <tr class="tableItems"><td>odd</td><td>odd</td><td>odd</td></tr>            <tr class="tableItems"><td>even</td><td>even</td><td>even</td></tr>            <tr class="tableItems"><td>odd</td><td>odd</td><td>odd</td></tr>        </tbody>    </table></div>

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

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>

How do I apply odd/even styles to elements while taking into account excluded classes?

Unfortunately not possible. Previously answered here: https://stackoverflow.com/a/12205844/1590962

CSS is fully declarative; every selector is a simple condition that is true or false independently of any selector part. It's not a procedural language where you take a set and process it, narrowing it down with each step. A selector language with procedural rules would be immune to many kinds of optimisation and would be slower.
So nth-of-type is only about position within an element's parent, and not position in a 'results list so far' because CSS selectors have no such concept. A selector engine could look up the test for nth-of-type before narrowing it with not, as the rules do not interfere with each other.

Styling odd/even rows of a table differently

You need to remove the selector in the tr, otherwise it only select the tr with that class, which are always even in your HTML structure

tr:nth-child(odd) {
  background-color: green;
}

tr:nth-child(even) {
  background-color: blue;
}

<table id="price-table">
  <tr>
    <th>Price</th>
    <th>Value</th>
  </tr>
  <tr class="price-row">
    <td>0</td>
    <td>1</td>
  </tr>
  <tr>
    <th>Price</th>
    <th>Value</th>
  </tr>
  <tr class="price-row">
    <td>1</td>
    <td>2</td>
  </tr>
</table>

Using nth-child to select an even, and then an odd number of elements

A shorter code for the same output would be :

li {
  color: white;
}
li:nth-child(5n-3),
li:nth-child(5n-4) {
  color: blue;
}

li {  color: white;}li:nth-child(5n-4),li:nth-child(5n-3) {  color: blue;}/** FOR THE DEMO **/
body {  background: grey;}

<ul>  <li>1. text</li>  <li>2. text</li>  <li>3. text</li>  <li>4. text</li>  <li>5. text</li>  <li>6. text</li>  <li>7. text</li>  <li>8. text</li>  <li>9. text</li>  <li>10. text</li>  <li>11. text</li>  <li>12. text</li></ul>