:focus-within

Выделяем элементы в фокусе и их родителей.

Время чтения: меньше 5 мин

Кратко

Секция статьи "Кратко"

Псевдокласс :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 применился к форме.