¿Qué significa el selector de "~" (tilde / squiggle / twiddle) CSS?


Answers

Combinador general de hermanos

El selector general del combinador de hermanos es muy similar al selector del combinador de hermanos adyacente. La diferencia es que el elemento seleccionado no necesita tener éxito inmediatamente en el primer elemento, pero puede aparecer en cualquier lugar después de él.

Más información

Question

Buscar el ~ personaje no es fácil. Estaba revisando algunos CSS y encontré esto

.check:checked ~ .content {
}

Qué significa eso?




Es un General sibling combinator y se explica muy bien en la respuesta de @ Salaman.

Lo que sí extrañé es el Adjacent sibling combinator que es + y está estrechamente relacionado con ~ .

ejemplo sería

.a + .b {
  background-color: #ff0000;
}

<ul>
  <li class="a">1st</li>
  <li class="b">2nd</li>
  <li>3rd</li>
  <li class="b">4th</li>
  <li class="a">5th</li>
</ul>
  • Coincide con elementos que son .b
  • Son adyacentes a .a
  • Después de .a en HTML

En el ejemplo anterior, marcará el 2º li pero no el 4º.

   .a + .b {
     background-color: #ff0000;
   }
<ul>
  <li class="a">1st</li>
  <li class="b">2nd</li>
  <li>3rd</li>
  <li class="b">4th</li>
  <li class="a">5th</li>
</ul>

JSFiddle




Related