सीएसएस संयोजक
सीएसएस संयोजक
कॉम्बिनेटर एक ऐसी चीज है जो चयनकर्ताओं के बीच संबंधों की व्याख्या करती है।
एक CSS चयनकर्ता में एक से अधिक साधारण चयनकर्ता हो सकते हैं। साधारण चयनकर्ताओं के बीच, हम एक संयोजक शामिल कर सकते हैं।
CSS में चार अलग-अलग कॉम्बिनेटर हैं:
- वंशज चयनकर्ता (अंतरिक्ष)
- बाल चयनकर्ता (>)
- आसन्न भाई चयनकर्ता (+)
- सामान्य सहोदर चयनकर्ता (~)
वंशज चयनकर्ता
वंशज चयनकर्ता उन सभी तत्वों से मेल खाता है जो एक निर्दिष्ट तत्व के वंशज हैं।
निम्न उदाहरण <div> तत्वों के अंदर सभी <p> तत्वों का चयन करता है:
उदाहरण
div p {
background-color: yellow;
}
बाल चयनकर्ता (>)
बाल चयनकर्ता उन सभी तत्वों का चयन करता है जो एक निर्दिष्ट तत्व के बच्चे हैं।
निम्न उदाहरण उन सभी <p> तत्वों का चयन करता है जो <div> तत्व के बच्चे हैं:
उदाहरण
div > p {
background-color: yellow;
}
आसन्न सहोदर चयनकर्ता (+)
आसन्न भाई चयनकर्ता का उपयोग उस तत्व का चयन करने के लिए किया जाता है जो सीधे किसी अन्य विशिष्ट तत्व के बाद होता है।
सहोदर तत्वों में समान मूल तत्व होना चाहिए, और "आसन्न" का अर्थ है "तुरंत अनुसरण करना"।
निम्न उदाहरण पहले <p> तत्व का चयन करता है जो <div> तत्वों के तुरंत बाद रखा जाता है:
उदाहरण
div + p {
background-color: yellow;
}
सामान्य सहोदर चयनकर्ता (~)
सामान्य सहोदर चयनकर्ता उन सभी तत्वों का चयन करता है जो एक निर्दिष्ट तत्व के अगले भाई-बहन हैं।
निम्नलिखित उदाहरण उन सभी <p> तत्वों का चयन करता है जो <div> तत्वों के अगले भाई-बहन हैं:
उदाहरण
div ~ p {
background-color: yellow;
}
सभी सीएसएस कॉम्बिनेटर चयनकर्ता
| Selector | Example | Example description |
|---|---|---|
| element element | div p | Selects all <p> elements inside <div> elements |
| element>element | div > p | Selects all <p> elements where the parent is a <div> element |
| element+element | div + p | Selects the first <p> element that are placed immediately after <div> elements |
| element1~element2 | p ~ ul | Selects every <ul> element that are preceded by a <p> element |