“相邻”元素的CSS选择器

Question

Need some help with CSS selectors as I am not sure how to express this in CSS, yet. How would I get the last span "Error" to show up when an :invalid pseudo-class appears on the input element (and of course be hidden when no :invalid is present)? No Javascript, only CSS please.

<div class="row-fluid">
    <div class="control-group control-field-nickname">
        <span class="span3 offset1">
            <label>{{ msgs.mid("nickname") }}</label>
        </span>
        <span class="span3 input-prepend">                              
            <i class="add-on icon-user"></i>
            <input class="form-field" type="email" id="field-nickname">
        </span>
        <span class="span1">Error!</span>
    </div>
</div>

Answer 1

You can't.

CSS has no selector / combinator that expresses "contains" so you cannot say "A span adjacent to a span which contains an input that is invalid".

The proposed subject feature of Selectors Level 4 will allow you to select elements other than the last one that appears in the selector, but (AFAIK) not let you go up and then down.

Answer 2

If you can modify your HTML

With this HTML structure ( .span1 actually moved to be adjacent):

<div class="row-fluid">
    <div class="control-group control-field-nickname">
        <span class="span3 offset1">
            <label>{{ msgs.mid("nickname") }}</label>
        </span>
        <span class="span3 input-prepend">                              
            <i class="add-on icon-user"></i>
            <input class="form-field" type="email" id="field-ni
ckname">
            <span class="span1">Error!</span>
        </span>

    </div>
</div>

Then this CSS should work (for browsers that recognize the :invalid pseudo-class):

.span1 {
    display: none;
}

input:invalid + .span1 {
    display: inline-block; /* or block */
}

If you cannot restructure your HTML, then there is no CSS solution.