Question

I have a webpage with nested div boxes, ul and li tags, and buttons, etc. Having it possible for a user to select them does not look good, so I want to disable selection of these container parts. But at the same time, I want to allow selection of individual characters inside them. I am trying to use the css property user-select: none, but once I set this to some object, it seems that the property is inherited all the way down to the individual characters. Is there a way to prevent this kind of inheritance and disallow selection of the container boxes but at the same time allow selection of individual characters inside them?

Answer 1

You could append this style to the outer box:

#outer {user-select:none}

And then remove from all childs:

#outer * {user-select:all;}

Here is a description of all possible user-select values: https://developer.mozilla.org/en-US/docs/CSS/user-select