Как показать только один класс с тем же именем

#html #css

#HTML #css

Вопрос:

в моем коде

 <ol class="items">            
    <li class="item">
       <span class="filter-label">Category</span>
       <span class="filter-value">Fashion</span>                                                                                                                                                    
       <a class="action remove" href="https://www.marketplacedemo.store/online-store?cat=226" title="Remove Category Fashion">
           <span>Remove This Item</span>
       </a>                                                                    
    </li>            
    <li class="item">
        <span class="filter-label">Category</span>
        <span class="filter-value">Deal of day-Home</span>                                                                                                                               
        <a class="action remove" href="https://www.marketplacedemo.store/online-store?cat=109" title="Remove Category Deal of day-Home">
           <span>Remove This Item</span>
         </a>                                               
    </li>
</ol>
  

теперь в этом я хочу показать только одну категорию, иначе все категории должны отображаться: теперь нет, для этого я пробовал

 .filter-label{
    display:none;
}
.items:nth-of-type(1) >.filter-label:first-child {
  display:block;
}
  

но это не работает.

как я могу показать только одну категорию? любая помощь будет очень признательна, спасибо

Ответ №1:

Вы можете добиться этого с помощью :not селектора

 .items li:not(:first-child) .filter-label {
  display: none;
}  
 <ol class="items">            
    <li class="item">
        <span class="filter-label">Category</span>
        <span class="filter-value">Fashion</span>                                        
        <a class="action remove" href="https://www.marketplacedemo.store/online-store?cat=226" title="Remove Category Fashion">
          <span>Remove This Item</span>
        </a>                                                                    
    </li>            
    <li class="item">
        <span class="filter-label">Category</span>
        <span class="filter-value">Deal of day-Home</span>                   
        <a class="action remove" href="https://www.marketplacedemo.store/online-store?cat=109" title="Remove Category Deal of day-Home">
           <span>Remove This Item</span>
        </a>                                               
    </li>
</ol>