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' होगा |
<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 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 दी जाती है | |