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

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

Σύνταξη

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

}

Παράδειγμα

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

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

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

Результат:

Δείτε επίσης