22.12.2024

Mudando o Estilo do Elemento Pai ao Focar em Elemento Filho com CSS

Resposta Rápida

No CSS, não há uma maneira direta de aplicar estilo a um elemento pai quando um elemento filho ganha foco. No entanto, você pode contornar essa limitação usando uma caixa de seleção invisível e seletor de irmãos adjacentes. Abaixo está um exemplo demonstrando esse método:

<div>
  <input type="checkbox" id="toggle" class="invisivel">
  <label for="toggle" class="filho">Clique em mim para ensinar novos truques ao pai</label>
  <div class="pai">Eu sou o pai, e estou pronto para novas lições!</div>
</div>

.invisivel {
  position: absolute;
  opacity: 0;
}

.invisivel:focus + .filho + .pai {
  background-color: yellow;
}

Focar no elemento label por meio de um clique transita para a caixa de seleção, que altera o estado visual do elemento com a classe 'pai'. O foco e a estrutura do documento são utilizados aqui para o estilo indireto do elemento pai.

Melhorando a Usabilidade com :focus-within

A pseudo-classe :focus-within permite que você estilize o elemento pai quando o foco está em um dos seus elementos filhos. Isso melhora significativamente a interação do usuário com formulários:

fieldset:focus-within {
  border: 2px solid blue;
}

legend:focus-within {
  color: green;
}

Você pode verificar a compatibilidade do navegador em caniuse.com. A pseudo-classe :focus-within melhora significativamente a acessibilidade da interface, permitindo que os usuários destaquem elementos ativos do formulário sem necessidade de JavaScript.

Usando JavaScript para Abordagens Antigas

Se :focus-within não for adequado para o seu projeto, você pode usar JavaScript. Ele permite adicionar ou remover dinamicamente uma classe 'focado' ao elemento pai em resposta aos eventos de foco e desfoque no elemento filho:

let pai = document.querySelector('.pai');
let filho = pai.querySelector('.filho');

filho.addEventListener('focus', () => pai.classList.add('focado'));
filho.addEventListener('blur', () => pai.classList.remove('focado'));

Transformando Label em Campo de Entrada

O CSS permite que você crie transformações visuais, como transformar um label em um campo de texto quando ganha foco:

label {
  /* Visualmente semelhante a um texto regular até receber foco */
}

label:focus-within input[type="text"] {
  /* Ativando a transformação no foco */
}

Usando ng-blur no Angular

No contexto Angular, a diretiva ng-blur é útil para retornar o campo de entrada ao seu estado original após a perda de foco e ocultar sua representação de label.

Alternando Modos com contenteditable

O atributo contenteditable facilita alternar entre modos de visualização e edição sem exigir transformações adicionais:

<label contenteditable="true">Eu sou editável. Clique e experimente.</label>

Esse método simplifica a interação do usuário com o elemento. Entretanto, lembre-se de que gerenciar o estado de tal elemento pode diferir daquele usado em formulários.

Visualização

Imagine uma foto de família na parede. Quando você foca em um dos membros da família, a foto inteira é realçada assim:

👨‍👩‍👧‍👦🖼️ Antes do foco: Uma foto em iluminação suave.
👨‍👩‍👧‍👦🎇 Após o foco: Quando o holofote (🔍) é direcionado a alguém, a imagem se ilumina!

Focar em um rosto individual (🔍) corresponde a focar em um elemento filho, enquanto mudar o brilho da foto simboliza a mudança de estado do elemento pai.

Exemplos Expandido e Recomendações

Para entender as abordagens sugeridas, explore exemplos interativos usando :focus-within em CSS e JavaScript no jsfiddle. Esteja atento ao impacto que o JavaScript tem na acessibilidade e desempenho em comparação com soluções puras de CSS.

Uma combinação inteligente de :focus-within com a pseudo-classe :not oferece um controle mais fino:

.pai:not(:focus-within) {
  /* Estilização aplicada quando nenhum elemento filho está focado */
}

Considere as nuances de trabalhar com o atributo contenteditable, como o potencial para perda indesejada de foco, que pode afetar significativamente a interação do usuário com uma página web.

Recomendações de Desenvolvimento de Software

Em projetos complexos, considere usar bibliotecas ou frameworks estabelecidos para gerenciar estados. Eles fornecem abordagens organizadas para rastrear mudanças de estado resultantes das ações do usuário.

Recursos Úteis

1. :focus - CSS: Folhas de Estilo em Cascata | MDN — Informações abrangentes sobre a pseudo-classe :focus e como ela funciona.
2. [:focus-within | CSS-Tricks](https://css-tricks.com/almanac/selectors/f/focus-within/) — Explicação de como a pseudo-classe :focus-within opera e como usá-la.
3. Can I use... Tabelas de suporte para HTML5, CSS3, etc — Tabelas de compatibilidade para a pseudo-classe CSS :focus-within em navegadores modernos.
4. Selectors Level 4 — Especificação legislativa da pseudo-classe CSS :focus-within do W3C.
5. Indicando foco para melhorar a acessibilidade - Mozilla Hacks — Como otimizar a acessibilidade da interface usando foco.

Video

Navigation