Cain Nuke Cain Nuke - 11 months ago 29
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>

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 {

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.

Answer Source


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

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

Reference for general sibling selector:

Reference for adjacent sibling selector: