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

Question

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

Demandé el 29 de Janvier, 2009: Quand la question a-t-elle été
21636 affichage: Nombre de visites la question a
5 Réponses: Nombre de réponses aux questions
Résolu: Situation réelle de la 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.

Demandé el 29 de Janvier, 2009 par Dan Herbert

Answer 1

5 Réponses

Answer 2

36voto

Dan Herbert Points 38336

El Sélecteurs CSS 4 Spec fournit une syntaxe permettant de définir le "sujet" d'un sélecteur en utilisant une balise ! . Au début de l'année 2013, cette fonction n'est disponible dans aucun navigateur. Je l'inclus parce que ce sera la façon correcte de le faire en utilisant du CSS pur une fois que les navigateurs implémenteront cette syntaxe.

Compte tenu du balisage de la question

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

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

Ce CSS ferait l'affaire.

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

Bien entendu, cela suppose que les navigateurs mettent effectivement en œuvre le sélecteur de sujet et qu'il n'y a pas de bogues liés au fonctionnement de cette syntaxe avec la fonction :focus pseudo-classe.

Note : La spécification en est encore à ses débuts. Au moment où nous écrivons ces lignes (début 2013), la syntaxe exacte (point d'exclamation avant ou après l'élément sujet, ou même les deux) fait encore l'objet d'un débat. Elle pourrait donc changer d'ici à ce qu'elle soit mise en œuvre dans un navigateur.

Répondu el 25 de Juillet, 2012 par Dan Herbert (38336 Points )

Answer 3

24voto

Matt Brunell Points 7120

Il serait possible d'utiliser le "sélecteur de frères et sœurs adjacents" si l'élément de la liste était le suivant input était devant le label . Il suffit de mettre le input avant le label et modifiez ensuite la mise en page pour mettre label avant le input . Voici un exemple :

<head runat="server">
    <title></title>
    <style type="text/css">
    input:focus + label {font-weight: bold}
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div style="direction:rtl">
        <input type="text" id="username" />
        <label for="username">Username:</label>
    </div>
    <div style="direction:rtl">
        <input type="password" id="password" />
        <label for="password">Password:</label>
    </div>
    </form>
</body>

(C'est une sorte de hack, j'utiliserais personnellement javascript pour faire cela)

Répondu el 29 de Janvier, 2009 par Matt Brunell (7120 Points )

Answer 4

8voto

JayTee Points 1584

Il n'y a pas de sélecteur qui vous donnera l'élément précédent en utilisant CSS..

Vous devrez utiliser le javascript pour gérer ce que vous recherchez.

Répondu el 29 de Janvier, 2009 par JayTee (1584 Points )

Answer 5

5voto

Utilisateur non enregistré Points 0

Utilisez ce sélecteur :

label[for=username]
{
font-weight: bold
}

ceci sélectionnera l'étiquette qui a la valeur 'username' dans l'attribut 'for'.

Répondu el 29 de Janvier, 2009 par Utilisateur non enregistré (0 Points )

Answer 6

5voto

Ole Helgesen Points 1521

Le fait de faire flotter l'élément d'entrée vers la droite permet d'obtenir l'ordre correct des éléments sans changer l'ordre des "Nom d'utilisateur" et des " :" dans le texte de l'étiquette que vous obtenez avec direction:rtl.

<style type="text/css">
    form {text-align: right;}
    input:focus + label {font-weight: bold}
    input {float:right; clear:right;}
</style>
<form>
    <div>
        <input type="text" id="username" />
        <label for="username">Username:</label>
    </div>
    <div>
        <input type="password" id="password" />
        <label for="password">Password:</label>
    </div>
</form>

Répondu el 29 de Janvier, 2009 par Ole Helgesen (1521 Points )

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

Réponses

Questions en vedette

Top Tags

Prograide.com

Powered by:

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

Réponses

Questions en vedette

Top Tags

Dans notre réseau

Prograide.com

Powered by: