Archiva esto en cosas que aún no necesitas saber, pero creo que :has El selector de CSS tendrá un gran impacto en la forma en que escribimos CSS en el futuro. De hecho, si alguna vez se incluye en los navegadores, creo que rompe mi modelo mental de cómo funciona fundamentalmente CSS porque sería el primer ejemplo de un selector padre en CSS.
Antes de explicar todo eso, veamos un ejemplo:
div:has(p) {
background: red;
}Aunque actualmente no es compatible con ningún navegador, esta línea de CSS cambiaría el fondo de un div sólo si tiene un párrafo dentro. Entonces, si hay un div sin párrafos, estos estilos no se aplicarán.
Eso es bastante útil y, sin embargo, excepcionalmente extraño, ¿verdad? Aquí hay otro ejemplo:
div:has(+ div) {
color: blue;
}Este CSS solo se aplicaría a cualquier div que directamente tiene otro div siguiéndolo.
La forma en que pienso :has Es esto: es una pseudoclase de selector de padres. Eso es CSS para “te permite cambiar el elemento principal si tiene un elemento secundario u otro elemento que lo siga”. Esto es absolutamente extraño para mí porque rompe con mi modelo mental de cómo funciona CSS. Así es como estoy acostumbrado a pensar en CSS:
/* Not valid CSS, just an illustration */
.parent {
.child {
color: red;
}
}Solo puede estilizar, de padre a hijo, pero nunca hacer una copia de seguridad del árbol. :has cambia completamente esto porque hasta ahora no ha habido selectores de padres en CSS y hay algunas buenas razones por las cuales. Debido a la forma en que los navegadores analizan HTML y CSS, seleccionar el padre si se cumplen ciertas condiciones podría generar todo tipo de problemas de rendimiento.
Sin embargo, dejando de lado esas preocupaciones, si me siento y pienso en todas las formas en que podría usar :has hoy entonces me da un dolor de cabeza. Abriría esta caja de oportunidades de Pandora que nunca ha sido posible con CSS solo.
Bien, un último ejemplo: digamos que solo queremos aplicar estilos a los enlaces que tienen imágenes:
a:has(> img) {
border: 20px solid white;
}Esto sería útil de vez en cuando. También puedo ver :has que se utiliza para agregar condicionalmente margen y relleno a los elementos en función de su contenido. Eso sería genial.
A pesar de que :has no es compatible con los navegadores en este momento (probablemente por esas razones de rendimiento), es parte de la especificación CSS Selectors Level 4, que es la misma especificación que tiene la extremadamente útil :not pseudo-clase. a diferencia de :has, :not tiene un soporte de navegador bastante decente y lo usé por primera vez el otro día:
ul li:not(:first-of-type) {
color: red;
}Eso es genial. También me encanta lo malditamente legible que es; nunca es necesario haber visto esta línea de código para comprender lo que hace.
Otra forma en que puedes usar :not es para márgenes:
ul li:not(:last-of-type) {
margin-bottom: 20px;
}Entonces, cada elemento que no sea el último obtiene un margen. Esto es útil si tiene varios elementos en una tarjeta, como este:
CSS Selectors Level 4 también es la misma especificación que tiene la :is selector que se puede usar así hoy en muchos navegadores:
:is(section, article, aside, nav) :is(h1, h2, h3, h4, h5, h6) {
color: #BADA55;
}
/* ... which would be the equivalent of: */
section h1, section h2, section h3, section h4, section h5, section h6,
article h1, article h2, article h3, article h4, article h5, article h6,
aside h1, aside h2, aside h3, aside h4, aside h5, aside h6,
nav h1, nav h2, nav h3, nav h4, nav h5, nav h6 {
color: #BADA55;
}¡Eso es todo! :has puede que no sea útil hoy, pero sus primos :is y :not ya puede ser fabulosamente útil y eso es solo un pequeño vistazo, solo tres pseudoclases de CSS, que están disponibles en esta nueva especificación.