disable selection of text except for one class-CodePudding

I have a website on which I have made all text non selectable except for input and textareas using the following line of CSS:

*:not(input, textarea) { -webkit-touch-callout:none; -moz-user-select:none; -khtml-user-select:none; -webkit-user-select:none; -ms-user-select:none; user-select:none; }

I'd like to add a class so I can add certain texts to also be selectable. I thought adding ".selectable" to the selector would be enough, but somehow this doesn't work. Should it?

CodePudding user response：

You need to create a separate rule for .selectable class to make it select text.

*:not(input, textarea) {
  -webkit-touch-callout: none;
  -moz-user-select: none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.selectable{
  -webkit-touch-callout: default;
  user-select: text;
}

<div>In this block, only <span >this</span> is selectable. </div>