Die Pseudo-klas focus-within

Die pseudo-klas focus-within pas 'n styl toe op elemente wat in fokus is. In teenstelling met die pseudo-klas focus, wat die style direk op die element self toepas, pas focus-within 'n styl toe op die ouerelement.

Sintaksis

cssselektor:focus-within {

}

Voorbeeld

Laat ons 'n ligblou agtergrondkleur toeken aan die ouerelement wanneer sy kindelement (invoerveld) in fokus is:

html<div>
  Gee asseblief u naam: <input name="user">
</div>

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

Результат:

Sien ook