ওয়েব ডিজাইনে CSS :child, :nth-child, :last-child ব্যবহার করে কিভাবে এলিমেন্ট নিয়ন্ত্রণ করা যায়? আসুন দেখে নেই! 
১. :first-child → প্রথম এলিমেন্ট নির্বাচন
p:first-child {
color: crimson;
}
প্রথম p ট্যাগ লাল হবে।
২. :last-child → শেষ এলিমেন্ট নির্বাচন
p:last-child {
color: royalblue;
}
শেষ p ট্যাগ নীল হবে।
৩. :nth-child(n) → নির্দিষ্ট এলিমেন্ট নির্বাচন
p:nth-child(2) {
color: limegreen;
}
দ্বিতীয় p ট্যাগ সবুজ হবে।
শর্টকাট:
odd→ বিজোড় সংখ্যা নির্বাচন →p:nth-child(odd) { color: goldenrod; }-
even→ জোড় সংখ্যা নির্বাচন →p:nth-child(even) { color: tomato; } -
3n→ প্রতি ৩টি ইলিমেন্ট নির্বাচন →p:nth-child(3n) { color: teal; }
৪. :nth-last-child(n) → শেষ দিক থেকে নির্দিষ্ট এলিমেন্ট নির্বাচন
p:nth-last-child(2) {
color: orchid;
}
শেষ থেকে দ্বিতীয় p ট্যাগ বেগুনি হবে।
প্র্যাকটিক্যাল কোড (কপি করে দেখুন! )
<ul>
<li>☝️ Item 1</li>
<li>☝️ Item 2</li>
<li>☝️ Item 3</li>
<li>☝️ Item 4</li>
<li>☝️ Item 5</li>
</ul>
<style>
li:first-child { color: crimson; } /* প্রথম আইটেম লাল */
li:last-child { color: royalblue; } /* শেষ আইটেম নীল */
li:nth-child(odd) { color: goldenrod; } /* বিজোড় আইটেম গোল্ডেন */
li:nth-child(even) { color: tomato; } /* জোড় আইটেম টমেটো */
</style>
CSS দিয়ে ওয়েব ডিজাইন করা এত সহজ? 
আপনার মতামত জানান! 