პსევდოკლასი focus-within

პსევდოკლასი focus-within აძლევს სტილს ელემენტებს, რომლებიც ფოკუსში არიან. focus პსევდოკლასისგან განსხვავებით, რომელიც აძლევს სტილს პირდაპირ თავად ელემენტს, focus-within აძლევს სტილს მშობელ ელემენტს.

სინტაქსი

სელექტორი:focus-within {

}

მაგალითი

მოდით, მივანიჭოთ მშობელ ელემენტს ცისფერი ფონის ფერი, როდესაც მისი შვილობილი ელემენტი ინპუტი არის ფოკუსში:

<div>
	შეიყვანეთ თქვენი სახელი: <input name="user">
</div>

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

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

პსევდოკლასი :indeterminate,
რომელიც აძლევს სტილს გადამრთველებს, რომლებიც განუსაზღვრელ მდგომარეობაში არიან
პსევდოკლასი :default,
რომელიც აძლევს სტილს ელემენტებს ნაგულისხმევად
პსევდოკლასი :fullscreen,
რომელიც აძლევს სტილს ელემენტებს სრულეკრანულ რეჟიმში
პსევდოკლასი :placeholder-shown,
რომელიც აძლევს სტილს ელემენტებს, როდესაც ნაჩვენებია მინიშნების ტექსტი
თვისება caret-color,
რომელიც განსაზღვრავს ტექსტური კურსორის ფერს ინპუტში