Selecting the direct first element after another element in CSS [duplicate]

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?

Answer 1

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 */
}

Answer 2

Use the + (adjacent sibling) selector:

textarea + span { ... }

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