How do you override “-moz-user-select: none;” on a child element?

Question

The question CSS rule to disable text selection highlighting shows how to prevent text selection on an element. Once you have prevented selection, how can you then allow selection for a specific child element?

For example,

<div class="no-select">
    <p>some text that cannot be selected</p>
    <p class="select">some text that can be selected</p>
    <p>some text that cannot be selected</p>
</div>

table.no-select {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

td.select {
    -webkit-touch-callout: all !important;
    -webkit-user-select: all !important;
    -khtml-user-select: all !important;
    -moz-user-select: all !important;
    -ms-user-select: all !important;
    user-select: all !important;
}

The .no-select rule above works, but my attempt at a .select rule does not. What is the correct way to do this?

mash mash · Accepted Answer · 2013-05-17T02:37:45

Try -moz-user-select: text instead of all.

As a future reference, whenever concerned about the possible values for a CSS rule, check a site like MDN.

Here is the MDN link for user-select.

How do you override “-moz-user-select: none;” on a child element?

1 Answers