CSS-এর অ্যাডভান্সড সিলেক্টরগুলির মধ্যে রয়েছে অ্যাডজাসেন্ট সিব্লিং সিলেক্টর, অ্যাট্রিবিউট সিলেক্টর, ডাইরেক্ট চাইল্ড সিলেক্টর, এনথ-অফ-টাইপ সিলেক্টর ইত্যাদি। এতে সাধারণ ভাইবোন সিলেক্টরও রয়েছে, একটি উদাহরণ নিচে দেখানো হল:
h1 ~ h3
সরাসরি শিশু নির্বাচক -
এর উদাহরণdiv > span
CSS -
-এ উন্নত নির্বাচকদের দেখানো কোড নিচে দেওয়া হলউদাহরণ
<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>Advanced Selectors Example</h1>
<ul>
<li>Cow</li>
<li>Dog</li>
<li>Cat</li>
</ul>
<ul>
<li>Puma</li>
<li>Leopard</li>
<li>Cheetah</li>
</ul>
<h3>Animals</h3>
<div>
<span>Text sample</span>
<p>
Paragraph Text
<span>span text</span>
</p>
<p class="green">Paragraph Text</p>
<p id="red">Paragraph Text.</p>
<p class="green">Paragraph Text</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> আউটপুট
উপরের কোডটি নিম্নলিখিত আউটপুট −
তৈরি করবে
