Hide specific fieldset class with css

Question

image

<variant-radios id="variant-radios-template--17912133255436__main" class="no-js-hidden" data-section="template--17912133255436__main" data-url="y">
<fieldset class="js product-form__input">
          <legend class="form__label">A</legend>
</fieldset>
<fieldset class="js product-form__input">
          <legend class="form__label">B</legend>
</fieldset>
<fieldset class="js product-form__input">
          <legend class="form__label">C</legend>
</fieldset>
</variant-radios>

I want to hide 2 of these 3 fieldset classes via css.

F.e. hide "A" and "B", but "C" remains visible

How?

I can hide all with:

#variant-radios-template--17912133255436__main{
  display: none;
}

Answer 1

You can use nth-child in CSS to reference which fieldsets that you would like to hide.

fieldset.js.product-form__input:nth-child(1),
fieldset.js.product-form__input:nth-child(2){
 display:none;
}

<variant-radios id="variant-radios-template--17912133255436__main" class="no-js-hidden" data-section="template--17912133255436__main" data-url="y">
<fieldset class="js product-form__input">
          <legend class="form__label">A</legend>
</fieldset>
<fieldset class="js product-form__input">
          <legend class="form__label">B</legend>
</fieldset>
<fieldset class="js product-form__input">
          <legend class="form__label">C</legend>
</fieldset>
</variant-radios>