More on CSS Selectors Free web Tutorials #31
More on CSS Selectors
हमारे पिछले वीडियो में, हमने पहले ही CSS चयनकर्ताओं की मूल बातें कवर कर ली हैं। इस ट्यूटोरियल में, हम CSS चयनकर्ताओं के बारे में कुछ उन्नत अवधारणाओं पर चर्चा करेंगे।
सबसे पहले, हमने कुछ डिव और पैराग्राफ टैग को डिजाइन करने के लिए नीचे दिए गए CSS का उपयोग किया है।
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Advanced CSS Selectors</title>
<style>
h1 {
background-color: red;
color: black;
font-weight: bold;
text-align: center;
}
div p {
color: rgb(0, 0, 128);
background-color: orange;
font-weight: bold;
}
</style>
</head>
<body>
<h1> This is more on selectors</h1>
<div class="container">
<div class="row">
<p> This is a paragraph</p>
</div>
<p> This is another paragraph</p>
</div>
<p> This is the third paragraph</p>
</body>
</html>
आउटपुट:
अब, मान लीजिए कि आप डिव के अंदर के सभी पैराग्राफों में स्टाइल जोड़ना चाहते हैं। आप क्या करेंगे? आप निम्नलिखित सीएसएस का उपयोग कर सकते हैं:
div p{
color: rgb(0, 0, 128);
background-color:orange;
font-weight: bold;
}
यहाँ परिणाम हैं:
ऊपर की छवि में, आप देख सकते हैं कि सीएसएस दो पैराग्राफ पर लागू होता है, लेकिन यह तीसरे पैराग्राफ पर लागू नहीं होता है। क्यों? आइए मैं आपके लिए इस सरल प्रश्न का उत्तर देता हूं। CSS को तीसरे पैराग्राफ पर लागू नहीं किया गया है क्योंकि हमने CSS को केवल div के अंदर <p> टैग पर लागू किया है, और तीसरा पैराग्राफ एक div एलिमेंट के अंदर नहीं है।
ये बहुत आसान था. अब अगली स्थिति पर चलते हैं। यदि आप <p> टैग को लक्षित करना चाहते हैं, जो div के सीधे बच्चे हैं, तो आप क्या करेंगे? इसलिए, जब भी हम प्रत्यक्ष बाल तत्व को लक्षित करना चाहते हैं, तो हम निम्नलिखित सिंटैक्स का उपयोग करते हैं:
element> element;
उदाहरण :
div>p
उपरोक्त उदाहरण में, स्टाइल उन सभी <p> तत्वों पर लागू किया जाएगा जो किसी भी div तत्व के प्रत्यक्ष बच्चे हैं। आइए इस ट्यूटोरियल की शुरुआत में बनाए गए पैराग्राफ टैग्स की मदद से इसे समझते हैं। यहां इस्तेमाल किया गया सीएसएस है:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Advanced CSS Selectors</title>
<style>
h1 {
background-color: red;
color: black;
font-weight: bold;
text-align: center;
}
div p {
color: rgb(0, 0, 128);
background-color: orange;
font-weight: bold;
}
div>p{
background-color: lightblue;
color:white;
}
</style>
</head>
<body>
<h1> This is more on selectors</h1>
<div class="container">
<div class="row">
<ul>
<li class="item">
<p>This is a paragraph inside li and this is not a direct child of div. It will not get affected.</p>
</li>
</ul>
<p> This is the second paragraph and it will get affected because it is the direct child of div.</p>
</div>
<p> This is the third pargraph and it will get affected because it is also a direct child</p>
</div>
<p> This is the outer most paragraph and it will not get affected. </p>
</body>
</html>
यहाँ परिणाम हैं:
उपरोक्त छवि में, आप देख सकते हैं कि सीएसएस दूसरे और तीसरे पैराग्राफ पर लागू होता है क्योंकि वे div के प्रत्यक्ष बच्चे हैं। <li> के अंदर का पैराग्राफ <li> का सीधा बच्चा है न कि <div> का। साथ ही, सबसे बाहरी अनुच्छेद के मामले में, मूल तत्व शरीर है न कि div; इसलिए, इस पर कोई स्टाइल लागू नहीं किया जाता है। अब, हम एक और प्रकार के CSS चयनकर्ताओं के बारे में बात करेंगे, अर्थात, div+p।
डिव + पी:
ऐसी स्थितियां हो सकती हैं जहां आप <p> टैग का चयन करना चाहें जो <div> तत्वों के तुरंत बाद हों। ऐसे मामलों में, हम div+p चयनकर्ताओं का उपयोग करते हैं। आइए इसे नीचे दिए गए उदाहरण की मदद से समझते हैं:
एचटीएमएल और सीएसएस का इस्तेमाल किया:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Advanced CSS Selectors</title>
<style>
h1 {
background-color: red;
color: black;
font-weight: bold;
text-align: center;
}
/* div p {
color: rgb(0, 0, 128);
background-color: orange;
font-weight: bold;
} */
/* div>p{
background-color: lightblue;
color:white;
} */
div+p{
color: white;
background-color:#D2302C;
}
</style>
</head>
<body>
<h1> This is more on selectors</h1>
<div class="container">
<div class="row">
<ul>
<li class="item">
<p>This is a paragraph and it is not immediately after the div element so no CSS will be applied to it.</p>
</li>
</ul>
<p> This is the second paragraph and it is not immediately after the div element so no CSS will be applied to it.</p>
</div>
<p> This is the third pargraph and it will get affected because it is immediately afetr the div tag.</p>
</div>
<p> This is the outer most paragraph and it will also get affected because it is immediately after the div tag. </p>
</body>
</html>
आउटपुट:
ऊपर की छवि में, आप देख सकते हैं कि CSS केवल तीसरे और सबसे बाहरी पैराग्राफ पर लागू होता है क्योंकि वे <div> तत्व के बगल में हैं।
यह सब इस ट्यूटोरियल के लिए है, और अगले ट्यूटोरियल में, हम nth-child छद्म चयनकर्ताओं पर चर्चा करेंगे। अगले ट्यूटोरियल में मिलते हैं!
Code:-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>More on selectors</title>
</head>
<style>
h1{
background-color: red;
color: black;
font-weight: bold;
text-align: center;
}
/* if p is contained by any li which is contained by div */
/* div li p{
color: yellow;
background-color: green;
font-weight: bold;
} */
/* if p is right inside div then this CSS will be applied */
/* div > p{
color: yellow;
background-color: green;
font-weight: bold;
} */
/* if p is right after div i.e p is the next sibling of div*/
/* div + p{
color: white;
background-color: rgb(238, 137, 137);
} */
</style>
<body>
<h1>This is more on selectors</h1>
<div class="container">
<div class="row">
<ul>
<li class="item"><p> this is another paragraph inside li</p></li>
<li>this will not get affected</li>
<p>this is a para inside ul</p>
</ul>
<p>This is a paragraph</p>
</div>
<p>This is another paragraph</p>
</div>
<p>this is outermost paragraph</p>
</body>
</html>
