CSS, modification de l'étiquette qui n'est pas adjacente à l'entrée active

Question

J'essaie actuellement de modifier le CSS d'une page HTML générée. Je n'ai pas accès à exécuter des scripts sur cette page ou à modifier le code HTML de base.

La forme a des entrées et je suis en train de créer des étiquettes flottantes pour eux que je fais habituellement quelque chose comme ceci:

<input id="email"> 
<label for="email">E-mail</label> 

Avec quelque chose CSS comme ceci:

input:focus + label { top: 100%; } 

Cependant, le produit HTML est structuré comme ceci, avec l'étiquette avant l'entrée et l'erreur bloque entre:

<label for="email">Email Address</label> 
<div aria-hidden="true" class="error itemLevel"> 
<p aria-live="polite" role="alert" tabindex="1">Please enter a valid email address.</p> 
<input aria-required="true" id="email" title="Email address that can be used to contact you." type="text"> 

Comment cibler l'étiquette avec du CSS pur?

Answer 1

Vous pouvez utiliser un sélecteur d'attribut:

label[for="email"] { ... }