title: Change CSS After x Characters
body: <p>I have a text string inside a <code>td</code>, as below:</p>
  
  <pre><code>&lt;td&gt;This is a long line&lt;/td&gt;
  </code></pre>
  
  <p>What I want to be able to do is change the font size of all the characters after the first seven. Now I know I could do the following:</p>
  
  <pre><code>&lt;td&gt;This is&lt;span class="different"&gt; a long line&lt;/span&gt;&lt;/td&gt;
  </code></pre>
  
  <p>Unfortunately I can't do that, as this is part of a table generated from a <code>php while</code> function, and the only way to target this is by using <code>CSS</code> <code>nth-child()</code> or similar, as it only occurs in one row. I do not think a <code>PHP</code> solution would work.</p>
  
  <p>So how can I target this? I'm basically looking for something which would do the following:</p>
  
  <pre><code>#table2 td:nth-child(6) characters(n+7) { font-size: 8px; }
  </code></pre>
  
  <p>Also, if the above isn't possible, alternatively an option would be to apply a different <code>CSS</code> to the first seven characters, and apply the <code>nth-child</code> to the whole <code>td</code>, which will be overridden by the function to add <code>CSS</code> to the first seven.</p>
  
  <p>CSS solution preferred, JS/jQuery welcome. If more information is needed, please comment and I will try and add.</p>