CSS выбрать все элементы одного и того же типа после этого элемента

Question

У меня есть этот код:

<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> 

Этикетки не должны не показывать, пока один из поля ввода находятся в фокусе, так у меня есть этот CSS:

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

но он выбирает только первую метку, а не вторую, когда поле пароля находится в фокусе и ничего не делает с первым полем ввода. Что мне делать? CSS только пожалуйста, я не могу изменить html.

спасибо.

Answer 1

Попытки

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

плюс (+) выбирает соседние брат в то время как ~ выглядит для следующего брата

Reference для общего селектора сиблингового: https://developer.mozilla.org/en/docs/Web/CSS/General_sibling_selectors

Reference для соседнего брата Серийный номер: https://developer.mozilla.org/en-US/docs/Web/CSS/Adjacent_sibling_selectors

Answer 2

Используйте селектор general sibling (~), который выберет все label s после сфокусированного ввода.

(Обратите внимание, что + селектор выбирает только один родственный элемент, который следует)

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

<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>