Selecting the direct first element after another element in CSS

Question

I have the following HTML:

<div id="form">
    <form>
       <textarea id="text"></textarea>
       <span class="error">select this</span>
       <span class="error">don't select this</span>
    </form>
</div>

In CSS, how can I select only the first span element directly after the textarea element and not select the other span elements after the first?

score 11 · Accepted Answer · edited May 28 '12 at 10:50

11

You can use an adjacent sibling combinator:

#text + span {
    /* Styles */
}

Here's a working example.

Update (see comments)

To target the second span you can simply add another adjacent sibling combinator to the selector:

#text + span + span {
    /* Styles */
}

edited May 28 '12 at 10:50

ThiefMaster

310,957
84
592
636

answered May 28 '12 at 10:46

James Allardice

164,175
21
332
312

Just curious, then what happens if I want to select only the second span element? – Carven May 28 '12 at 10:47
[`#text + span + span`](http://jsfiddle.net/ThiefMaster/ngrZz/1/) – ThiefMaster May 28 '12 at 10:48
@ThiefMaster - Thanks for the syntax highlighting edits :) I never remember to put those comments in. – James Allardice May 28 '12 at 10:52
Probably because of the awkward syntax. Hopefully SO introduces fenced code blocks soon allowing to put the syntax right after the first fence – ThiefMaster May 28 '12 at 10:53

score 1 · Answer 2 · answered May 28 '12 at 10:46

1

Use the + (adjacent sibling) selector:

textarea + span { ... }

Demo: http://jsfiddle.net/ThiefMaster/ngrZz/

answered May 28 '12 at 10:46

ThiefMaster

310,957
84
592
636

Selecting the direct first element after another element in CSS

2 Answers2