Могу ли я скрыть элементы, не имеющие определенного значения данных или содержимого, используя только CSS?

Question

Я хотел бы удалить классы span, не имеющие значения / содержимого данных, как "соединенные штаты".Я могу сделать это только с помощью CSS.Я не могу использовать функцию nth-child (), поскольку положение элементов не является постоянным

<div class="adsw-attribute-option">
   <span class="meta-item-text sku-set" data-value="china">China</span>
   <span class="meta-item-text sku-set" data-value="germany">Germany</span>
   <span class="meta-item-text sku-set" data-value="italy">Italy</span>
   <span class="meta-item-text sku-set" data-value="united-states">United States</span>
</div>

Answer 1

Мы можем достичь этого, используя псевдокласс :not, а цель - с помощью селектора атрибутов.

Я обновил фрагмент, это работает для вас?

span:not([data-value="united-states"]){
  display: none;
}

<div class="adsw-attribute-option">
   <span class="meta-item-text sku-set" data-value="china">China</span>
   <span class="meta-item-text sku-set" data-value="germany">Germany</span>
   <span class="meta-item-text sku-set" data-value="italy">Italy</span>
   <span class="meta-item-text sku-set" data-value="united-states">United States</span>
</div>