Cain Nuke Cain Nuke - 2 months ago 5
CSS Question

CSS select all elements of the same type after this element

I have this code:

<fieldset id="login">
<input type="text">
<input type="password">
<input type="checkbox" id="inline_invisible">
<label for="invisible">Login invisible</label>
<input type="checkbox" id="remember">
<label for="remember">Remember me</label>
</fieldset>


Labels are not supposed to show until one of the input boxes are on focus so I have this CSS:

#login input:focus + input + label {
display:inline-block;
}


but it only selects the first label and not the second one when the password box is on focus and does nothing with the first input box. What should I do? CSS only please, I cant change the html.

Thank you.

K K K K
Answer

Try

#login input:focus ~ label  {display:inline-block;}

plus(+) selects the adjacent siblings while ~ looks for the next sibling

Reference for general sibling selector: https://developer.mozilla.org/en/docs/Web/CSS/General_sibling_selectors

Reference for adjacent sibling selector: https://developer.mozilla.org/en-US/docs/Web/CSS/Adjacent_sibling_selectors

Comments