title: Definse CSS Rules for first element of input type
body: <p>I want to adjust margins for my radio buttons, they shall be all the same except the first radio button which shouldn't have a margin-left of 15px (it should be 0). I tried to solve this with the :first-of-type keyword but then it will define rules for all input-types. How can I solve this by keeping CSS und HTML strictly divided and in a beatiful way ?</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="payment-methods"&gt;
      &lt;div class="method"&gt;&lt;input name="1" type="radio"&gt;&lt;label class="radio"&gt;&lt;img src="https://lol-accs.com/images/ico_visa.jpg" alt=""&gt;&lt;/label&gt;&lt;/div&gt;
      &lt;div class="method"&gt;&lt;input name="1" type="radio"&gt;&lt;label class="radio"&gt;&lt;img src="https://lol-accs.com/images/ico_visa.jpg" alt=""&gt;&lt;/label&gt;&lt;/div&gt;
      &lt;div class="method"&gt;&lt;input checked="" name="1" type="radio"&gt;&lt;label class="radio"&gt;&lt;img src="https://lol-accs.com/images/ico_visa.jpg" alt=""&gt;&lt;/label&gt;&lt;/div&gt;
      &lt;div class="method"&gt;&lt;input name="1" type="radio"&gt;&lt;label class="radio"&gt;&lt;img src="https://lol-accs.com/images/ico_visa.jpg" alt=""&gt;&lt;/label&gt;&lt;/div&gt;
      &lt;div class="method"&gt;&lt;input name="1" type="radio"&gt;&lt;label class="radio"&gt;&lt;img src="https://lol-accs.com/images/ico_visa.jpg" alt=""&gt;&lt;/label&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.method, img, input {
    display: inline-block;
    vertical-align: middle;
  }
  .payment-methods input[type=radio]:first-of-type {
    margin-left: 0px;
  }
  
  .payment-methods input[type=radio] {
    margin: 0px 5px 0px 15px;
  }
  </code></pre>
  
  <p>JSFiddle: <a href="http://jsfiddle.net/0apLmge9/4/" rel="nofollow">http://jsfiddle.net/0apLmge9/4/</a></p>