How can I make MANY elements unselectable using jQuery or CSS? [duplicate]

Question

Possible Duplicate:
Is there a way to make a DIV unselectable?

I have seen a number of solutions out there that work for an element. However I have an area with labels and buttons. It's not just one element it's every element within a DIV.

How can I make anything contained within that DIV unselectable? Note that I cannot just put a mask layer over the DIV as the DIV has buttons I need to be able to click.

Answer 1

$(".yourdiv").children().css({userSelect: 'none'});

That's in case you want to disable selection using the CSS user-select property. If not, the above can be easily generalized to other methods.

The above only selects direct children, to select all descendants, use the .find() method:

$(".yourdiv").find("*").css({userSelect: 'none'});

You can also do this using pure CSS:

.yourdiv * { /*this selects all elements that are children of yourdiv*/
    /*user-select: none rules*/
}

Or:

.yourdiv > * { /*this selects all elements that are direct descendants of yourdiv*/
    /*user-select: none rules*/
}

Answer 2

CSS:

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

HTML:

<div id="foo" class="unselectable">...</div>

Reference:

• Is there a way to make a DIV unselectable?
• Disabling Selection in jQuery