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