How do you override "-moz-user-select: none;" on a child element?
cross-browser, css, textselection
Solution
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`.
Problem
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?