No entanto, o CSS não tinha uma maneira de selecionar diretamente um elemento pai com base nos filhos dele. Essa é uma das principais solicitações de desenvolvedores há muitos anos. O seletor :has(), agora compatível com todos os principais navegadores, resolve isso. Antes de :has(), você costumava encadear seletores longos ou adicionar classes para definir o estilo de ganchos. Agora, é possível definir o estilo com base na relação de um elemento com os descendentes. Leia mais sobre o seletor :has() na página CSS Wrapped 2023 e Cinco snippets CSS que todo desenvolvedor de front-end precisa conhecer.
Embora esse seletor pareça pequeno, ele pode permitir um grande número de casos de uso.
Neste artigo, mostramos alguns casos de uso que as empresas de e-commerce desbloquearam com o seletor :has().
:has() faz parte do valor de referência recém-disponível.
Confira a série completa de que este artigo faz parte, que discute como as empresas de e-commerce aprimoraram o site usando novos recursos de CSS e interface.
Bazar de Políticas
Com o seletor
:has(), conseguimos eliminar a validação baseada em JavaScript da seleção do usuário e substituí-la por uma solução CSS que está funcionando perfeitamente com a mesma experiência de antes.—Aman Soni, líder de tecnologia, Policybazaar
A equipe de investimentos da Policybazaar aplicou com inteligência o seletor :has() para fornecer uma
indicação visual clara aos usuários que estão comparando planos. A imagem a seguir
mostra dois tipos de planos na interface de comparação (amarelo e azul). Cada plano
só pode ser comparado com o próprio tipo. Usando :has(), quando o usuário seleciona um
tipo de plano, o outro não pode ser selecionado.
:has() para estilizar o elemento pai e os filhos dele para criar
uma funcionalidade de seleção vinculada a uma categoria.Programar
:has() dá acesso ao estilo dos elementos pais e dos filhos deles. O
código a seguir verifica se um contêiner pai tem uma classe .disabled-group definida.
Se for o caso, o cartão ficará esmaecido, e o botão "Adicionar" será impedido de reagir a cliques definindo 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);
}
A equipe de saúde da Policybazaar implementou
um caso de uso um pouco diferente. Ele tem um teste inline para o usuário e usa
:has() para verificar o status da caixa de seleção da pergunta e ver se ela foi
respondida. Se sim, uma animação é aplicada para fazer a transição para a próxima pergunta.
Programar
No exemplo de comparação do plano, :has() foi usado para verificar a presença de uma
classe. Também é possível conferir o estado de um elemento de entrada, como uma caixa de seleção, usando
:has(input:checked). Na imagem que mostra o teste, cada pergunta
no banner roxo é uma caixa de seleção. O Policybazaar verifica se a pergunta foi
respondida usando :has(input:checked) e, se tiver sido, aciona uma animação usando
animation: quesSlideOut 0.3s 0.3s linear forwards para deslizar para a próxima
pergunta. Confira como isso funciona no código abaixo.
.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
A Tokopedia usou :has() para criar uma imagem de sobreposição se a miniatura do produto
contivesse um vídeo. Se a miniatura do produto tiver uma classe .playIcon, uma sobreposição de CSS será adicionada. Aqui, o seletor :has() é usado com o seletor de aninhamento &
na classe abrangente .thumbnailWrapper que se aplica
a todas as miniaturas. Isso cria CSS mais modular e legível.
:has().Programar
O código a seguir usa os seletores e combinadores CSS (& e >) e o aninhamento com :has() para estilizar a miniatura.
Para navegadores que não são compatíveis, a regra normal de classe CSS adicional é usada como substituta. A
regra @supports selector(:has(*)) também é usada para verificar a compatibilidade com o navegador.
Portanto, a experiência geral é a mesma em todas as versões do 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;
}
}
`;
O que considerar ao usar :has()
Combine :has() com outros seletores para criar uma condição mais complexa. Confira alguns exemplos em has(), the family selector.
Recursos:
- Finalização do CSS em 2023
- :has(): o seletor da família
- Demonstrações :has()
- Quer informar um bug ou solicitar um novo recurso? Queremos saber sua opinião.
Confira os outros artigos desta série que falam sobre como as empresas de e-commerce se beneficiaram do uso dos novos recursos de CSS e interface, como animações de rolagem, transições de visualização, pop-ups e consultas de contêiner.