CSS tiene una gran falta de una manera de seleccionar directamente un elemento superior basado en
sus hijos. Esta ha sido una de las principales solicitudes de los desarrolladores durante muchos años. El
El selector :has()
, que ahora es compatible con todos los navegadores principales, resuelve este problema. Antes
:has()
, a menudo encadenas selectores largos o agregas clases para diseñar hooks. Ahora
puedes aplicar ajustes de diseño según la relación de un elemento con sus elementos subordinados. Más información
sobre el selector :has()
en
Cierre de CSS de 2023 y
5 fragmentos de CSS que todo desarrollador de frontend debe conocer.
Aunque este selector parece pequeño, puede habilitar una gran cantidad de casos de uso.
En este artículo, se muestran algunos casos de uso que las empresas de comercio electrónico aprovecharon con el
Selector :has()
.
:has()
forma parte de Baseline Newly Disponible.
Consulta la serie completa de la que forma parte este artículo, en la que se analiza cómo Las empresas de comercio electrónico mejoraron su sitio web con nuevas funciones de IU y CSS.
Bazar de políticas
Con el selector
:has()
, pudimos eliminar la validación basada en JavaScript. de la selección del usuario y reemplazarla con una solución CSS que funciona sin problemas para nosotros con la misma experiencia que antes. Aman Soni, líder de Tecnología, Policybazaar
El equipo de inversión de Policybazaar aplicó inteligentemente el selector :has()
para proporcionar un
una clara indicación visual para los usuarios que comparan planes. La siguiente imagen
muestra dos tipos de planes en la IU de comparación (amarillo y azul). Cada plan
solo pueden compararse
con su propio tipo. Mediante :has()
, cuando un usuario selecciona uno
no se puede seleccionar el otro tipo de plan.
:has()
para aplicar diseño a los elementos superiores y los elementos secundarios de modo de crearlos
una funcionalidad de selección vinculada a la categoría.Código
:has()
te permite acceder a elementos superiores de diseño y sus elementos secundarios. El
El siguiente código verifica si un contenedor superior tiene configurada una clase .disabled-group
.
Si es así, la tarjeta aparecerá inhabilitada, y el botón "Agregar" se evita que el botón
reaccionando a los clics configurando pointer-events
como none
.
.plan-group-container:has(.disabled-group) {
opacity: 0.5;
filter: grayscale(100%);
}
.plan-group-container:has(.disabled-section) .button {
pointer-events: none;
border-color: #B5B5B5;
color: var(--text-primary-38-color);
background: var(--input-border-color);
}
El equipo de salud de Policybazaar implementó
un caso de uso ligeramente diferente. Tienen un cuestionario intercalado para el usuario y usan
:has()
para marcar el estado de la casilla de verificación de la pregunta y ver si se respondió
respondido. De ser así, se aplica una animación para hacer la transición a la siguiente pregunta.
Código
En el ejemplo de comparación de planes, se usó :has()
para verificar la presencia de una
. También puedes verificar el estado de un elemento de entrada, como una casilla de verificación, con
:has(input:checked)
En la imagen que muestra el cuestionario, cada pregunta de la
el banner púrpura es una casilla de verificación. El bazar de políticas comprueba si se realizó la pregunta
se responda con :has(input:checked)
y, si es así, activa una animación con
animation: quesSlideOut 0.3s 0.3s linear forwards
para pasar a la siguiente
pregunta. Observa cómo funciona en el siguiente código.
.segment_banner__wrap__questions {
position: relative;
animation: quesSlideIn 0.3s linear forwards;
}
.segment_banner__wrap__questions:has(input:checked) {
animation: quesSlideOut 0.3s 0.3s linear forwards;
}
@keyframes quesSlideIn {
from {
transform: translateX(50px);
opacity: 0;
}
to {
transform: translateX(0px);
opacity: 1;
}
}
@keyframes quesSlideOut {
from {
transform: translateX(0px);
opacity: 1;
}
to {
transform: translateX(-50px);
opacity: 0;
}
}
Tokopedia
Tokopedia usó :has()
para crear una imagen superpuesta si la miniatura del producto
contiene un video. Si la miniatura del producto contiene una clase .playIcon
, se crea un CSS.
se agrega una superposición. Aquí, el selector :has() se usa junto con el &
.
selector de anidación dentro de la clase general .thumbnailWrapper
que se aplica
a todas las miniaturas. Esto crea un código CSS más modular y legible.
![Captura de pantalla de la página de Tokopedia antes y después de usar el selector.](https://developer.chrome.com/static/blog/css-ui-ecommerce-has/image/has-before-after.png?authuser=19&hl=es)
:has()
.Código
El siguiente código usa la
Selectores y combinadores CSS
(&
y >
) y anidando con :has()
para definir el estilo de la miniatura.
Para no de apoyo
navegadores, la regla de clase CSS adicional normal se usa como resguardo. El
La regla @supports selector(:has(*))
también se usa para verificar la compatibilidad del navegador.
Por lo tanto, la experiencia general es la misma en todas las versiones del navegador.
export const thumbnailWrapper = css`
padding: 0;
margin-right: 7px;
border: none;
outline: none;
background: transparent;
> div {
width: 64px;
height: 64px;
overflow: hidden;
cursor: pointer;
border-color: ;
position: relative;
border: 2px solid ${NN0};
border-radius: 8px;
transition: border-color 0.25s;
&.active {
border-color: ${GN500};
}
@supports selector(:has(*)) {
&:has(.playIcon) {
&::after {
content: '';
display: block;
background: rgba(0, 0, 0, 0.2);
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
}
}
& > .playIcon {
position: absolute;
top: 25%;
left: 25%;
width: 50%;
height: 50%;
text-align: center;
z-index: 1;
}
}
`;
Aspectos que debes tener en cuenta cuando usas :has()
Combina :has()
con otros selectores para crear una condición más compleja. Cheque
Puedes ver algunos ejemplos en has() el selector de familia.
Recursos:
- Cierre de CSS del 2023
- :has(): El selector de familia
- Demostraciones :has()
- ¿Quieres informar un error o solicitar una función nueva? Queremos conocer tu opinión.
Explora los otros artículos de esta serie sobre cómo el comercio electrónico empresas se beneficiaron con el uso de nuevas funciones de CSS y de IU, como las basadas en desplazamientos como animaciones, transiciones de vistas, ventanas emergentes y consultas de contenedores.