Ο ψευδο-κλάσος focus-within

Ο ψευδο-κλάσος focus-within ορίζει στυλ για στοιχεία που βρίσκονται σε εστίαση. Σε αντίθεση με τον ψευδο-κλάσο focus, που ορίζει στυλ απευθείας στο ίδιο το στοιχείο, ο focus-within ορίζει στυλ για το γονικό στοιχείο.

Σύνταξη

επιλογέας:focus-within {

}

Παράδειγμα

Ας ορίσουμε μπλε χρώμα φόντου για το γονικό στοιχείο, όταν το θυγατρικό του στοιχείο εισόδου βρίσκεται σε εστίαση:

<div>
	Εισάγετε το όνομά σας: <input name="user">
</div>

div {
	width: 300px;
	height: 50px;
	padding: 10px;
}
div:focus-within {
	background-color: #C2DDFD;
}

Δείτε επίσης

ο ψευδο-κλάσος :indeterminate,
που ορίζει στυλ για διακόπτες που βρίσκονται σε απροσδιόριστη κατάσταση
ο ψευδο-κλάσος :default,
που ορίζει στυλ για στοιχεία by default
ο ψευδο-κλάσος :fullscreen,
που ορίζει στυλ για στοιχεία σε λειτουργία πλήρους οθόνης
ο ψευδο-κλάσος :placeholder-shown,
που ορίζει στυλ για στοιχεία όταν εμφανίζεται κείμενο-υπόδειξη
η ιδιότητα caret-color,
που ορίζει χρώμα για το κέρσορα κειμένου στο πεδίο εισόδου