☚ लेसन के लिए यहाँ क्लिक करे ।

Lesson - 16

CSS : Combinators


यहाँ 4 प्रकार के कॉम्बिनेटर्स है

1. Descendant ( space )

2. child ( > )

3. adjacent sibling (+)

4. general sibling (~)




आइये उदाहरण से समझते है




Descendant Selector



HTML Code






CSS Code





Output





यहाँ Descendant Selector का उपयोग कर यह बताया है की div के अंदर जो p टैग है उसका बैकग्राउंड कलर येलो हो जाए





Example 2: Child selector



HTML Code






CSS Code





Output





यहाँ child Selector का उपयोग कर यह बताया है की div के अंदर जो p टैग है उसका बैकग्राउंड कलर येलो हो जाए

और उसी div में एक span टैग भी है और उस span टैग में p टैग है

इसलिए span के अंदर वाले p टैग का बैकग्राउंड कलर येलो नहीं हुआ




Example 3: Adjacent sibling selector



HTML Code






CSS Code





Output





यहाँ adjacent sibling selector का उपयोग कर यह बताया है की div के बाद जो सबसे नजदीक p टैग है उसका बैकग्राउंड कलर येलो हो जाए





Example 4: General sibling selector



HTML Code






CSS Code





Output





यहाँ general sibling selector का उपयोग कर यह बताया है की div के बाद जो भी p टैग है उसका बैकग्राउंड कलर येलो हो जाए