<!DOCTYPE html>
<html>
  <head>
    <style>
      optgroup {color: red}
      option {color: red}
      optgroup[disabled]:disabled {color: green}
      optgroup[disabled]:disabled + optgroup:not([disabled]):not(:disabled) {color: blue}
      optgroup[disabled]:disabled > option{color: green}
      optgroup:not([disabled]):not(:disabled) > option {color: blue}
    </style>
  </head>
  <body onload='document.getElementById("ogone").setAttribute("disabled", "disabled");'>
    <select size="7">
      <optgroup id="ogone" label="opt group 1">
        <option id="one">Should be no red</option>
        <option id="two">Should be no red</option>
      </optgroup>
      <optgroup id="ogtwo" label="opt group 2">
        <option id=three>Should be no red</option>
        <option id=four>Should be no red</option>
      </optgroup>
    </select>
  </body>
</html>