CSS Attribute selector not working on <li> element

Question

I'm trying to target an <li> tag based on its title attribute but it is having no effect:

<style>      
[title~=Client PPT Presentation] {
display: none;
}
</style>
<li title="Client PPT Presentation">
</li>

Title is is a global attribute and I verified sytntax, so why isn't this working?

Answer 1

The ~= operator is used to select elements with an attribute value containing a specified word

Example:

[title~='Client'] {
  display: none;
}

If you want to check for a string value (not a single word) you have to use the *= operator which is used to select elements whose attribute value contains a specified value

[title*='Client PPT Presentation'] {
   display: none;
}

http://jsfiddle.net/

Answer 2

you should select it using [title="Client PPT Presentation"]

see http://jsfiddle.net/ngzck7bp/

Answer 3

Have you tried:

<style> 
li[title="Client PPT Presentation"] {
    display: none;
} 
</style>
<li title="Client PPT Presentation">
</li>

I believe this is what you need. You should honestly have just read this though.