Only select the first sibling element with a conditional check

Question

I want to write some css which selects only the first element after textarea and ignoring all elements which are styled with display: none;

I tried something like this but without success:

textarea ~ *:not([style*='display:none']):first-of-type {
  color: red;
}

<textarea>Text</textarea>
<div style="display: none">This element will be ignored</div>
<p>This element will be red</p>
<span>This element won't be red</span>
<p>This element won't be red</p>
<div>This element won't be red</div>
<label>This element won't be red</label>

Anyone have a solution for this ?

Answer 1

Try this (note the CSS needs to exactly match the style contents, [style*='display: none'] won't work if the html is style='display:none' (note the space in the css, no space in the html style attribute)

textarea ~ [style*='display: none'] + * {
  color: red;
}

<textarea></textarea>
<div style="display: none">This element will be ignored</div>
<p>This element will be red</p>
<span>This element won't be red</span>
<p>This element won't be red</p>
<div>This element won't be red</div>