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

Question

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.

Oriol · Accepted Answer · 2016-10-27T15:02:29.183

4

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>

edited Oct 27 '16 at 15:02

answered Oct 27 '16 at 14:53

Oriol

274,082
63
437
513

Just tested this - yes, this did the trick. Thank you for your help – The One and Only ChemistryBlob Oct 27 '16 at 15:03
BTW - white space between the "\a" and "ple" seems unnecessary – The One and Only ChemistryBlob Oct 27 '16 at 15:06
@TheOneandOnlyChemistryBlob That's because the following char (`p`) is not a hexadecimal digit. But IMO it's better to make clear the end of the number, either by adding a space or providing exactly 6 hexadecimal digits. – Oriol Oct 27 '16 at 15:08

MJN · Answer 2 · 2016-10-27T14:59:58.887

0

May be you can just use div[title^="exam\00000a"] and it works

Check Here on Codepen

edited Oct 27 '16 at 14:59

answered Oct 27 '16 at 14:56

MJN

610
1
7
19

Please read my post - this selects both the second and third divs – The One and Only ChemistryBlob Oct 27 '16 at 14:57
The question already mentions `div[title^="exam"]` and says this is not what it wants. – Oriol Oct 27 '16 at 14:58

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

2 Answers2