¿Qué significa el selector CSS “~” (tilde / squiggle / twiddle)?




2 Answers

Combinador general de hermanos

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

Más información

css css3 css-selectors

Buscar el carácter ~ no es fácil. Estaba mirando un poco de 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 eché de menos es un Adjacent sibling combinator que es + y está estrechamente relacionado con ~ .

ejemplo seria

.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 de arriba, marcará 2 ° li pero no 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