title: How to divide content with CSS even, odd?
body: <p>I have a page with content like that.</p>
  
  <pre><code>#################################
  #  __________________________   #
  # |           |              |  #
  # |          |               |  #
  # |  text   |       IMAGE    |  #
  # |        |                 |  #
  # |_______|__________________|  #
  #                               #
  #  __________________________   #
  # |           |              |  #
  # |          |               |  #
  # |  IMAGE  |        text    |  #
  # |        |                 |  #
  # |_______|__________________|  #
  #################################
  </code></pre>
  
  <p>With my code like this:</p>
  
  <pre><code>&lt;!-- &lt;p&gt; -&gt; &lt;image&gt; --&gt;
  &lt;div class="even_odd"&gt;
      &lt;p&gt;&lt;/p&gt;
  &lt;/div&gt;
  &lt;div class="even_odd"&gt;
      &lt;img src="" alt=""&gt;
  &lt;/div&gt;
  
  &lt;!-- &lt;image&gt; -&gt; p --&gt;
  &lt;div class="even_odd"&gt;
      &lt;img src="" alt=""&gt;
  &lt;/div&gt;
  &lt;div class="even_odd"&gt;
      &lt;p&gt;&lt;/p&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Now, I want to set default CSS:</p>
  
  <p>When number is <code>odd</code>, it will set <code>text</code> to <code>float: left</code>, <code>image</code> to <code>float: right</code>.</p>
  
  <p>When number is <code>even</code>, it will set <code>image</code> to <code>float: left</code>, <code>text</code> to <code>float: right</code>.</p>
  
  <p>Currently, I must do like this:</p>
  
  <pre><code>.even_odd:nth-child(1), event_odd:nth-child(4), ..... many and many child .... {
     float: left;
  }
  
  .even_odd:nth-child(2), event_odd:nth-child(3), ..... many and many child .... {
     float: left;
  }
  </code></pre>