Sélecteur CSS pour sélectionner un élément qui vient AVANT un autre élément ?

Question

Je travaille sur une page de connexion pour mon site web et je veux mettre en gras l'étiquette qui vient avant la zone de saisie lorsque la zone de texte reçoit le focus. Actuellement, j'ai le balisage suivant :

<label for="username">Username:</label>
<input type="textbox" id="username" />

<label for="password">Password:</label>
<input type="textbox" id="password" />

Je peux utiliser le sélecteur adjacent pour sélectionner l'étiquette. après la zone de texte, mais je ne peux pas sélectionner l'élément qui la précède. Je peux utiliser cette règle de sélection CSS, mais elle ne sélectionne que l'étiquette située après. Ainsi, lorsque la zone de texte du nom d'utilisateur est mise en évidence, l'étiquette du mot de passe devient en gras.

input:focus + label {font-weight: bold}

Y a-t-il quelque chose que je puisse faire pour que ça marche ? Je sais que JavaScript pourrait être utilisé pour faire cela facilement, mais j'aimerais utiliser une solution purement CSS si possible, mais je n'arrive pas à trouver un moyen de le faire.

Answer 1

J'ai trouvé ceci dans w3cschol

p~ul Sélectionne chaque <ul> qui sont précédés d'un élément <p> élément

Mais mon test avait échoué. Je n'ai pas réussi à le faire fonctionner. Il se peut qu'il ne soit pas implémenté par les navigateurs.