title: Style the nth letter in a span using CSS
body: <p>I have:</p>
  
  <pre><code>&lt;span id="string"&gt;12h12m12s&lt;/span&gt;
  </code></pre>
  
  <p>and I'm looking to make the <code>h</code>, <code>m</code> and <code>s</code> smaller than the rest of the text. I've heard of the <code>nth-letter</code> pseudo element in css, but it doesn't seem to be working:</p>
  
  <pre class="lang-css prettyprint-override"><code>#string:nth-letter(3),
  #string:nth-letter(6),
  #string:nth-letter(9) {
      font-size: 2em;
  }
  </code></pre>
  
  <p>I know I could use javascript to parse the string and replace the letter with surrounding <code>span</code> tags and style the tags. However, the string is updated every second and it seems parsing that often would be ressource intensive.</p>