CSS/Selektoren/Pseudoklasse/focus-within

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

Die Pseudoklasse focus-within selektiert ein Element, wenn

  • es selbst oder
  • eines seiner Nachfahren

den Fokus besitzt.

  • CSS 3.0
  • Leer
  • Firefox
  • Chrome
  • Safari
  • Opera

Details: caniuse.com

Beispiel ansehen …
fieldset:focus-within {
  border-color: #dfac20;
  background: #fffbf0;
}
fieldset:focus-within legend {
  color: black;
  background: white;
  border-bottom-color: #dfac20;
}
<fieldset>
  <legend>persönliche Daten</legend>
  <label>Name:
    <input placeholder="Mustermann">
  </label>
  <label>Vorname:
    <input placeholder="Max">
  </label>
</fieldset>
Erhält ein Nachfahrenelement des fieldsets den Fokus, so wird dieses Element und seine Überschrift verändert.

Damit ist in gewisser Weise eine Rückwärts-Selektion möglich.

Beachten Sie: focus-within selektiert ein Element, wenn irgendeins seiner Nachfahrenelemente den Fokus erhält. Es ist nicht möglich, das Elternelement in Abhängigkeit von einem bestimmten Nachfahrenelement zu selektieren.

siehe auch[Bearbeiten]