CODEWITHSUNDEEP
htmlcss
amal
amal

Reputation: 3582

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

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>

Upvotes: 3

Views: 75

Answers (1)

Hovhannes Sargsyan
Hovhannes Sargsyan

Reputation: 1083

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>

Upvotes: 2

Related Questions