applying css to nth child words
<p>An interesting little problem...</p>

<p>Trying to loop through the children of a paragraph (words) and color them, one by one.</p>

<p>Here's a hard coded working version with words in separate elements:
<a href="http://jsfiddle.net/JjRHT/25/" rel="nofollow">http://jsfiddle.net/JjRHT/25/</a></p>

<p>using</p>

<pre><code>window.setInterval(function(){
$(".item:nth-child(1)").css("color", "#FFFFFF");
}, 1000);
</code></pre>

<p>just to show what I'm attempting...obviously not the way to go!</p>

<p>so - can I select each child of a paragraph? and how do I do the loop properly - with a small delay...</p>

<p>steven</p>

<p>edit:</p>

<p>I found a jquery <a href="https://github.com/davatron5000/Lettering.js" rel="nofollow">plugin</a> that splits text into words nicely ready for css:</p>

<pre><code>&lt;p class="word_split"&gt;Don't break my heart.&lt;/p&gt;
&lt;script&gt;
$(document).ready(function() {
  $(".word_split").lettering('words');
});
&lt;/script&gt;
</code></pre>

<p>Which will generate:</p>

<pre><code>&lt;p class="word_split"&gt;
  &lt;span class="word1"&gt;Don't&lt;/span&gt;
  &lt;span class="word2"&gt;break&lt;/span&gt;
  &lt;span class="word3"&gt;my&lt;/span&gt;
  &lt;span class="word4"&gt;heart.&lt;/span&gt;
&lt;/p&gt;
</code></pre>
