Get first <li> WITHOUT jquery
<p>This may have been asked, but scrolling through about 40+ search results reveals only the jQuery solution. Let's say I want to get the first item in an unordered list and apply a new text color to it, and it alone. This is simple with jQuery.</p>

<p>Markup -></p>

<pre><code>&lt;ul&gt;
    &lt;li&gt;Item 1&lt;/li&gt;
    &lt;li&gt;Item 2&lt;/li&gt;
    &lt;li&gt;Item 3&lt;/li&gt;
&lt;/ul&gt;
</code></pre>

<p>With jQuery -></p>

<pre><code>$("ul &gt; li:first").css("color", "blue");
</code></pre>

<p>Question is, how do I achieve this <strong>without</strong> jQuery?</p>

<hr>

<p><strong>SOLUTION:</strong>
I found this method to work across all browsers (inc IE7+) -></p>

<pre><code>document
    .getElementsByTagName("ul")[0]
    .getElementsByTagName("li")[0]
    .style.color = "blue";
</code></pre>
