Selecting the direct first element after another element in CSS

css, html

Solution

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

Problem

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?

Original source

Related problems