Question

I want to disable text selection for specific elements. For example:

p {
    -moz-user-select: none
}

span {
    -moz-user-select: text
}

​

<div>
    <p>first paragraph</p>
    <span>first span</span>
    <p>second paragraph</p>
    <span>second span</span>
</div>       

​
The first and second paragraph cannot be selected individually. However, if I select the first span and drag down to select the second span, the second paragraph will become selected in the process. I’d like to prevent this (it functions as expected in WebKit).

I’m using Firefox 14.0.1. JSFiddle for reference: http://jsfiddle.net/GFNDY/

Answer 1

Since the selection only “apparently” includes the <p>s (for instance if you copy, only the non-<p> tags are saved in the clipboard), then all you need to do is make sure the browser doesn’t color it; that can be done by overriding the default selection-style using the CSS ::selection specifier (::-moz-selection for Mozilla).

So the CSS will have something like:

p::-moz-selection {
    background: transparent;
    color: #000000;
}

Here’s a modified version of your demo that behaves as expected: Link.
Hope that helped you in any manner!