CSS Selectors In Hindi Part 2

CSS Selectors क्या होते हैं और कैसे काम करते हैं इतना तो हमने पिछले आर्टिकल CSS Selectors In Hindi Part-1 में सिख लिया था और कुछ selectors के उदहारण भी देखे थे लेकिन कुछ और selectors हैं जो अभी बाकि हैं उनके बारे में आज हम पढ़ेंगे |

दोस्तों पिछले आर्टिकल में हमनें Combinator selectors तक पढ़ा था तो अब हम आगे बढ़ते हैं, आगे बढनें से पहले आपको CSS Selectors In Hindi के part-1 को पढना चाहिए | CSS Selectors In Hindi Part 1

css selectors in hindi

Pseudo-class selectors

Pseudo-class selectors का use किसी special elements की activity पर style करनें के लिए किया जाता है अब आप सोच रहे होंगें की special activity कैसे होती होगी किसी भी html element की, तो कुछ condition में ये activity होती हैं जैसे की –

  1. यूजर किसी element पर mouse ले जाये
  2. Style visited और unvisited links differently
  3. जब किसी Element पर Focus हो

Syntax – selector:pseudo-class{property: value;}

<a href="#" target="_blank">Web Tutorial Hindi</a>
<input type="text" name="" placeholder="input">

pesudo class selector की CSS कुछ इस प्रकार से होगी |

a{
    padding: 15px 30px;
    border: 2px solid #000;
    border-radius: 10px;
    color: #000;
    transition: .3s linear;
    text-decoration: none;
}
/* mouse over link */
a:hover{
    background: blue;
    border-color: blue;
    color: #fff;
}
/* selected link */
a:active{
    background: red;
    color: #fff;
    border-color: red;
}
input:focus{
    background: #f7f7f7;
    border: 1px solid #000;
}

उम्मीद है उदहारण आपको समझ आया होगा |

Pseudo-elements selectors

दोस्तों Pseudo-class से हम किसी element की special activity पर CSS कर सकते हैं लेकिन Pseudo-elements से हम किसी html element के special part पर CSS कर सकते हैं या किसी element के आगे दूसरा element जोड़ सकते हैं या जैसे किसी element की first line पर और first line के first letter पर CSS कर सकते हैं आदि |

काफी सारे Pseudo-elements हैं इनमें से कुछ के उदहारण दे रहा हूँ बाकियों का आप खुद से try करें बेहतर होगा |

<div class="first-letter">
    <p>First Letter Example</p>
</div>
<div class="first-line">
    <p>This is a paragraph 1</p>
</div>
<div class="before-element">
    <p>This is a paragraph 2</p>
</div>
<div class="after-element">
    <p>This is a paragraph 3</p>
</div>
<ul>
    <li>1 list</li>
    <li>2 list</li>
    <li>3 list</li>
    <li>4 list</li>
</ul>

इसकी CSS कुछ इस प्रकार से होगी |

p{
    max-width: 50%;
    margin: auto;
    margin-bottom: 20px;
}
.first-letter p:first-letter{
    font-size: 40px;
    color: green;
    font-weight: 700;
}
.first-line p:first-line{
    color: red;
    font-weight: 700;
}
.before-element p::before{
    content: "Before";
    font-size: 30px;
}
.after-element p::after{
    content: "After";
    font-size: 30px;
}
li{
    list-style: none;
    font-size: 20px;
    font-weight: 700;
}
li:first-child{
    color: red;
}
li:nth-child(2){
    color: blue;
}
li:nth-child(3){
    color: orange;
}
li:last-child{
    color: blueviolet;
}

CSS Selectors In Hindi में अब हम देख लेते हैं की और कोन कोनसे pesudo elements हैं |

All CSS Pseudo Classes And Element

आप github पर भी check कर सकते हैं जो की official website है |

