Question

I’m trying to add a CSS rule that makes the default behaviour to not allow selection of text or elements on a page. I then add a rule for specific nodes (such as paragraphs or header text) to allow text selection on them.

Unfortunately this does not work as expected and it seems impossible to override this setting on a child node.

Check this jsfiddle to see what I mean:

http://jsfiddle.net/cH8WD/

Any idea how I can get this to work properly?

Thanks

Edit:

To better illustrate the problem:

http://jsfiddle.net/cH8WD/5/

Answer 1

try “text” instead of “normal” like:

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

p, h1, h2, h3, h4, h5 {
    -webkit-user-select: text;
    -khtml-user-select: text;
    -moz-user-select: text;
    -o-user-select: text;
    user-select: text;
}

edit: for FireFox, i changed the line “-moz-user-select: none;” to “-moz-user-select: -moz-none;”