পseudoclass focus-within

পseudoclass focus-within ফোকাসে থাকা উপাদানগুলির জন্য স্টাইল নির্ধারণ করে। পseudoclass focus এর থেকে ভিন্ন, যা সরাসরি উপাদানটিকেই স্টাইল করে, focus-within প্যারেন্ট উপাদানের জন্য স্টাইল নির্ধারণ করে।

সিনট্যাক্স

সিলেক্টর:focus-within {

}

উদাহরণ

আসুন আমরা প্যারেন্ট উপাদানের ব্যাকগ্রাউন্ডে নীল রং নির্ধারণ করি, যখন এর চাইল্ড উপাদান ইনপুট ফোকাসে থাকে:

<div>
	আপনার নাম লিখুন: <input name="user">
</div>

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

আরও দেখুন

পseudoclass :indeterminate,
যা অনির্দিষ্ট অবস্থায় থাকা টগলগুলির জন্য স্টাইল নির্ধারণ করে
পseudoclass :default,
যা ডিফল্ট উপাদানগুলির জন্য স্টাইল নির্ধারণ করে
পseudoclass :fullscreen,
যা ফুলস্ক্রিন মোডে থাকা উপাদানগুলির জন্য স্টাইল নির্ধারণ করে
পseudoclass :placeholder-shown,
যা প্লেসহোল্ডার টেক্সট প্রদর্শিত হলে উপাদানগুলির জন্য স্টাইল নির্ধারণ করে
প্রোপার্টি caret-color,
যা ইনপুটে টেক্সট কার্সারের রং নির্ধারণ করে