Can I hide the elements not having some specific data-value or content using only CSS?

Question

I would like to remove the span classes not having data-value/content as "united-states". Can I do this only with CSS. I can't nth-child() function since position of the elements are not constant

<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

We can achieve it using pseudo-class :not and the target using attribute selector.

I have updated snippet, does this work for you ?

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>