/* Выделяет когда один из его потомков находится в фокусе */
div:focus-within {
background: cyan;
} Этот селектор может оказаться полезным, например, для подсвечивания всего контейнера <form>, когда пользователь устанавливает фокус на одном из его полей ввода <input>.:first-child — это первый потомок, не важно какой это элемент. А first-of-type это первый элемент конкретного типа. Возьмем вот такую HTML разметку:
title
paragraph 1
paragraph 2
div:first-child {
font-size: 20px;
} Здесь размер шрифта применится к заголовку h1, так как он является первым дочерним элементом div, тут все относительно просто.А вот тут сложнее. Псевдокласс :focus-visible используется, когда действительно нужно визуально выделить элементы в фокусе. Состояние фокуса не всегда применяется к элементам которые были переключены с помощью tab, а например трекпады и прочая специфическая лабуда. Там не нужно визуально выделять элемент, но состояние фокуса необходимо. А вот focus-visible это именно тогда, когда нужно визуально выделить элемент.
Вот здесь про это можешь почитать, лично я не совсем понимаю как это работает
https://doka.guide/css/focus-visible/
div p:first-of-type {
font-size: 20px;
} А вот здесь размер шрифта будет применен к первому элементу p внутри div. Подумай, смог бы ты так сделать используя first-child? Надеюсь объяснил понятно
