title: How do I make Pseudo classes work with Internet Explorer 7/8?
body: <p>I've written the following code to create a three-column layout where the first and last columns have no left and right margins respectively (by definition, the three columns will have the exact same class as they're dynamically generated--see last paragraph):</p>
  
  <pre><code>#content {
      background-color:#edeff4;
      margin:0 auto 30px auto;
      padding:0 30px 30px 30px;
      width:900px;
  }
      .column {
          float:left;
          margin:0 20px;
      }
      #content .column:nth-child(1) {
          margin-left:0;
      }
      #content .column:nth-child(3) {
          margin-right:0;
      }
  
  .width_33 {
      width:273px;
  }
  </code></pre>
  
  <p>HMTL:</p>
  
  <pre><code>&lt;div id="content"&gt;
      &lt;cfoutput query="IndexView" group="pName"&gt; &lt;!--loop one to create the columns --&gt;
          &lt;div class="column width_33"&gt; &lt;!-- Columns --&gt;
              &lt;h3&gt;#IndexView.pName#&lt;/h3&gt;
              &lt;ul&gt;
              &lt;!---LOOP two---&gt;
              &lt;cfoutput&gt;
                  &lt;li&gt;
                      #IndexView.titles#
                  &lt;/li&gt;
              &lt;/cfoutput&gt;
          &lt;/div&gt;
      &lt;/cfoutput&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The problem is that this code does not work in Internet Explorer 7 and 8? The only pseudo class I can use with IE (in this case) would be "first-child," but this does not eliminate the right margin on the third and last column. Does anyone know of a way I can make this code work on IE 7/8?</p>
  
  <p>A important side note: The three columns are being generated dynamically through a query loop, and therefore the class attribute for each column will be identical.</p>