[SOLVED] How to hide an optgroup element when it does not contain any option element that is not disabled using CSS

How to hide an optgroup element when it does not contain any option element that is not disabled using CSS

I want to hide an optgroup element when it doesn't have any option element which cannot be selected. In the example below the first optgroup element shall be shown and the second should be hidden.

optgroup {
    display: none;
}
optgroup:has(option:not(:disabled)) {
    display: unset;
}

<select id="location" name="location">
    <option value="" selected="">Standort wählen</option>
    <optgroup label="Kanton Luzern">
        <option value="buttisholz">Buttisholz</option>
        <option value="littau" disabled="">Littau</option>
        <option value="luzern">Luzern</option>
        <option value="malters" disabled="">Malters</option>
        <option value="schuepfheim">Schüpfheim</option>
    </optgroup>
    <optgroup label="Kanton Schaffhausen">
        <option value="schaffhausen" disabled="">Schaffhausen</option>
    </optgroup>
</select>

I have come up with this solution which seems to work (only tested in Chrome) but I am looking for a solution with just one statement instead of 2 if that is possible:

optgroup {
  display: none;
  }
optgroup:has(option:not(:disabled)) {
  display: unset;
  }

I tried this version which doesn't work because it seems that the :enabled pseudo selector can only be used for input, select and textarea fields:

optgroup:not(option:enabled) {
  display: none;
  }

Solution

Keep it simple and readable!

use css :enabled

optgroup:not(:has(option:enabled)) {
  display: none;
}

<select id="location" name="location">
  <option value="" selected   disabled > Standort wählen </option>
  <optgroup label="Kanton Luzern">
      <option value="buttisholz"       > Buttisholz </option>
      <option value="littau"  disabled > Littau     </option>
      <option value="luzern"           > Luzern     </option>
      <option value="malters" disabled > Malters    </option>
      <option value="schuepfheim"      > Schüpfheim </option>
  </optgroup>
  <optgroup label="Kanton Schaffhausen">
      <option value="schaffhausen" disabled > Schaffhausen </option>
  </optgroup>
</select>