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
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 Selector | Description |
---|---|
:link | link(<a>) को style दी जाती है | href attribute के साथ उसपर path होना जरुरी है | for eg. <a href="">Link</a> |
:visited | visited link का वर्णन किया जाता है | href attribute के साथ उसपर path होना जरुरी है | for eg. <a href="">Link</a> |
:hover | Link पे mouse over का वर्णन किया जाता है | |
:active | activated link का वर्णन करता है | for eg, link पर mouse click hold करने पर active होता है | |
:focus | Keyboard navigation से link का वर्णन करता है | अगर Tab द्वारा या mouse click को hold किया जाता है तब link focus होता है | सामान्यतः इसका इस्तेमाल <input> element के लिए किया जाता है | |
:target | href 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' होगा |
Output :<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>
Input(<input>) related Selector Selector
Input Pseudo Selector | Description |
---|---|
:focus | <input> element के focus होने पर style दी जाती है | User जब element पर click 'tab' button आ जाता तब इस state पर होता है | |
:enabled | form elements enabled होने का वर्णन करता है | |
:disabled | form elements disabled होने का वर्णन करता है | <input> element पर 'disabled' attribute होना जरुरी है | |
:checked | <input> element को checked किया जाता है तब ये triggered होता है | इसके लिए <input> element पर 'radio' या 'checkbox' इन values की जरुरत होती है | |
:indeterminate | indeterminate 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-write | read-only के विरुद्ध होता है | बिना readonly attribute के <input> element के लिए style दी जाती है | |
:required | :optional के विरुद्ध होता है | required attribute वाले <input> element के लिए style दी जाती है | |
:placeholder-shown | value के साथ दिए जानेवाले placeholder वाले form element को style दी जाती है | |
Number-Based Selector Selector
Number-Based Pseudo Selector | Description |
---|---|
:root | root element(<html>) को style दी जाती है | |
:first-child | parent element के हर पहले child element को style दी जाती है | |
:last-child | parent 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-type | dissimilar parent element के हर single child element को style दी जाती है | |
Relational Selector Selector
Relational Pseudo Selector | Description |
---|---|
:empty | बिना child और textnode के element का वर्णन करता है | |
:not(selector) | not पर दिए गए selector(element) को style नहीं दी जाती है | |
Other Selector Selector
Other Pseudo Selector | Description |
---|---|
:lang(lang_code) | दिए गए lang_code के अनुसार element के lang attribute का वर्णन करता है | |
All Pseudo Element Selector
Pseudo Element Selector | Description |
---|---|
::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 दी जाती है | |