CODEWITHSUNDEEP
htmlcss
Sam
Sam

Reputation: 6354

CSS Attribute selector not working on <li> element

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?

Upvotes: 1

Views: 212

Answers (3)

nanndoj
nanndoj

Reputation: 6770

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/

Upvotes: 1

Red Shift
Red Shift

Reputation: 1312

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.

Upvotes: 0

Mathieu
Mathieu

Reputation: 5695

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

see http://jsfiddle.net/ngzck7bp/

Upvotes: 0

Related Questions