: tarkennusalue CSS-temppuja

:focus-withinPseudo valitsin CSS on vähän epätavallinen, vaikka hyvin nimetty ja melko intuitiivinen. Se valitsee elementin, jos siinä on lapsia, joilla on :focus.

form:focus-within ( background: lightyellow; )

Mikä toimii näin…

Sanoin "epätavallinen", koska CSS: ssä ei ole yleistä, että pystytään valitsemaan ylätason elementti alielementtien olemassaolon tai tilan perusteella. Toki on hyödyllinen!

Tässä on esimerkkilomake sen kokeilemiseksi:

Katso kynän yksinkertainen reagoiva lomake, jossa: focus-inside, kirjoittanut Chris Coyier (@chriscoyier) CodePenistä.

Huomaa, että esimerkki käyttää :focus-withinkoko lomaketta ja sisätilojen pakkaamista

Mikä tahansa tapa, jolla lapsielementti voi keskittyä, laukaisee: kohdistus-sisällä. Esimerkiksi, jos elementillä on tab-indextai contenteditableattribuutti, se on kohdistettava elementti ja se toimii. Sillä ei myöskään ole väliä kuinka elementti tarkentui. Sitä voitaisiin napsauttaa tai napauttaa, se olisi voitu napauttaa tai navigoida muilla tavoin tai jopa kohdistaa JavaScriptin kautta, kuten…

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

Selaimen tuki

Nämä selaintukitiedot ovat Caniuselta, jolla on tarkempia tietoja. Numero osoittaa, että selain tukee ominaisuutta kyseisessä versiossa tai uudemmassa.