Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

make text selectable inside an unselectable div

Tags:

css

In my page i have made an entire div unselectable, with the help of this css (which i got from stackoverflow it self)

    .unselectable {
   -moz-user-select: -moz-none;
   -khtml-user-select: none;
   -webkit-user-select: none;

   /*
     Introduced in IE 10.
     See http://ie.microsoft.com/testdrive/HTML5/msUserSelect/
   */
   -ms-user-select: none;
   user-select: none;
}

Now i got an h2 tag inside this unselectable div.And i want that h2 to become selectable.Is there any way to achieve this easly.

I have forgot some thing in my question . i got three h2 in my code an i need specific one to be selectable so i added a class to this h2 and tried some thing like this .unselectable:not(.class-of-h2) (which i got from below answers).but its not working

like image 271
None Avatar asked Dec 28 '12 12:12

None


3 Answers

Use for your h2 element

.unselectable h2{
 -moz-user-select: text;
 -khtml-user-select: text;
 -webkit-user-select: text;
 -ms-user-select: text;
 user-select: text;
}

See demo

like image 197
Dineshkani Avatar answered Oct 18 '22 21:10

Dineshkani


Just add the below CSS

.unselectable h2 {
   -moz-user-select: text;
   -khtml-user-select: auto;
   -webkit-user-select: auto ;
   -ms-user-select: auto;
   user-select: auto;
 }

See the demo

like image 23
GajendraSinghParihar Avatar answered Oct 18 '22 20:10

GajendraSinghParihar


you can use

     .unselectable:not(h2:nth-child(2)) {
      //your data
      } 

not can exclude the element from your list of selector
this can make your whole div unselectable except h2 element.

like image 1
sourcecode Avatar answered Oct 18 '22 19:10

sourcecode