Can you style a noscript element?

Question

Is it possible to use the noscript element in CSS selectors?

noscript p {
    font-weight: bold;
}

Answer 1

Yes! You can definitely do that.

In fact, many (all?) browsers support targeting any arbitrary tag using CSS. "Official" tags in the HTML spec only define what a browser should do with them. But CSS is a language that targets any flavor of XML, so you can say foo {font-weight:bold;} and in most browsers, <foo> hello world </foo> will come out bold.

As Darko Z clarifies, IE6/7 do not add arbitrary (non-standard) elements to the DOM automatically from the source; they have to be programmatically added.

Answer 2

I have an IE bug to keep in mind. If, like OP, you just want to style text within the noscript tag and not the noscript tag itself, please disregard this..

Say you want to make the noscript tag's background red. In IE8, it will show up with JS enabled. Just the box itself, not the text inside.

So this combination isn't good:

CSS

noscript {
    background-color: red;
}

HTML

<noscript>Turn on your damned JavaScript! What is this, 1999?</noscript>

But this workaround works fine:

CSS

noscript div {
    background-color: red;
}

HTML

<noscript><div>Turn on your damned JavaScript! What is this, 1999?</div></noscript>

Weirdly, I only see this behavior in IE8, not IE7. And who knows about 6..

Answer 3

In addition to Rex M's answer - IE 6/7 (6 def, 7 maybe?) will not style an arbitrary tag for you. But lucky for you as with all many IE problems there's a workaround.

Say you want to style an element called foo. To get IE to recognise it as a styleable element you need to include this line somewhere in your JS:

document.createElement('foo');

You don't need to append it, just create it.

This will kick IE into styling that element for you with the CSS rule:

foo { font-weight:bold; }