CSS संयोजक
- पिछला पृष्ठ CSS एलाइनमेंट
- अगला पृष्ठ सीएसएस उपकरण
CSS संयोजक
संयोजक चयनकर्ताओं के बीच संबंध को समझाने के लिए कुछ तरीके हैं।
CSS चयनकर्ता कई सरल चयनकर्ताओं को शामिल कर सकता है। सरल चयनकर्ताओं के बीच, हम एक संयोजक को शामिल कर सकते हैं।
CSS में चार अलग संयोजक हैं:
- प्रवाह चयनकर्ता (स्पेस)
- उप-चयनकर्ता (
>) - सहृदय बड़े चयनकर्ता (
+) - सामान्य बड़े चयनकर्ता (
~)
प्रवाह चयनकर्ता
प्रवाह चयनकर्ता सभी प्रवाह एलिमेंट को मेल होने का प्रयोग करता है।
नीचे का उदाहरण <div> एलिमेंट के भीतर सभी <p> एलिमेंट को चुनता है:
उदाहरण
div p {
background-color: yellow;
}
उप-चयनकर्ता
उप-चयनकर्ता समानक सभी उप-एलिमेंट को मेल होने का प्रयोग करता है।
नीचे का उदाहरण <div> एलिमेंट के उप-एलिमेंट के सभी <p> एलिमेंट को चुनता है:
उदाहरण
div > p {
background-color: yellow;
}
सहृदय बड़े चयनकर्ता
सहृदय बड़े चयनकर्ता सभी सहृदय समानक एलिमेंट को मेल होने का प्रयोग करता है।
बड़े (समानक) एलिमेंट को होना चाहिए, 'सहृदय' का अर्थ है 'बाद में'।
नीचे का उदाहरण <div> एलिमेंट के बाद के सभी <p> एलिमेंट को चुनता है:
उदाहरण
div + p {
background-color: yellow;
}
सामान्य बड़े चयनकर्ता
सामान्य बड़े चयनकर्ता समानक एलिमेंट के सभी एलिमेंट को मेल होने का प्रयोग करता है।
नीचे का उदाहरण <div> एलिमेंट के समानक एलिमेंट के सभी <p> एलिमेंट को चुनता है:
उदाहरण
div ~ p {
background-color: yellow;
}
सभी CSS संयोजन चयनकर्ता
| चयनकर्ता | उदाहरण | उदाहरण वर्णन |
|---|---|---|
| element element | div p | डिव एलिमेंट के भीतर सभी <p> एलिमेंट चुनें। |
| element>element | div > p | जिसका पैरेंट <div> एलेमेंट है वह सभी <p> एलेमेंट को चुनें। |
| element+element | div + p | जिसका पैरेंट <div> एलेमेंट है वह सभी <p> एलेमेंट को चुनें। |
| element1~element2 | p ~ ul | प्रत्येक <ul> एलेमेंट के पहले <p> एलेमेंट को चुनें जो <p> एलेमेंट है। |
अधिक वाचन
बाहरी पुस्तकःCSS डाउनर चयनक
बाहरी पुस्तकःCSS चाइल्ड चयनक
बाहरी पुस्तकःCSS निकटतम बंधु चयनक
- पिछला पृष्ठ CSS एलाइनमेंट
- अगला पृष्ठ सीएसएस उपकरण
