Search code examples
csscss-selectorslinefeed

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

Solution

  • 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
ple">exam[newline]ple</div>