Pseudoklassen focus-within

Pseudoklassen focus-within angiver styling for elementer, der er i fokus. I modsætning til pseudoklassen focus, som angiver styling direkte på selve elementet, angiver focus-within styling for forældreelementet.

Syntaks

selektor:focus-within {

}

Eksempel

Lad os angive en lyseblå baggrundsfarve for forældreelementet, når dets underordnede input-element er i fokus:

<div>
	Indtast dit navn: <input name="user">
</div>

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

Se også

pseudoklassen :indeterminate,
som angiver styling for afkrydsningsfelter, der er i et ubestemt tilstand
pseudoklassen :default,
som angiver styling for standardelementer
pseudoklassen :fullscreen,
som angiver styling for elementer i fuldskærmstilstand
pseudoklassen :placeholder-shown,
som angiver styling for elementer, når pladsholderteksten vises
egenskaben caret-color,
som angiver farven på tekstmarkøren i et inputfelt