Skip to content Skip to sidebar Skip to footer
Home / Css / Html

Do Angle Brackets Need To Be Html-escaped In Nested Style Elements?

Post a Comment
Suppose you have the following in your HTML document: Is it valid syntax to HTML-escape the greater-than child se

Solution 1:

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,<htmlxmlns="http://www.w3.org/1999/xhtml"><head><style>ul.foo&gt;li{color:red}</style></head><body><ulclass="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>

Post a Comment for "Do Angle Brackets Need To Be Html-escaped In Nested Style Elements?"