title: CSS selector - Select a element who's parent(s) has a sibling with a specific element
body: <p>I have a series of textareas that all follow the same format nested html format but I need to target one specifically. The problem I'm having is that the unique value I can use to identify the specific textarea is a parent's sibling's child.</p>
  
  <p>Given this html</p>
  
  <pre><code>&lt;fieldset&gt;
  &lt;legend class="name"&gt;
  &lt;a href="#" style="" id="element_5014156_showhide" title="Toggle “Standout List”"&gt;▼&lt;/a&gt;
  &lt;/legend&gt;
  &lt;ul id="element_5014156" class="elements"&gt;
  &lt;li class="element clearboth"&gt;
  &lt;h3 class="name"&gt;Para:&lt;/h3&gt;
  &lt;div class="content"&gt;
  &lt;textarea name="container_prof|15192341" id="container_prof15192341"&gt;  TARGET TEXTAREA&lt;/textarea&gt;
  &lt;/div&gt;
  ::after
  &lt;/li&gt;
  &lt;li class="element clearboth"&gt;
  &lt;h3 class="name"&gt;Para:&lt;/h3&gt;
  &lt;div class="content"&gt;
  &lt;input type="text" class="textInput" name="container_prof|15192342" id="container_prof_15192342" value="" size="64"&gt;
  &lt;/div&gt;
  ::after
  &lt;/li&gt;
  &lt;/ul&gt;
  &lt;/fieldset&gt;
  </code></pre>
  
  <p>There are many of the <code>&lt;li&gt;</code> elements. I can't use the name or id as they dynamically created. </p>
  
  <p>I want to target the textarea that says TARGET TEXTAREA. The only unqiquess I can find is the title attribute of the <code>&lt;a&gt;</code> element within the  element.</p>
  
  <p>I can get that specifically 
  <code>legend.name a[title*='Standout']</code>
  In Chrome Console: <code>$$("legend.name a[title*='Standout']");</code></p>
  
  <p>and I can traverse all the way to up to the <code>&lt;legend&gt;</code> element from the textarea
  <code>legend.name ~ ul.elements li.element div.content textarea</code></p>
  
  <p>In Chrome Console: <code>$$("legend.name ~ ul.elements li.element div.content textarea")</code></p>
  
  <p>That gives me ALL the textareas that have a div with class="content" that has a li with a class=element which has a ul with a class=elements which has a sibling legend with a class=name.</p>
  
  <p>The only thing I can figure out is to add the qualifier that the legend with the class=name has to have the anchor that has 'Standout' in it's title.</p>
  
  <p>I've tried
  <code>$$("legend.name a[title*='Standout'] ~ ul.elements li.element div.content textarea")</code> but that fails obviously since the anchor is not an adjacent sibling of the <code>ul</code></p>
  
  <p>Any help would be most appreciated!</p>