CSS-এ অ্যাডভান্সড সিলেক্টর হিসেবে অ্যাডজেসেন্ট সিবলিং (`+`), অ্যাট্রিবিউট (`[]`), ডায়রেক্ট চাইল্ড (`>`), nth-of-type, জেনারেল সিবলিং (`~`) ইত্যাদি আছে।
উদাহরণ: অ্যাডভান্সড সিলেক্টর
<html>
<head>
<style>
#red { color: red; }
.green { background: green; }
ul:nth-of-type(1) { background: rgb(0, 174, 255); }
ul + h3 { border: 4px solid rgb(19, 0, 128); }
a[href="https://www.wikipedia.org"] { font-size: 25px; }
h1 ~ h3 { font-size: 40px; }
div > span { background-color: DodgerBlue; }
</style>
</head>
<body>
<h1>অ্যাডভান্সড সিলেক্টর উদাহরণ</h1>
<ul><li>গরু</li><li>কুকুর</li><li>বিড়াল</li></ul>
<ul><li>পুমা</li><li>চিতাবাঘ</li><li>চিতা</li></ul>
<h3>প্রাণী</h3>
<div>
<span>টেক্সট নমুনা</span>
<p> প্যারাগ্রাফ টেক্সট <span>স্প্যান টেক্সট</span> </p>
<p class="green">প্যারাগ্রাফ টেক্সট</p>
<p id="red">প্যারাগ্রাফ টেক্সট.</p>
<p class="green">প্যারাগ্রাফ টেক্সট</p>
</div>
<a href="https://www.google.com">www.google.com</a>
<a href="https://www.wikipedia.org" target="_blank">www.wikipedia.org</a>
</body>
</html>
সিলেক্টর ব্যাখ্যা
- ul:nth-of-type(1): প্রথম ul এলিমেন্ট।
- ul + h3: ul-র সাথে যুক্ত (adjacent) h3।
- a[href="..."]: নির্দিষ্ট href ভ্যালুয়ালা লিংক।
- h1 ~ h3: h1-র পরের সব h3 (General sibling)।
- div > span: div-র ডায়রেক্ট চাইল্ড span (নाती নয়)।
অন্য অ্যাডভান্সড সিলেক্টর
:first-of-type, :last-of-type, :only-child, :empty, :target, :lang(), ::before, ::after, ::first-letter, ::first-line।
