-2

I ran into a strange problem. I want to change the color of a label when the input field is set to :focus. Easy actually. But not when the input is wrapped with a span.

I am pulling my hair. Any idea whats going on? See Codepen

<div class="input_contact">
    <input id="field_1">
    <label for="field_1">Works</label>
</div>    
<div class="input_contact">
    <span><input class="input_field_contact"></span>
    <label class="input_label_contact">Doesn't Work *</label>
</div>

label{
  color: blue;
}
input:focus + label{
  color: red;
}
Legionar
  • 7,472
  • 2
  • 41
  • 70
yeahwhoo
  • 23
  • 4
  • 2
    Label is no longer a sibling to the input, so the CSS 'directly following' operator (+) can't find it's target. If you want it to work with your current CSS, put the Label within the span too. – Ricky S Oct 06 '15 at 13:26
  • 1
    You're trying to use the "adjacent" selector syntax (`+`) on an element that's no longer adjacent. – Cᴏʀʏ Oct 06 '15 at 13:27
  • 2
    Possible duplicate of [Is there a CSS parent selector?](http://stackoverflow.com/questions/1014861/is-there-a-css-parent-selector) – Abhitalks Oct 06 '15 at 13:34
  • Thanks, that is of course true. – yeahwhoo Oct 06 '15 at 13:40

3 Answers3

0

You can't use "+" if your element arent siblings.

What is your need for having to wrap your input into span? I have never not placed my labels as siblings with inputs, and I've done million of forms.

Maybe if you tell us why you need such a thing we can help you out.

Paran0a
  • 3,359
  • 3
  • 23
  • 48
0

+ in CSS is the adjacent sibling selector. Which means next to and at the same level in the DOM. Is your second <input> an sibling of its associated <label>? No. The second <input> is inside a <span> which makes the <span> a sibling of the associated <label>.

Either move your <input> out of the <span> or place your <input> within the <span> and your CSS selector input:focus + label will work.

It looks like you're trying to do a DOM traversal with a parent relationship in your CSS selector which is allowed/available in CSS. Why? As far as I know they would be highly inefficient. Though that doesn't mean they won't show up one day.

hungerstar
  • 21,206
  • 6
  • 50
  • 59
0

According to Wikipedia:

Selectors are unable to ascend

CSS offers no way to select a parent or ancestor of element that satisfies certain criteria. A more advanced selector scheme (such as XPath) would enable more sophisticated stylesheets. However, the major reasons for the CSS Working Group rejecting proposals for parent selectors are related to browser performance and incremental rendering issues.

And for anyone searching SO in future, this might also be referred to as an ancestor selector.

The Selectors Level 4 Spec allows you to select which part of the select is the subject:

The subject of the selector can be explicitly identified by prepending a dollar sign ($) to one of the compound selectors in a selector. Although the element structure that the selector represents is the same with or without the dollar sign, indicating the subject in this way can change which compound selector represents the subject in that structure.

Example:

For example, the following selector represents a list item LI unique child of an ordered list OL:

OL > LI:only-child

However the following one represents an ordered list OL having a unique child, that child being a LI:

$OL > LI:only-child

The structures represented by these two selectors are the same, but the subjects of the selectors are not.

Legionar
  • 7,472
  • 2
  • 41
  • 70