CSS attribute selectors: how to escape newlines within attribute value?

Question

I have a link with an href attribute that has carriage returns in its value (HTML cannot change):

<a href="
    http://google.com
">Testing</a> 

I originally thought a backslash can be used to escape a carriage return character (U+000D) when used inside of a string, but then read this in the CSS spec:

Any character (except a hexadecimal digit, linefeed, carriage return, or form feed) can be escaped with a backslash to remove its special meaning. For example, "\"" is a string consisting of one double quote.

Is this possible? I've tried using \a and \n as well without any luck.

http://jsfiddle.net/AHuvh/1/

Answer 1

The reason why the selector that you have doesn't work:

a[href="\
    http://google.com\
"]

Is because:

First, inside a string, a backslash followed by a newline is ignored (i.e., the string is deemed not to contain either the backslash or the newline). Outside a string, a backslash followed by a newline stands for itself (i.e., a DELIM followed by a newline).

This is mentioned in the paragraph above the one you quote from section 4.1.3, and why it says that newlines are one of the characters that cannot be escaped with a backslash.

This makes it equivalent to the following selector:

a[href="    http://google.com"]

Which would only match your element if its attribute value did not contain any newlines.

That said, it is in fact possible to match an element by an attribute value containing newlines. However, CSS makes this a little complicated:

1. To represent a newline in a CSS string, you need to use the \a escape sequence (case insensitive, up to 6 hex digits). This is stated in section 4.3.7, on strings (which are treated the same whether in a property value or an attribute selector):

   A string cannot directly contain a newline. To include a newline in a string, use an escape representing the line feed character in ISO-10646 (U+000A), such as "\A" or "\00000a". This character represents the generic notion of "newline" in CSS.

   \n has no special meaning in CSS; in fact, it's the same as n.

2. If a space directly follows an escape sequence such as \a, that space must be doubled so that the space character directly following the escape sequence can be consumed. Refer to section 4.1.3 again, which states:

   Only one white space character is ignored after a hexadecimal escape. Note that this means that a "real" space after the escape sequence must be doubled.

   This may be why you couldn't get it to work even with \a. Understandably, it's an incredibly obscure rule, especially when working with whitespace characters.

This results in the following selector, with the styles applying correctly:

a[href="\a     http://google.com\a"]

Notice that there are five space characters between the first \a and the URL, whereas in comparison there are only four spaces following the newline in your HTML.