CSS: select item by data-filter attribute

Question

I have to remove certain items from a nav, which differ by their data-filter attribute. How can I refer to the specific list-items? Such as, if I wanted to remove the item by data-filter ".category-xyz":

<li class="filter" data-filter=".category-xyz"><span>xyz</span></li>

I tried loads - all without any errors - nothing finds the specific list-item. I tried: (all each)

.filter-holder ul:nth-child(3){
    display:none;
}

.filter .category-xyz{
    display: none;
}

.filter-holder ul li[data-filter*=".category-xyz"]{
display: none;
}

li[data-filter=".category-xyz"]{
    display:none;
}

.filter-holder ul li[data-filter|=category-xyz]{
display: none;
}

Somebody help?

Answer 1

Your li opening tag is incomplete without > Use prefix selector.

element [attribute = "value"]{  
  /*code*/
}

 li[data-filter=".category-xyz"] { background: blue; } li { background: red; } 

 <li class="filter" data-filter=".category-xyz"> <span> xyz </span> </li> <li class="filter" data-filter=".NOTcategory-xyz"> <span> xyz </span> </li><li class="filter" data-filter=".NOTcategory-xyz"> <span> xyz </span> </li> 

Answer 2

You are missing a > in your HTML after xyz"

Other than that, your last 3 CSS rules should work.

Here is a working JS Fiddle .

 li[data-filter=".category-xyz"]{ display:none; } 

 <div class="filter-holder"> <ul> <li class="filter" data-filter=".category-xyz"><span>xyz</span></li> <li class="filter" data-filter=".category-abc"><span>abc</span></li> <li class="filter" data-filter=".category-xyz"><span>xyz</span></li> <li class="filter" data-filter=".category-abc"><span>abc</span></li> <li class="filter" data-filter=".category-xyz"><span>xyz</span></li> <li class="filter" data-filter=".category-abc"><span>abc</span></li> </ul> </div> 

Hope this helps.