Attribute & nth child pseudo Selectors Free web Tutorials #32
Attribute & nth child pseudo Selectors
पिछले ट्यूटोरियल में, हमने CSS में विभिन्न छद्म चयनकर्ताओं पर चर्चा की है। यहां, हम कुछ और उन्नत छद्म चयनकर्ताओं को सीखने जा रहे हैं जो वेब विकास में बहुत लाभान्वित होंगे। हम tut32.html के रूप में एक नई फाइल बनाकर शुरू करेंगे और मूल टेम्पलेट जोड़ देंगे। एक विशेषता के रूप में शीर्षक दें और <शीर्षक> टैग में nth-child छद्म चयनकर्ता दें।
हम नीचे दिए गए HTML कोड को लिखकर एक बहुत ही बेसिक फॉर्म बनाएंगे-
<body>
<div class="container">
<h1><a href="http://google.com" target="_blank">Go to google</a></h1>
<h1><a href="http://facebook.com" target="_self">Go to Facebook</a></h1>
<form action="" class="form-control">
<input type="text" placeholder="Enter your name">
<input type="email" placeholder="Enter your email">
<input type="password" placeholder="Enter your password">
<input type="submit" value="Submit">
</form>
<ul>
<li class="item" id="item-1">Item1</li>
<li class="item" id="item-2">Item2</li>
<li class="item" id="item-3">Item3</li>
<li class="item" id="item-4">Item4</li>
<li class="item" id="item-5">Item5</li>
<li class="item" id="item-6">Item6</li>
<li class="item" id="item-7">Item7</li>
<li class="item" id="item-8">Item8</li>
<li class="item" id="item-9">Item9</li>
<li class="item" id="item-10">Item10</li>
</ul>
</div>
</body>
फ़ॉर्म निम्नानुसार बहुत सरल दिखाई देगा:
अब हम अपना स्टाइलिंग पार्ट शुरू करेंगे। प्रारंभ में, हम इनपुट के प्रदर्शन को ब्लॉक के रूप में सेट करते हैं-
input {
display: block;
}
फिर हम निम्नलिखित कोड द्वारा कंटेनर को वेबपेज के केंद्र में ले जाने का प्रयास करेंगे।
.container {
display: block;
width: 233px;
margin: auto;
}
केवल टेक्स्ट टाइप के इनपुट का चयन करने के लिए, हम निम्नलिखित कोड लिखेंगे-
input[type='text'] {
padding: 23px;
border: 2px solid red;
}
उपरोक्त कोड द्वारा, परिवर्तन केवल टाइप टेक्स्ट वाले इनपुट फॉर्म में किए जाएंगे।
छद्म चयनकर्ताओं की मदद से, हम विभिन्न गुणों को उनकी विशेषताओं के आधार पर लक्षित कर सकते हैं। इसी तरह अगर हम अपने ईमेल टैब को टारगेट करना चाहते हैं तो हम कोड इस प्रकार लिख सकते हैं और उस पर कुछ प्रॉपर्टी लगा सकते हैं-
input[type='email'] {
color: yellow;
border: 4px solid black;
}
हम उस पर लागू कई अन्य गुणों के साथ काली सीमा को देखेंगे। इसी तरह हम और भी properties या tags को target कर सकते हैं।
अब देखते हैं कि nth चाइल्ड छद्म चयनकर्ताओं का उपयोग कैसे किया जाता है। मान लीजिए, अगर हम लिखते हैं-
li:nth-child(3){
color: cyan;
}
उपरोक्त कोड टेक्स्ट के रंग को केवल तीसरे के सियान में बदल देगा। क्या होगा अगर हम सूची के हर तीसरे तत्व के टेक्स्ट रंग को लाल रंग में बदलना चाहते हैं। ऐसी स्थिति में हम लिख सकते हैं-
li:nth-child(3n+3) {
color: red;
}
यह मुट्ठी में हर तीसरे तत्व के टेक्स्ट रंग को लाल रंग में बदल देगा।
यह मूल सूत्र पर काम करता है जहां यह 0 से शुरू होने वाले n के मानों के आधार पर सभी वस्तुओं को परिवर्तित कर देगा। उसी तरह, हम सूची में सभी सम वस्तुओं का चयन कर सकते हैं और इसमें कुछ सीएसएस लागू कर सकते हैं।
li:nth-child(even) {
background-color: yellow;
}
आप विभिन्न कोडों के साथ अभ्यास करके स्वयं को और अधिक प्रयास कर सकते हैं और तदनुसार परिवर्तनों का विश्लेषण कर सकते हैं। अधिक सीखते रहने के लिए, ट्यूटोरियल के साथ बने रहें।
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>Attribute and nth child pseudo selectors</title>
<style>
.container {
display: block;
width: 233px;
margin: auto;
}
input {
display: block;
}
input[type='text'] {
padding: 23px;
border: 2px solid red;
}
a[target] {
font-size: 44px;
color: violet;
}
a[target='_self'] {
font-size: 14px;
color: rgb(13, 22, 151);
}
input[type='email'] {
color: yellow;
border: 4px solid black;
}
/* This will apply css for third child */
/* li:nth-child(3){
color: cyan;
}
li:nth-child(2n+0){
color: red;
} */
li:nth-child(3n+3) {
color: red;
}
/* Odd child */
/* li:nth-child(odd){
background-color: yellow;
} */
/* Even child */
li:nth-child(even) {
background-color: yellow;
}
</style>
</head>
<body>
<div class="container">
<h1><a href="http://google.com" target="_blank">Go to google</a></h1>
<h1><a href="http://facebook.com" target="_self">Go to Facebook</a></h1>
<form action="" class="form-control">
<input type="text" placeholder="Enter your name">
<input type="email" placeholder="Enter your email">
<input type="password" placeholder="Enter your password">
<input type="submit" value="Submit">
</form>
<ul>
<li class="item" id="item-1">Item1</li>
<li class="item" id="item-2">Item2</li>
<li class="item" id="item-3">Item3</li>
<li class="item" id="item-4">Item4</li>
<li class="item" id="item-5">Item5</li>
<li class="item" id="item-6">Item6</li>
<li class="item" id="item-7">Item7</li>
<li class="item" id="item-8">Item8</li>
<li class="item" id="item-9">Item9</li>
<li class="item" id="item-10">Item10</li>
</ul>
</div>
</body>
</html>
