5

Estaba buscando una forma de cambiar el texto que hay encima de un input en una pagina de login y encontre esta syntax que funciona y hace lo que debe, pero no entiendo muy bien como funciona, o lo que esta pasando ahí, intuyo que cuando se activa el focus, es decir, cuando se hace click encima del input pasa algo con el texto en label.

 input:focus ~ label
1
  • No se si sera lo mismo pero yo usaba esta, input:focus + label cuando haces focus en un input aplica la clase al elemento label que esta asociado a ese input por el for=" " por ejemplo cambiandolo de color, aca hay un ejemplo jsfiddle.net/4d9dm
    – Juan
    el 28 dic. 2018 a las 18:25

2 respuestas 2

10

El selector ~ sirve para aplicar un estilo a un elemento que esté precedido por otro. En este caso aplica el estilo al label precedido por un input y a su vez, el input debe estar en focus.

 input:focus ~ label{
   color:red;
 }
<input type="text">
<label>hola</label>

0
5

El ~ es un combinador que se utiliza para seleccionar hermanos generales. Separa dos selectores, y selecciona el segundo elemento sólo si está precedido por el primero y ambos comparten un padre común. Es decir, selecciona el segundo elemento si es un hermano del primero (están al mismo nivel y tienen el mismo padre) que aparece después en el código.

A diferencia de + (que es el combinador de hermano adyacente), el segundo selector puede ser cualquier elemento que aparezca después y no directamente de forma seguida. Por lo tanto, ~ es más genérico: puede seleccionar más de un elemento y esos elementos no tienen por qué ser contiguos.

Aquí dejo unos ejemplos de uso:

input:focus ~ label {
  color: blue;
}
<section>
  <h2>Ejemplo 1:</h2>
  <input />
  <label>Este label se pondrá azul cuando el input gane foco.</label>
  <div>
    <label>Pero éste no, porque no es un hermano.</label>
  </div>
</section>

<section>
  <h2>Ejemplo 2:</h2>
  <input />
  <label>Este label se pondrá azul cuando el input gane foco.</label>
  <span>Esto es un span y no cambiará.</span>
  <label>Y esto es un label que también cambiará a azul a pesar de no estar seguido.</label>
</section>

<section>
  <h2>Ejemplo 3:</h2>
  <p>
    ...entonces, ¡cuidado! Éste selector es genérico y podrías estar seleccionando más 
    de lo que esperas si no se organiza bien el código.
  </p>
  <input />
  <label>Este label se pondrá azul cuando el primer input gane foco.</label><br/>
  <input />
  <label>¡Este label se pondrá azul cuando cualquiera de los dos inputs gane foco!</label>
</section>

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.