Prevent element from taking part in text selection

Question

I have some source code in a <pre><code> with line numbers in a separate <div>. When the text is selected, the line numbers come with it, and are subsequently copied. Is there any way to prevent the line numbers from being a part of the selection, even if I select the elements above and below the source code block?

I'd like to avoid JavaScript for the benefit of people who browse with it off. (With JavaScript, I'd add a button to hide the line numbers).

unselectable="on" and the various vendor-specific user-select CSS properties did not work; the numbers are still selected and copied.

Astir

Answer 1

Give the element you want to prevent selection of an id.

Then put this in your CSS:

#id-name {
   -webkit-touch-callout: none;
   -webkit-user-select: none;
   -khtml-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
}
::-moz-selection {
   background: transparent;
}
::selection { 
   background: transparent; 
}

Aerogram

Aaaah. I understand now. The element still appears to be selected (I'm using Firefox), but the text is not actually selected and nothing is copied. To disable the selection appearance I added ::-moz-selection { background: transparent; } and ::selection { background: transparent; } on the element. – Astir

Could you add the ::selection bits to your answer? (if you don't mind) – Astir