CODEWITHSUNDEEP
htmlcssnoscript
nickf
nickf

Reputation: 546443

Can you style a noscript element?

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

noscript p {
    font-weight: bold;
}

Upvotes: 14

Views: 12348

Answers (3)

Darko
Darko

Reputation: 38910

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; }

Upvotes: 3

mattalxndr
mattalxndr

Reputation: 9418

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..

Upvotes: 9

Rex M
Rex M

Reputation: 144182

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.

Upvotes: 16

Related Questions