সিএসএস-এ সন্নিহিত সিলেক্টর

সন্নিহিত সিলেক্টর + আপনাকে উপরের প্রতিবেশীর উপর ভিত্তি করে একটি উপাদান নির্বাচন করতে দেয়।

উদাহরণ

আসুন সমস্ত p ট্যাগকে লক্ষ্য করি, যেগুলো সরাসরি h2 ট্যাগের পরে অবস্থিত, এবং সেগুলোকে লাল রঙে রাঙানো যাক:

<h2>text</h2>
<p>
	+
</p>
<p>
	-
</p>
<p>
	-
</p>

h2 + p {
	color: red;
}

উদাহরণ

আসুন সমস্ত p ট্যাগকে লক্ষ্য করি, যেগুলো সরাসরি .test ক্লাস সহ উপাদানগুলির পরেই অবস্থিত, এবং সেগুলোকে লাল রঙে রাঙানো যাক:

<p class="test">
	text
</p>
<p>
	+
</p>
<p>
	-
</p>

.test + p {
	color: red;
}

উদাহরণ

আসুন .elem ক্লাস সহ সমস্ত উপাদানকে লক্ষ্য করি, যেগুলো সরাসরি .test ক্লাস সহ উপাদানগুলির পরেই অবস্থিত, এবং সেগুলোকে লাল রঙে রাঙানো যাক:

<p class="test">
	text
</p>
<p class="elem">
	+
</p>
<p>
	-
</p>

.test + .elem {
	color: red;
}

ব্যবহারিক সমস্যা

কোডটি দেওয়া হল:

<ul>
	<li>1</li>
	<li>2</li>
	<li>3</li>
	<li>4</li>
	<li id="elem">5</li>
	<li>6</li>
	<li>7</li>
	<li>8</li>
	<li>9</li>
</ul>

একটি সিলেক্টর লিখুন যা #elem উপাদানের ঠিক পরেই অবস্থিত উপাদানটি নির্বাচন করবে।

কোডটি দেওয়া হল:

<ul>
	<li>1</li>
	<li class="elem">2</li>
	<li>3</li>
	<li>4</li>
	<li class="elem">5</li>
	<li>6</li>
	<li>7</li>
	<li class="elem">8</li>
	<li>9</li>
</ul>

একটি সিলেক্টর লিখুন যা .elem উপাদানগুলির ঠিক পরেই অবস্থিত উপাদানগুলি নির্বাচন করবে।