title: Can I gray out a <label> when the item associated with it is disabled?
body: <p>I want to disable a <code>label</code> when the <code>input</code> element associated with it is disabled. Here is my code:</p>
  
  <pre><code>                &lt;!-- TODO: Gray this label out initially. --&gt;
                  &lt;label id="spacesPerIndentLabel"&gt;Spaces per indent: 4&lt;/label&gt;
                  &lt;br&gt;
                  &lt;input id="spacesPerIndent" type="text" disabled&gt;
  </code></pre>
  
  <p>I can't figure out how to make the label disabled. I tried putting <code>disabled</code> on the label, but had no luck because <a href="https://www.w3schools.com/TAGS/att_disabled.asp" rel="nofollow noreferrer"><code>label</code> isn't an element that supports <code>disabled</code></a>. I also thought of selecting</p>
  
  <pre><code>label + input:disabled { ... }
  </code></pre>
  
  <p>but that would select the disabled <code>input</code> instead of the <code>label</code>. After some further research I found out that CSS has no "previous sibling" selector (like <code>+</code> is the "next sibling" selector).</p>