How to prevent user copying text of a certain div using CSS?

Question

I know one can use the below CSS to disable user text selection.

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

But when I have the following html:

<p>selectable text 1</p>
<p class="unselectable">unselectable text</p>
<p>selectable text 2</p>

Users can still copy the unselectable text by selecting from the very top of the page (selectable text 1) to the very bottom of the page (selectable text 2). Any ways to prevent that? Thanks.

Answer 1

Questions seems vague.

There is a difference between "Selection" and "Copying" on HTML pages.You can prevent "Selection" using CSS, but you can not prevent "Copying" using CSS. You need JS for that.

Answer 2

You just give it a div wrapper and define the id selector to do what you want Correct way to do a css wrapper