CSS में एडवांस्ड सिलेक्टर्स में एडजेसेंट सिबलिंग सिलेक्टर, एट्रिब्यूट सिलेक्टर, डायरेक्ट चाइल्ड सिलेक्टर, nth-of-type सिलेक्टर आदि शामिल हैं। इसमें जनरल सिबलिंग सिलेक्टर भी शामिल है, एक उदाहरण नीचे दिखाया गया है:
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>आउटपुट
उपरोक्त कोड निम्न आउटपुट उत्पन्न करेगा -
