title: How to give different content to every td in the table
body: <p>I'm struggling giving different content (icons in my case) to every <code>&lt;td&gt;</code> using <code>nth-chid()</code> method.</p>
  
  <p>If I'm adding this CSS rule, I see on every <code>&lt;td&gt;</code> one type of icon:</p>
  
  <pre><code>.help-block .css-context-explorer-orientation-widget td:before {
      font-family: icons;
      content: "\e04f";
      position: absolute;
  }
  </code></pre>
  
  <p>At this stage, I want to overwrite the rule above, but I see no changes, all icons are the same.</p>
  
  <pre><code>.help-block .css-context-explorer-orientation-widget td:before:nth-child(1) {
      font-family: icons;
      content: "\e04e"!important;
  }
  </code></pre>
  
  <p>If I give the <code>!important</code> rule, shouldn't overwrite the rule above?</p>
  
  <p>PS: How to overwrite the rule when I will get to second row?</p>