El combinador general de hermanos (~) en CSS se ve así en uso:
.featured-image ~ p ( font-size: 90%; )En ese ejemplo, seleccionaría todos los párrafos en un artículo que vienen después de la imagen destacada (un elemento con un nombre de clase de "imagen destacada") y los haría un poco más pequeños font-size.
Esto selecciona elementos en el mismo nivel de jerarquía. En este ejemplo .featured-imagey los pelementos están en la misma jerarquía. Si el selector continúa más allá de po antes .featured-image, se aplican las reglas normales. Así que .featured-image ~ p spantodavía seleccionaría tramos que sean descendientes de cualquier .featured-image ~ pcoincidencia.
La especificación para los selectores de nivel 4 llama a estos "siguientes combinadores hermanos".
Manifestación
Aquí hay otro ejemplo que destaca todos los pelementos que siguen a img:
img ~ p ( background-color: #FEF0B6; padding: 5px; )Lo que resultará en lo siguiente:
Peculiaridades
WebKit solía tener una peculiaridad en la que no se podían usar con pseudo selectores. Me gusta:
input:checked ~ div ( /* Wouldn't work */ )No sé las versiones exactas de los navegadores en los que se solucionó, pero ahora está arreglado.
Más información
- Selectores de niños y hermanos
- Similar al Combinador de hermanos adyacentes.
- Documentos de MDN
Soporte del navegador
| Cromo | Safari | Firefox | Ópera | ES DECIR | Androide | iOS |
|---|---|---|---|---|---|---|
| Alguna | 3+ | 1+ | 9+ | 7+ | Alguna | Alguna |