CSS Selectors In Hindi Part 2 | Pseudo class और Pseudo elements

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

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

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 हो

अगर इससे भी आसान भाषा में बात करें तो जैसे की हम किसी लिंक पर या बटन पर mouse ले जाते हैं या फिर cursor ले जाते हैं तो उस लिंक का color या background change होता है तो ये सब hover पर होता है तो इस प्रकार की अगर style करनी हो तो हम pseudo class selector की सहायता से कर सकते हैं जिसका सूत्र आप नीचे देख सकते हैं |

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 है |

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

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

Css Selectors In Hindi Conclusion

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

धन्यवाद