title: How do I modify properties of siblings with CSS selectors like :focus?
body: <p>I am having trouble with some code on my site, <a href="http://ethoma.com/wp/" rel="noreferrer">http://ethoma.com/wp/</a>. In the search bar, on the left side, I want the usually dark gray "hit enter to search" to turn a light gray when the search field (its sibling) :focus is triggered. Here is the code I currently have:</p>
  
  <pre><code>    #s
  {
      min-width:98%;
      background-color:#2a2a2a;
      color:#d3d3d3;
      border:2px solid #000000;
      font-size:.85 em;
      height:1.9em;
      display:inline !important;
      border-radius:5px 5px 5px 5px;
  }
  
  #s:focus
  {
      border:2px solid #2a2a2a;
  }
  
  #searchsub
  {
      color:#2a2a2a;
      text-align:right;
      font-size:.65em;
      font-weight:lighter;
  }
  
  #s:focus #searchsub
  {
      color:#cccccc;
  }
  </code></pre>
  
  <p>Okay, #s is the search field and #searchsub is the div that I want to turn #cccccc (light gray). The last set of curly braces seems to be where I am having the problem (not the braces themselves, but the selector above it). As I said #s is a sibling of #searchsub and vice versa.</p>