Самоучитель CSS Справочник CSS Селекторы Стили по умолчанию Цвета CSS Единицы измерения
Селекторы CSS

CSS псевдокласс :focus-within

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

/* Выбор элемента, если сам элемент или его
   потомок находится в фокусе */
:focus-within { background: yellow; }

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

Пример

form { 
  padding: 0 20px; 
  border: 1px solid #1f7a1f;
}
form:focus-within { background: #ebfaeb; }
<form>
  <h3>Вы любите пиццу?</h3>
  
  <p><label>
    <input type="radio" name="choice" value="yes">да
  </label></p>
  
  <p><label>
    <input type="radio" name="choice" value="no">нет
  </label></p>
  
  <p>
    <textarea rows="5" cols="40">
      Прокомментируйте свой выбор!
    </textarea>
  </p>
</form>

Результат

Вы любите пиццу?

Копирование материалов с данного сайта возможно только с разрешения администрации сайта
и при указании прямой активной ссылки на источник.
2011 – 2025 © puzzleweb.ru | razumnikum.ru

Реклама на сайте | puzinfo@puzzleweb.ru