How can I use CSS to select the "a" tag in the following layout?

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.

Have you considered giving your div an ID? It would make your life much more simpler: #my_div a — Mihai Todor, Sep 09 '12 at 01:03
It might be possible if you show more surrounding tags, and use CSS like .outercontainer > .something > div > a { ... }. — Jürgen Strobel, Sep 09 '12 at 01:13
Nasty. In that case, if you don't want to select all the anchors in your code, you're going to have to get its precise context. Considering that the above `DIV` is probably not the only one containing an anchor in your markup, you should start somewhere above it, where you have defined at least some sort of class, like so: `.my_div_container div a { ... }` — Mihai Todor, Sep 09 '12 at 01:13
@MihaiTodor: Yes. I am hoping that there is some way I use the presence of the "error" class to select the parent and then get the "a" tag with the first child selector. But I couldn't come up with anything that worked. — user319862, Sep 09 '12 at 01:19
There was a very similar question asked just a few hours before this one: http://stackoverflow.com/questions/12334509/how-can-i-select-an-a-tag-that-has-a-sibling-ul-tag-after-it-in-css — BoltClock, Sep 09 '12 at 17:04

score 3 · Accepted Answer · answered Sep 09 '12 at 05:21

3

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”.)

answered Sep 09 '12 at 05:21

Jukka K. Korpela

195,524
37
270
390

1

It's said that ancestor and preceding-sibling combinators would be difficult to implement efficiently. Thankfully in Selectors 4 you can use the subject indicator in conjunction with a descendant or general/following sibling combinator to achieve basically the same selection. – BoltClock Sep 09 '12 at 17:11

Jezen Thomas · Answer 2 · 2012-09-09T01:23:17.930

1

Just selecting the anchor will give you what you want in that specific layout.

a {color: red;}

-- Edit --

Since you changed your question, here's a new answer:

Use JS to check if siblings of a particular type exist.

$('a').each(function(){
    if ($(this).siblings('.error').length > 0)
        $(this).css('color','red');
});

edited Sep 09 '12 at 01:23

answered Sep 09 '12 at 01:04

Jezen Thomas

13,619
6
53
91

@JenzenThomas: But not what I am looking for – user319862 Sep 09 '12 at 01:07
Then what on Earth *are* you looking for? – Jezen Thomas Sep 09 '12 at 01:08
@JenzenThomas: I updated my question when I realized it was too vague – user319862 Sep 09 '12 at 01:11
@JenzenThomas: I am trying to avoid javascript because I don't have an event when the "error" class is applied. I guess I am going to have to go this route =/ – user319862 Sep 09 '12 at 01:26
@JenzenThomas: I am going to. I was more interested if it was possible to accomplish the task with CSS than how I "could" make it happen. – user319862 Sep 09 '12 at 01:36
1

I wonder why this is the accepted answer. The question specifically asked for a CSS solution, and this answer uses JavaScript and jQuery. – Jukka K. Korpela Sep 09 '12 at 05:10
1

@JukkaK.Korpela My original answer to his original question was correct. You yourself said that what he is trying to achieve is impossible with CSS. – Jezen Thomas Sep 09 '12 at 08:14

score 1 · Answer 3 · answered Sep 09 '12 at 01:08

1

<style>
  .mylinkclass {
    ...style info goes here
  }
</style>

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

answered Sep 09 '12 at 01:08

DenverMatt

235
3
7

Mihai Todor · Answer 4 · 2012-09-09T02:19:11.923

1

Regarding your updated question, try this hackish solution:

div a:nth-last-child(4)
{
    background-color:yellow;
}

if you can count on the fact that your DIV has 4 and only 4 elements inside (the anchor being the first) when the error elements are present and fewer (or more) elements otherwise.

Anyway, you're probably better off using Javascript for this (or proper HTML).

edited Sep 09 '12 at 02:19

answered Sep 09 '12 at 02:02

Mihai Todor

8,014
9
49
86

How can I use CSS to select the "a" tag in the following layout?

4 Answers4