:focus-within

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

A pseudo-classe CSS :focus-within representa um elemento que recebeu o foco ou contém um elemento que recebeu o foco. Em outras palavras, isto representa um elemento que é correspondido por si só pela pseudo-classe :focus ou tem um descendente que é correspondido por :focus. (Isto inclui descendentes em shadow trees.)

css

/* Seleciona uma  quando um de seus descendentes é focado */
div:focus-within {
  background: cyan;
}

Este seletor é útil, pegando um exemplo comum, para destacar um todo

Sintaxe

Error: could not find syntax for this item

Exemplo

Neste exemplo, o formulário receberá estilos de coloração especiais quando o input de texto recebe o foco

HTML

html

Tente digitar neste formulário.


  Given Name:
  
  

  Family Name:

CSS

css

form {
  border: 1px solid;
  color: gray;
  padding: 4px;
}

form:focus-within {
  background: #ff8;
  color: black;
}

input {
  margin: 4px;
}

Resultado

Especificações

Specification
Selectors Level 4 # the-focus-within-pseudo

Compatibilidade com navegadores

Veja também

:focus