selectores - selector padre css
Selector CSS para seleccionar un elemento que viene ANTES de otro elemento? (5)
Esta pregunta ya tiene una respuesta aquí:
- ¿Hay un selector de CSS "hermano anterior"? 14 respuestas
Estoy trabajando en una página de inicio de sesión para mi sitio web y quiero poner en negrita la etiqueta que viene antes del cuadro de entrada cuando el cuadro de texto gana enfoque. En este momento tengo el siguiente marcado:
<label for="username">Username:</label>
<input type="textbox" id="username" />
<label for="password">Password:</label>
<input type="textbox" id="password" />
Puedo usar el selector adyacente para seleccionar la etiqueta después del cuadro de texto, pero no puedo seleccionar el elemento anterior. Puedo utilizar esta regla de selector de CSS, pero solo selecciona la etiqueta después, por lo que cuando el cuadro de texto de nombre de usuario gana el foco, la etiqueta de la contraseña se pone en negrita.
input:focus + label {font-weight: bold}
¿Hay algo que pueda hacer para que esto funcione? Sé que JavaScript podría usarse para hacer esto fácilmente, pero me gustaría utilizar una solución puramente basada en CSS, si es posible, simplemente no puedo encontrar una manera de hacerlo.
Al desplazar el elemento de entrada hacia la derecha, se obtiene el orden correcto de los elementos sin cambiar el orden de "Nombre de usuario" y ":" en el texto de la etiqueta que se obtiene con la dirección: 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>
La especificación de CSS Selectors 4 proporciona una sintaxis para definir el "sujeto" de un selector mediante el uso de a ! . A principios de 2016, esto no está disponible en ningún navegador. Lo incluyo porque será la forma correcta de hacerlo con CSS puro una vez que los navegadores implementen esta sintaxis.
Dado el marcado en la pregunta
<label for="username">Username:</label>
<input type="textbox" id="username" />
<label for="password">Password:</label>
<input type="textbox" id="password" />
Este CSS haría el truco.
label:has(+ input:focus) {font-weight: bold}
Por supuesto, esto supone que los navegadores realmente implementan el selector de sujetos y que no hay errores relacionados con el funcionamiento de esta sintaxis con la :focus .
No hay selector que le proporcione el elemento anterior usando CSS.
Necesitará usar javascript para manejar lo que está buscando.
Sería posible usar el ''selector de hermanos adyacente'' si la input estaba antes de la label . Simplemente coloque la input antes de la label , y luego modifique el diseño para poner la label antes de la input . Aquí hay un ejemplo:
<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>
(Es una especie de truco, yo personalmente usaría Javascript para hacer esto)
input:focus + label {font-weight: bold}
<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>
Use este selector:
label[for=username]
{
font-weight: bold
}
esto seleccionará la etiqueta que tiene el valor ''nombre de usuario'' en el atributo ''para''