How to make a Ul list item unselectable [duplicate]

Question

I have following ul. I want to make any particular list item unselectable.

<ul>
  <li>ABC</li>
  <li>PQR</li>
  <li>XYZ</li>
</ul>

How can I do this? I tried setting following css class, but did not help

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

Answer 1

It does work, but I think the problem you might be having is in the way you are setting up your HTML.

Ensure that the <li> elements you want to not be selectable have the unselectable class, as per this example:

<li class="unselectable">unselectable</li>

Fiddle:
http://jsfiddle.net/TtLQa/1/

Also, please refer to this link for browser support information with regards to user-select:none.

---

Edit:

I just saw your comment, you want to do this via javascript.

Using jQuery, you can easily add or remove a class as you wish:

$(element).addClass("unselectable");
$(element).removeClass("unselectable");

//removes it if it is there, or adds it if it is not
$(element).toggleClass("unselectable"); 

Fiddle:
http://jsfiddle.net/TtLQa/4/