Do Angle Brackets Need to be HTML-Escaped in Nested Style Elements?

Question

Suppose you have the following in your HTML document:

<style>
  ul.foo > li {
    /* etc */
  }
</style>

Is it valid syntax to HTML-escape the greater-than child selector as $gt;?

<style>
  ul.foo &gt; li {
    /* etc */
  }
</style>

I understand it's not necessary, but is it good form?

If you ever decide to move this to a separate stylesheet you'll have to refactor your css, which seems like a bad idea to me... — Pevara, May 11 '17 at 17:49

BoltClock · Accepted Answer · 2017-05-11T17:49:13.477

It's valid HTML, but not valid CSS, because the embedded stylesheet isn't parsed as HTML at all; it's parsed as CSS, meaning that the > is seen literally. > is not a valid selector, and therefore it's not valid CSS.

This is only true of HTML; in XHTML, it is valid and browsers will decode the > into > before parsing the stylesheet as CSS. The following data URI demonstrates this:

data:application/xhtml+xml,<html xmlns="http://www.w3.org/1999/xhtml"><head><style>ul.foo&gt;li{color:red}</style></head><body><ul class="foo"><li>Foo</li></ul></body></html>

Just like in HTML, though, it's not necessary in this specific context, for the reason given in the question you link to, but it's still considered well-formed XHTML. But generally, putting embedded scripts and stylesheets into CDATA sections is preferred over encoding every single <, > and &:

<style>
/* <![CDATA[ */
  ul.foo > li {
    /* etc */
  }
/* ]]> */
</style>

Do Angle Brackets Need to be HTML-Escaped in Nested Style Elements?

1 Answers1

Linked