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


Buscando el ~ personaje no es facil Estaba revisando algunos CSS y encontré esto

.check:checked ~ .content {
}

Qué significa eso?


662
2018-05-28 09:10


origen


Respuestas:


los ~ selector es, de hecho, el Combinador general de hermanos (renombrado como combinador de hermanos subsiguientes en Selectores Nivel 4)

El combinador de hermanos general está hecho de "tilde" (U + 007E, ~)   carácter que separa dos secuencias de selectores simples. los   elementos representados por las dos secuencias comparten el mismo padre en el   árbol de documentos y el elemento representado por la primera secuencia   precede (no necesariamente de inmediato) al elemento representado por   segundo.

Considere el siguiente ejemplo:

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

.a ~ .b coincide con los elementos de la lista 4 y 5 porque:

  • Son .b elementos
  • Son hermanos de .a
  • Aparecer despues .a en orden de fuente HTML.

Igualmente, .check:checked ~ .content coincide con todos .content elementos que son hermanos de .check:checked y aparecer después de eso.


1097
2018-05-28 09:29



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


168
2018-05-28 09:11



Bueno también para verificar el otro combinadores en la familia y para volver a lo que es este específico.

  • ul li
  • ul > li
  • ul + ul 
  • ul ~ ul

Ejemplo de lista de verificación:

  • ul li - Mirando adentro - Selecciona todas el li elementos colocados (en cualquier lugar) dentro del ul; Selector descendente
  • ul > li - Mirando adentro - Selecciona solo el directo  li elementos de ul; es decir, solo seleccionará niños directos li de ul; Selector de niños o Selector de combinador infantil
  • ul + ul - Mirando afuera - Selecciona el ul inmediatamente después de la ul; No está mirando adentro, sino mirando afuera para el siguiente elemento; Selector de hermanos adyacente
  • ul ~ ul - Mirando afuera - Selecciona todas las ul que sigue el ul no importa dónde esté, pero ambos ul debería tener el mismo padre; Selector general de hermanos

El que estamos viendo aquí es Selector general de hermanos


111
2017-09-16 21:46



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

Lo que sí extrañé es Adjacent sibling combinator cual 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 .a en HTML

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

   .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


25
2017-07-06 10:42



Tenga en cuenta que en un selector de atributos (por ejemplo, [data-components~=wheels]), la tilde

Representa un elemento con un nombre de atributo de attr cuyo valor es una lista de palabras separadas por espacios en blanco, una de las cuales es exactamente el valor.

https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors


2
2018-01-24 19:45