: εστίαση εντός - CSS-Κόλπα

Ο :focus-withinψευδοεπιλογέας στο CSS είναι λίγο ασυνήθιστος, αν και καλά ονομασμένος και μάλλον διαισθητικός. Επιλέγει ένα στοιχείο εάν αυτό το στοιχείο περιέχει παιδιά που έχουν :focus.

form:focus-within ( background: lightyellow; )

Που λειτουργεί έτσι ...

Είπα "ασυνήθιστο" επειδή δεν είναι συνηθισμένο στο CSS να μπορείς να επιλέξεις ένα γονικό στοιχείο με βάση την ύπαρξη ή την κατάσταση των θυγατρικών στοιχείων. Σίγουρα όμως είναι χρήσιμο!

Ακολουθεί ένα παράδειγμα φόρμας για να το δοκιμάσετε:

Δείτε τη φόρμα απλής απάντησης στυλό με: εστίαση-μέσα από τον Chris Coyier (@chriscoyier) στο CodePen.

Σημειώστε ότι το παράδειγμα χρησιμοποιείται :focus-withinσε ολόκληρη τη φόρμα και σε εσωτερική εισαγωγή-αναδίπλωση

μικρό.

Οποιοσδήποτε τρόπος μπορεί να γίνει εστίαση ενός παιδικού στοιχείου θα προκαλέσει: εστίαση-μέσα. Για παράδειγμα, εάν ένα στοιχείο έχει ένα tab-indexή contenteditableχαρακτηριστικό, τότε είναι ένα στοιχείο με δυνατότητα εστίασης και θα λειτουργήσει. Επίσης, δεν έχει σημασία πώς επικεντρώθηκε το στοιχείο. Θα μπορούσε να κάνει κλικ ή να αγγίξει, θα μπορούσε να έχει καρτέλες ή να πλοηγηθεί σε κάποιο άλλο μέσο ή ακόμη και να εστιάσει μέσω JavaScript, όπως…

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

Υποστήριξη προγράμματος περιήγησης

Αυτά τα δεδομένα υποστήριξης του προγράμματος περιήγησης προέρχονται από την Caniuse, η οποία έχει περισσότερες λεπτομέρειες. Ένας αριθμός υποδεικνύει ότι το πρόγραμμα περιήγησης υποστηρίζει τη λειτουργία σε αυτήν την έκδοση και νεότερη.