hermano - nuevos selectores css

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

Question

Buscar el carácter ~ no es fácil. Estaba mirando un poco de CSS y encontré esto

.check:checked ~ .content {
}

Qué significa eso?

Answer 1

El selector ~ es de hecho el combinador general de hermanos (renombrado a combinador de hermanos posteriores en el nivel 4 de selectores ):

El combinador general de hermanos está formado por el carácter "tilde" (U + 007E, ~) 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 la segunda.

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 4ª y 5ª lista porque:

• Son .b elementos
• Son hermanos de .a
• Aparece después de .a en el orden de origen HTML.

Del mismo modo, .check:checked ~ .content coincide con todos los elementos de contenido .content que son hermanos de .check:checked y aparecen después.

Answer 2

Es bueno comprobar también los otros combinators de la familia y volver a lo que es específico.

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

Ejemplo de lista de verificación:

• ul li - Looking inside - Selecciona todos los elementos li colocados (en cualquier lugar) dentro de la ul ; Selector de descendientes
• ul > li - Mirando hacia adentro - Selecciona solo los elementos li directos de ul ; Es decir, solo seleccionará hijos directos de ul ; Selector de niños o selector de combinador de niños
• ul + ul - Mirando hacia afuera : selecciona la ul inmediatamente después de la ul ; No está mirando hacia adentro, sino mirando hacia afuera para el elemento inmediatamente siguiente; Selector de hermanos adyacente
• ul ~ ul - Mirando hacia afuera - Selecciona todas las ul que siguen a la ul no importa dónde estén, pero ambas ul deberían tener el mismo padre; Selector general de hermanos

El que estamos viendo aquí es el Selector General de Hermanos.

Answer 3

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

Answer 4

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 valor.

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

Answer 5

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