CSS selector - Select a element who's parent(s) has a sibling with a specific element

Question

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.

Given this html

<fieldset>
<legend class="name">
<a href="#" style="" id="element_5014156_showhide" title="Toggle “Standout List”">▼</a>
</legend>
<ul id="element_5014156" class="elements">
<li class="element clearboth">
<h3 class="name">Para:</h3>
<div class="content">
<textarea name="container_prof|15192341" id="container_prof15192341">  TARGET TEXTAREA</textarea>
</div>
::after
</li>
<li class="element clearboth">
<h3 class="name">Para:</h3>
<div class="content">
<input type="text" class="textInput" name="container_prof|15192342" id="container_prof_15192342" value="" size="64">
</div>
::after
</li>
</ul>
</fieldset>

There are many of the <li> elements. I can't use the name or id as they dynamically created.

I want to target the textarea that says TARGET TEXTAREA. The only unqiquess I can find is the title attribute of the <a> element within the element.

I can get that specifically legend.name a[title*='Standout'] In Chrome Console: $$("legend.name a[title*='Standout']");

and I can traverse all the way to up to the <legend> element from the textarea legend.name ~ ul.elements li.element div.content textarea

In Chrome Console: $$("legend.name ~ ul.elements li.element div.content textarea")

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.

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.

I've tried $$("legend.name a[title*='Standout'] ~ ul.elements li.element div.content textarea") but that fails obviously since the anchor is not an adjacent sibling of the ul

Any help would be most appreciated!

Answer 1

This seems to work:

legend.name + ul >li:first-child > div > textarea {
  color:red;
}

 legend.name + ul >li:first-child > div > textarea { color: red; } 

 <fieldset> <legend class="name"> <a href="#" style="" id="element_5014156_showhide" title="Toggle “Standout List”">▼</a> </legend> <ul id="element_5014156" class="elements"> <li class="element clearboth"> <h3 class="name">Para:</h3> <div class="content"> <textarea name="container_prof|15192341" id="container_prof15192341">TARGET TEXTAREA</textarea> </div> ::after </li> <li class="element clearboth"> <h3 class="name">Para:</h3> <div class="content"> <input type="text" class="textInput" name="container_prof|15192342" id="container_prof_15192342" value="" size="64"> </div> ::after </li> </ul> </fieldset> 

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.

This you cannot do with CSS...you would need Javascript for that.

Answer 2

The only unqiquess I can find is the title attribute of the element within the element.

Typically you do not want to add style rules on the text of the title attribute as that text must be localized for screen readers.

I've tried $$("legend.name a[title*='Standout'] ~ ul.elements li.element div.content textarea") but that fails obviously since the anchor is not an adjacent sibling of the ul

What you're asking is not currently possible with CSS. :/

Your best solution here will be to add a meaningful attribute or class to your HTML from within the JavaScript (or other language) that generates it.