I am hiding an element using inline css, like so:

<span class="hidden-nojs" style="display:none">Some text</span>

Next I use jQuery to show the element, like so:

$(".hidden-nojs").show();

This works great. As soon as I remove the inline css and put display:none on the external css stylesheet for the hidden-nojs class, it stops working. This is what I wrote in the external stylesheet:

.hidden-nojs {
    display: none;  
}

I'm assuming that the external stylesheet loads after the jQuery has already run? This is somewhat annoying as I would like to hide multiple elements with css and would like to avoid using inline css.

Why will show() only work for fields that are hidden using inline css? How can I fix this problem?