title: CSS Sibling's Children Selector
body: <p>I have the following structure that I've simplified down, the goal here was to set the span with the class &quot;<em>partA</em>&quot; background color to pink <strong>because</strong> the input has the class &quot;<em>state</em>&quot;.</p>
  <p>The internal structure of the &quot;<em>container</em>&quot; cannot change.</p>
  <p>So the end result for this example would be the first &quot;Content&quot; label would be highlighted pink.</p>
  <p>Note that there can be any number of &quot;<em>container</em>&quot;s in any order throughout the page structure, so just selecting the first container isn't a suitable solution.</p>
  <pre><code>&lt;span class=&quot;container&quot;&gt;
      &lt;span class=&quot;item&quot;&gt;
          &lt;span class=&quot;partA&quot;&gt;Content&lt;/span&gt;
          &lt;span class=&quot;partB&quot;&gt;A&lt;/span&gt;
      &lt;/span&gt;
      &lt;input class=&quot;element state&quot; /&gt;
  &lt;/span&gt;
  
  &lt;span class=&quot;container&quot;&gt;
      &lt;span class=&quot;item&quot;&gt;
          &lt;span class=&quot;partA&quot;&gt;Content&lt;/span&gt;
          &lt;span class=&quot;partB&quot;&gt;B&lt;/span&gt;
      &lt;/span&gt;
      &lt;input class=&quot;element&quot; /&gt;
  &lt;/span&gt;
  </code></pre>
  <p>I thought the general sibling selector may be the solution, but it doesn't seem to work - I believe because it's a sibling of the parent, not the element itself.  I tried both ways round in case I had made a mistake:</p>
  <pre><code>.partA ~ .state { background-color: pink; }
  .state ~ .partA { background-color: pink; }
  </code></pre>
  <p>I've created a <a href="http://jsfiddle.net/qvwh5uw0/" rel="nofollow noreferrer">JSFiddle</a> with this structure.</p>
  <p>Can anyone provide me a selector which will accomplish this?  I would like to avoid JS if at all possible.</p>