2

Tengo una duda sobre este operador ~ el cual vi que se utilizaba como una especie de selector en CSS. Lo vi en un tutorial en el cual el instructor utiliza dicho operador junto con la clase :checked de un elemento input de tipo radio button, tal que asi:

input:cheked ~ div{
     background-color: red;
}

en realidad no le cambia el color pero es solo demostrar como lo utiliza. Si alguien sabe el funcionamiento me seria de ayuda porque en otras circunstancias no me funciono, nose si sera por culpa de la herencia o que. Gracias de antemano.

4
  • y la pregunta cual es?
    – user75901
    Commented el 13 ene. 2019 a las 19:45
  • para que se utiliza, porque no comprendo q funcion cumple dicho selector, porque lo intente usar en otras circunstancias y no me funciono Commented el 13 ene. 2019 a las 19:50
  • Selecciona cualquier div precedido por un input radio o checkbox que esta marcado checked
    – enxaneta
    Commented el 13 ene. 2019 a las 20:00
  • Una lista de Selectores CSS
    – enxaneta
    Commented el 13 ene. 2019 a las 20:08

2 respuestas 2

4

Este operador ~ sirve para identificar a aquellos elementos que estan precedidos por otro del DOM, es decir

Si yo coloco esto

div ~ p

Lo que le estoy diciendo es que aplique estilos a todos los elementos p que tienen antes de ellos un <div> </div>

Ojo

El elemento div en el ejemplo anterior debe estar justo antes del elemento p

Imagina este ejemplo

<p>
  <a href="">Uno</a>
  <a href="">Dos</a>
</p>
  <div> </div>
    <p>Hola Mundo</p>

Del código anterior yo solo quiero aplicarle estilos de color rojo a aquellos párrafos p que tengan antes un div

Entonces mi código CSS debe quedar del modo siguiente

div ~ p{
      color: red;
    }

Leyendolo de izquierda a derecha se interpreta así

Selecciona todos las etiquetas p, que antes de ellas tengan un div y a esos párrafos > p aplicales un color de letra rojo

Cuyo resultado será así

introducir la descripción de la imagen aquí

EJEMPLO

    <!DOCTYPE html>
    <html>
    <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width">
      <title>JS Bin</title>
      <style>
        div ~ p{
          color: red;
        }
      </style>
    </head>
    <body>
    <p>
      <a href="">Uno</a>
      <a href="">Dos</a>
    </p>
      <div> </div>
        <p>Hola Mundo</p>
     
    </body>
    </html>

Entonces para tu pregunta es:

Aplicar un color de fondo rojo para todo div que se encuentre precedido o que antes de el exista un input de tipo radio y que se encuentre como checked ignorando a los que no cumplan esa condición

4
  • Ahhhhh, ahora comprendo, gracias, pero antes, si yo quisiera ocurriese algo en un div cuando se cumpla el evento :checked, deberia optar por obviar el operador " ~ "? De forma que me quede de la siguiente manera ?: ´nput:checked div{ color: red } Commented el 13 ene. 2019 a las 20:21
  • al menos a como se las cosas @Diego en esa situación debería ser así mas o menos input[type="radio"]:checked + div{ color: red; } pues con ayuda del signo + indicas que se afecten todos los elementos que estan justo después de un input type radio y que esta checked
    – user75901
    Commented el 13 ene. 2019 a las 20:25
  • 1
    Ahora si, muchas gracias shadow Commented el 13 ene. 2019 a las 20:26
  • "El elemento div en el ejemplo anterior debe estar justo antes del elemento p" Eso sería en el caso de usar el operador + que selecciona hermanos adyacentes, con ~ selecciona a todos los hermanos siempre vayan después
    – user7176
    Commented el 15 ene. 2019 a las 8:16
2

Es un selector parecido al + pero en vez de que sólo tome el primer elemento encontrado, este va a tomar todos los elementos.

Por ejemplo: h2 + p seleccionará en rojo la primera etiqueta <p> que encuentre.

h2 + p {
  color: red;
}
<h2>Título</h2>
<p>Párrafo 1</p>
<p>Párrafo 2</p>
<p>Párrafo 3</p>

Mientras que con el selector ~ seleccionará todos los elementos encontrados.

h2 ~ p {
  color: red;
}
<h2>Título</h2>
<p>Párrafo 1</p>
<p>Párrafo 2</p>
<p>Párrafo 3</p>


Para más información de los selectores CSS te recomiendo que le des una mirada a Los 30 selectores CSS que debes memorizar que tiene todas la información de los selectores CSS. Me sirvió mucho cuando comencé.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

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