: skupienie wewnątrz - CSS-Tricks

:focus-withinSelektor pseudo CSS jest nieco nietypowe, chociaż dobrze nazwany i raczej intuicyjne. Wybiera element, jeśli ten element zawiera dzieci, które mają :focus.

form:focus-within ( background: lightyellow; )

Co działa w ten sposób…

Powiedziałem „niezwykłe”, ponieważ w CSS nie jest powszechne, aby móc wybrać element nadrzędny na podstawie istnienia lub stanu elementów potomnych. Oczywiście jest to przydatne!

Oto przykładowy formularz, aby go wypróbować:

Zobacz prosty responsywny formularz pióra z: focus-within autorstwa Chrisa Coyiera (@chriscoyier) na CodePen.

Zwróć uwagę, że przykładowe zastosowania :focus-withindotyczą całego formularza i wewnętrznego zawijania danych wejściowych

Każdy sposób, w jaki element podrzędny może stać się skupiony, wywoła: skupienie wewnątrz. Na przykład, jeśli element ma atrybut tab-indexlub contenteditable, to jest elementem, na którym można skupić się i będzie działać. Nie ma też znaczenia, w jaki sposób skupił się element. Można go kliknąć lub dotknąć, można było na niego przejść lub przejść do niego w inny sposób, a nawet skoncentrować się za pomocą JavaScript, na przykład…

document.querySelector("input").focus();

Wsparcie przeglądarki

Te dane dotyczące obsługi przeglądarek pochodzą od Caniuse, który zawiera więcej szczegółów. Liczba wskazuje, że przeglądarka obsługuje tę funkcję w tej wersji i nowszych.