The One and Only ChemistryBlob The One and Only ChemistryBlob - 11 months ago 66
CSS Question

How to construct CSS selector targeting attribute with value containing an ASCII line feed?

Suppose you have html that contains the following:

<div title="aaa"></div>
<div title="example"></div>
<div title="exam
ple"></div> // the enter key has been pressed after the substring "exam" in the title attribute

I understand that if I wanted to select for the second and third divs I could use the following CSS:

div[title^="exam"] {....}

But how would the third div be selected exclusively? I have Codepenned the following selectors:

div[title="exam\nple"] {...}
div[title="exam\x0Aple"] {...} // line feed ---> hex
div[title="exam\u000Aple"] {...} // line feed ---> unicode

None of these worked as I intended (i.e., selecting the third div exclusively - no elements were selected for at all).

How would one select in this case for an attribute (
here) with a value which contains a line feed using title= ?
(and not title^= or title|=, etc.)

Note - I have already read this post and this post for background info but I'm still not sure how to accomplish this.

Answer Source

From Characters and case - escaped characters,

backslash escapes allow authors to refer to characters they cannot easily put in a document. In this case, the backslash is followed by at most six hexadecimal digits (0..9A..F), which stand for the ISO 10646 character with that number, which must not be zero.

A new line character has the code U+000A. So in CSS you can escape it as \a or \00000a.

div[title="exam\a ple"] { font-size: 2em; color: green;}
<div title="aaa">aaa</div>
<div title="example">example</div>
<div title="exam