How to allow text-selection of a DIV, but prevent the text-selection of the father DIV?

Question

I would like to allow the users to select text that resides in multiple DIVs that are located one after the other with small gaps between them. the problem is, that when the user drags the mouse to perform the selection, they pass over the "gaps", which causes the whole parent DIV is selected momentarily, until they enter into the following child DIV. This causes "flickers" behaviour and bad user experience, because the parent DIV also has images, and for a moment, all of the images are being selected too. I tried several method suggested in this forum, including: -moz-user-select: none; -khtml-user-select: none; -webkit-user-select: none; user-select: none; unselectable=on, and overriding the event onselectstart: return false; Unfortunately, if I were to disable selecting text in the parent DIV, all the children DIVs immediately adopted that behaviour, and that is not what I meant. I want that the parent DIV won't be selected, but its children will. Thanks

Update:

The "onselectstart" is called only for the parent DIV (and spans/paragraphs beneath it), but it is NOT called when the image is being selected. Therefore, trying to manipulate it and use "return false;" is not relevant; the image simply won't get that event.

Tim Down Tim Down · Accepted Answer · 2011-01-22T18:42:25

IE's unselectable expando property does this for you automatically; it isn't inherited. For other browsers, use an extra CSS rule. Assuming the following HTML:

<div class="unselectable" unselectable="on">
    Some unselectable text
    <div>Some selectable text</div>
    Some more unselectable text
</div>

Use the following CSS. This defines an extra rule specifically enabling text selection for descendants of unselectable elements:

*.unselectable {
   -moz-user-select: -moz-none;
   -khtml-user-select: none;
   -webkit-user-select: none;
   -o-user-select: none;
   user-select: none;
}

*.unselectable * {
   -moz-user-select: text;
   -khtml-user-select: text;
   -webkit-user-select: text;
   -o-user-select: text;
   user-select: text;
}

How to allow text-selection of a DIV, but prevent the text-selection of the father DIV?

Update:

3 Answers