Question

I have the following html snippet:

...
<div>
    <a></a>
    <select class="error"></select>
    <label class="error"></label>
    <div></div>
</div>
...

I need to select the “a” tag with CSS. Is this possible?

I am trying to select the “a” tag. The error class is dynamically injected via javascript. I want to have a static css rule that makes the “a” tag red.

I am only interested in a CSS approach using selectors. If this is not possible, I do not need help with alternative approaches.

~~~~~~~~~~~~~~
EDIT:
~~~~~~~~~~~~~~

The only thing that separates this “a” tag from other “a” tags is the presence of the error class elements following it. The error class is dynamically applied. I do not want to select other “a” tags that do not have an error class following it. I only want to select this “a” tag when it is followed by the error class.

~~~~~~~~~
EDIT AGAIN:
~~~~~~~~~

I explained that poorly. I was hoping that I could select the first child (or something) of all divs that contain the error class.

Answer 1

It is not possible. CSS has no tools for selecting an element on the basis of its siblings after it. Even CSS Selectors 4 (which contains many proposed, but not approved or implemented, additions to selectors) lacks such a feature. (If it will ever be added, I suppose it would be called “preceding-sibling combinator”.)