პსევდოკლასი 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;
}

Результат:

იხილეთ აგრეთვე