डाउनलोड पी.डी.एफ. ई-बुक्स
CSS - Pseudo Classes and Elements

selector:pseudo_class{}

  • :hover(Mouse Over to Change Color)
  • :checked - Checked to increase height and width
  • :invalid
  • :valid
  • :disabled
  • :empty
Click here to Get Source Code

CSS में Selector का इस्तेमाल colon(:) के साथ selector पर किया जाता है | Selector से CSS Content के लिए अलग-अलग state पर style दी जाती है |

For Example,
  • Elements पर mouse over करने पर style देना |
  • Elements पर mouse click करने पर style देना |
  • Link(<a>) के states के अनुसार style देना |

Link(<a>) related Selector Selector

Link Pseudo SelectorDescription
:linklink(<a>) को style दी जाती है | href attribute के साथ उसपर path होना जरुरी है | for eg. <a href="">Link</a>
:visitedvisited link का वर्णन किया जाता है | href attribute के साथ उसपर path होना जरुरी है | for eg. <a href="">Link</a>
:hoverLink पे mouse over का वर्णन किया जाता है |
:activeactivated link का वर्णन करता है | for eg, link पर mouse click hold करने पर active होता है |
:focusKeyboard navigation से link का वर्णन करता है | अगर Tab द्वारा या mouse click को hold किया जाता है तब link focus होता है | सामान्यतः इसका इस्तेमाल <input> element के लिए किया जाता है |
:targethref attribute पर दिए हुए # के साथ दिए हुए value के अनुसार match होनेवाले element के id attribute के value के साथ सम्बन्ध रखता है |

 

Example for link related Selector Selector

Example पर
:link - link का color शुरुआत में 'green' होगा |
:visited - link पे visit देने पर color 'red' होगा |
:hover - link पर mouse over करने पर background color 'blue' होगा |
:active - link पर click या mouse click hold करने पर font size '30px' होगी |
:focus - link पर click या mouse click hold करने पर या link Tab के जरिये हासिल करने पर background color 'yellow' होगा |

<style>
a:link{
 color : green;
 font-size : 20px;
}
a:visited{
 color : red;
}
a:hover{
 background-color : blue;
}
a:active{
 font-size : 30px;
}
a:focus{
 background-color : yellow;
}
</style>

<a href="#">Anchor Element</a>
Output :


Input(<input>) related Selector Selector

Input Pseudo SelectorDescription
:focus<input> element के focus होने पर style दी जाती है | User जब element पर click 'tab' button आ जाता तब इस state पर होता है |
:enabledform elements enabled होने का वर्णन करता है |
:disabledform elements disabled होने का वर्णन करता है | <input> element पर 'disabled' attribute होना जरुरी है |
:checked<input> element को checked किया जाता है तब ये triggered होता है | इसके लिए <input> element पर 'radio' या 'checkbox' इन values की जरुरत होती है |
:indeterminateindeterminate state का वर्णन किया जाता है | indeterminate Selector को Javascript द्वारा true value के साथ checkbox type के <input> element के लिए इस्तेमाल किया जाता है |
:in-range:out-of-range के विरुद्ध होता है | min और max attribute की मदद से दिए हुए range के लिए style दी जाती है |
:optional:required के विरुद्ध होता है | बिना required attribute के <input> element के लिए style दी जाती है |
:out-of-range:in-range के विरुद्ध होता है | min और max attribute की मदद से दिए हुए range के बाहर जाने पर style दी जाती है |
:read-only:read-write के विरुद्ध होता है | readonly attribute वाले <input> element के लिए style दी जाती है |
:read-writeread-only के विरुद्ध होता है | बिना readonly attribute के <input> element के लिए style दी जाती है |
:required:optional के विरुद्ध होता है | required attribute वाले <input> element के लिए style दी जाती है |
:placeholder-shownvalue के साथ दिए जानेवाले placeholder वाले form element को style दी जाती है |

 

Number-Based Selector Selector

Number-Based Pseudo SelectorDescription
:rootroot element(<html>) को style दी जाती है |
:first-childparent element के हर पहले child element को style दी जाती है |
:last-childparent element के हर आखिरी child element को style दी जाती है |
:nth-child(exp)expression के अनुसार parent element के हर child element को style दी जाती है | इससे बेहतर :nth-of-type है | इसके लिए Difference Between nth-child and nth-of-type देखे |
:nth-of-type(exp):nth-child जैसे होता है | expression के अनुसार parent element के हर child element को style दी जाती है | लेकिन ये :nth-child से बेहतर है | इसके लिए Difference Between nth-child and nth-of-type देखे |
:first-of-typeइसके साथ दिए जानेवाले element के first element को style दी जाती है | अगर <p> होता है तो document के first <p> के लिए style दी जाती है |
:last-of-typeइसके साथ दिए जानेवाले element के last element को style दी जाती है | अगर <p> होता है तो document के last <p> के लिए style दी जाती है |
:nth-last-of-type(exp)इसके साथ दिए जानेवाले element और expression के अनुसार, element के last element को style दी जाती है | अगर <p> होता है तो expression के अनुसार document के last <p> के लिए style दी जाती है |
:nth-last-child(exp):nth-child के जैसा होता है | लेकिन ये last से expression के अनुसार count करता है |
:only-of-typedissimilar parent element के हर single child element को style दी जाती है |

 

Relational Selector Selector

Relational Pseudo SelectorDescription
:emptyबिना child और textnode के element का वर्णन करता है |
:not(selector)not पर दिए गए selector(element) को style नहीं दी जाती है |

 

Other Selector Selector

Other Pseudo SelectorDescription
:lang(lang_code)दिए गए lang_code के अनुसार element के lang attribute का वर्णन करता है |

 

All Pseudo Element Selector

Pseudo Element SelectorDescription
::afterदिए गए element के बाद content को insert किया जाता है | अगर <p> element दिया जाता है तो उसके बाद content insert किया जाता है |
::beforeदिए गए element से पहले content को insert किया जाता है | अगर <p> element दिया जाता है तो उससे पहले content insert किया जाता है |
::first-letterदिए गए element के हर first letter को style दी जाती है |
::first-lineदिए गए element के हर first line को style दी जाती है |
::placeholder<input> element के placeholder attribute को style दी जाती है |