A focus-within pszeudoosztály

A focus-within pszeudoosztály stílust határoz meg azoknak az elemeknek, amelyek fókuszban vannak. A focus pszeudoosztálytól eltérően, amely közvetlenül magának az elemnek határozza meg a stílusát, a focus-within a szülőelem stílusát határozza meg.

Szintaxis

cssszelektor:focus-within {

}

Példa

Állítsuk be a szülőelem háttérszínét világoskékre, amikor annak gyermek input eleme fókuszban van:

html<div>
  Adja meg a nevét: <input name="user">
</div>

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

Результат:

Lásd még