Selectorउदहारण
:activea:active
:checkedinput:checked
:disabledinput:disabled
:emptyp:empty
:enabledinput:enabled
:first-childli:first-child
:first-of-typep:first-of-type
:focusinput:focus
:hovera:hover
:in-rangeinput:in-range
:invalidinput:invalid
:lang(language)p:lang(it)
:last-childli:last-child
:last-of-typep:last-of-type
:linka:link
:nth-child(n)p:nth-child(2)
:nth-last-child(n)p:nth-last-child(2)
:not(selector):not(p)
:nth-last-of-type(n)p:nth-last-of-type(2)
:nth-of-type(n)p:nth-of-type(2)
:only-of-typep:only-of-type
:only-childp:only-child
:optionalinput:optional
:out-of-rangeinput:out-of-range
:read-onlyinput:read-only
:read-writeinput:read-write
:requiredinput:required
:rootroot
:target#news:target
:validinput:valid
:visiteda:visited

CSS selectors in hindi में आगे हम जान लेते हैं CSS Attribute Selectors के बारे में

CSS Attribute Selectors

CSS Attribute Selectors से भी हम html के Specific element पर style apply कर सकते हैं |

<form>
    <input type="text" name="" placeholder="Text"><br><br>
    <input type="email" name="" placeholder="Email"><br><br>
    <input type="password" name="" placeholder="Password"><br><br>
    <button type="submit">Submit</button>
</form>

Attribute Selectors की CSS कुछ इस प्रकार से करनी होगी |

input{
    height: 50px;
    width: 100%;
    padding-left: 30px;
}
input[type=email]{
    margin-left: 20px;
}
input[type=password]{
    margin-left: 40px;
}

All CSS Attribute Selectors

Selectorउदहारण
[attribute][target]
[attribute=value][target=_blank]
[attribute~=value][title~=flower]
[attribute|=value][lang|=en]
[attribute^=value]a[href^=”https”]
[attribute$=value]a[href$=”.pdf”]
[attribute*=value]a[href*=”webtutorialhindi”]

css selectors in hindi के part -1 और css selectors in hindi के part -2 दोनों में मैंने कोशिस की है आपको सरल भाषा में समझानें की और काफी सारे selectors cover किए हैं अगर फिर भी कोई selector आपके ध्यान में है तो आप मुझे comment कर सकते हैं |

Q – Four CSS selectors ?

Ans – दोस्तों CSS selector CSS का दिल होता है selector के बिना CSS कर पाना मुस्किल होता है इसलिए CSS सिखनें से पहले CSS selector का ज्ञान होना ज़रूरी है |

1. Simple selectors
2. Combinator selectors
3. Pseudo-class selectors
4. Pseudo-elements selectors

Q – CSS क्या है ?

Ans – CSS (Cascading Style Sheets) एक भाषा है जो किसी भी webpage को सुन्दरता प्रदान करने का काम करती है | सरल शब्दों में, इसका उपयोग वेब पेजों के layout को style और व्यवस्थित करने के लिए किया जाता है। CSS-3 पुराने CSS-2 का latest version है।

Q – CSS 3 में क्या है ?

Ans – Current टाइम में CSS का CSS3 version चल रहा है और CS3 में काफी बदलाव किए गए हैं | अगर बदलाव की बात करें तो काफी property नई add की गई हैं और css2 की प्रॉपर्टी में भी सुधार किया गया है |

दोस्तों CSS3 एक Cascading Style Sheets का नया version है जिसका एक ही मक़सद है CSS-2.1 को extend करना और ऐसा ही किया गया है CSS-3 में |

CSS-3 में कई नए-नए feature आए हैं जैसे की rounded corners, shadows, gradients, transitions ओर animations जैसे features.

Css Selectors In Hindi Conclusion

उम्मीद है दोस्तों css selectors in hindi के part-2 से आपकी help हुई होगी और आपको ये आर्टिकल helpful लगा होगा अगर आपने कुछ knolagebal पढ़ा है तो आप अपने दोस्तों के साथ share कर सकते हैं और ताज़ा update पानें के लिए आप मुझे social media पर भी follow कर सकते हैं |

धन्यवाद

Leave a Comment