Make text selected inside an unselectable div

On my page, I made the whole div unselectable using 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 have the h2 tag inside this non-selectable div. And I want h2 to become selectable.Is there any way to achieve this easily.

I forgot something in my question. I got three h2 in my code and I need a specific one that I can choose, so I added a class to this h2 and tried something like this .unselectable: not (.class-of-h2) (which I got from the answers below ) but its not working

+8
css css3
source share
3 answers

Use for your element h2

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

Watch the demo

+17
source share

Just add below CSS

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

Watch the demo

+2
source share

you can use

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

can not exclude an item from the selector list
this can make your entire div non-selectable except for the h2 element.

+1
source share

All Articles