В чем разница между :focus и :focus-within?

`:focus` применяется к самому элементу в фокусе, а `:focus-within` — к элементу, внутри которого (в потомках) есть сфокусированный элемент.

:focus

Стилизует элемент, который сам получил фокус:

input:focus {
  border-color: blue; /* когда поле в фокусе */
}

:focus-within

Стилизует родителя, если фокус находится на нём или любом его потомке:

.form-group:focus-within {
  border-color: blue; /* когда любое поле внутри в фокусе */
}

<div class="form-group"> <!-- подсветится, когда input внутри в фокусе -->
  <label>Email</label>
  <input type="email">
</div>

Главное различие

• :focus — сам элемент в фокусе.
• :focus-within — элемент содержит сфокусированный (сам или потомок).

Применение :focus-within

• Подсветить всю группу поля при фокусе инпута.
• Раскрыть/подсветить выпадающее меню, пока фокус внутри.
• Стилизовать контейнер формы при активном поле.

.dropdown:focus-within .menu { display: block; }

Коротко для собеседования

:focus — стиль самого сфокусированного элемента. :focus-within — стиль родителя, когда фокус на нём или его потомке. :focus-within удобен для подсветки группы/контейнера при фокусе вложенного поля или раскрытия меню, пока фокус внутри.