:focus-within

Псевдокласс :focus-within применяется к элементам, которые либо сами находятся в фокусе, либо имеют дочерние элементы в фокусе.

        
          
          form:focus-within {  background-color: #282A2E;}
          form:focus-within {
  background-color: #282A2E;
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

После любого селектора ставим двоеточие и пишем ключевое слово focus-within:

        
          
          .input:focus-within {  outline: 2px solid hotpink;}
          .input:focus-within {
  outline: 2px solid hotpink;
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Псевдокласс :focus-within используется в двух случаях:

• если к этому элементу применяется псевдокласс :focus;
• если к потомку этого элемента применяется псевдокласс :focus.

Причём потомок не обязательно должен быть прямым. Например, в примере с формой все теги <input> были сначала вложены в <div> и только потом — в <form>. Несмотря на это, :focus-within применился к форме.