सीएसएस छद्म तत्व
छद्म तत्व क्या हैं?
एक CSS छद्म तत्व का उपयोग किसी तत्व के निर्दिष्ट भागों को स्टाइल करने के लिए किया जाता है।
उदाहरण के लिए, इसका उपयोग किया जा सकता है:
- किसी तत्व के पहले अक्षर या पंक्ति को स्टाइल करें
- किसी तत्व की सामग्री से पहले या बाद में सामग्री डालें
वाक्य - विन्यास
छद्म तत्वों का सिंटैक्स:
selector::pseudo-element {
property: value;
}
::पहली पंक्ति छद्म-तत्व
पाठ की ::first-lineपहली पंक्ति में एक विशेष शैली जोड़ने के लिए छद्म तत्व का उपयोग किया जाता है।
निम्न उदाहरण सभी <p> तत्वों में टेक्स्ट की पहली पंक्ति को प्रारूपित करता है:
उदाहरण
p::first-line
{
color: #ff0000;
font-variant: small-caps;
}
नोट: छद्म ::first-lineतत्व केवल ब्लॉक-स्तरीय तत्वों पर लागू किया जा सकता है।
निम्नलिखित गुण ::first-line
छद्म तत्व पर लागू होते हैं:
- फ़ॉन्ट गुण
- रंग गुण
- पृष्ठभूमि गुण
- शब्द अंतराल
- पत्र अंतराल
- text-decoration
- ऊर्ध्वाधर- align
- पाठ बदलना
- ऊंची लाईन
- स्पष्ट
डबल कोलन नोटेशन पर ध्यान दें - ::first-line बनाम
:first-line
डबल कोलन ने CSS3 में छद्म तत्वों के लिए सिंगल-कोलन नोटेशन को बदल दिया। यह W3C की ओर से छद्म वर्गों
और छद्म तत्वों के बीच अंतर करने का एक प्रयास था ।
CSS2 और CSS1 में छद्म-वर्गों और छद्म-तत्वों दोनों के लिए सिंगल-कोलन सिंटैक्स का उपयोग किया गया था।
पश्चगामी संगतता के लिए, CSS2 और CSS1 छद्म तत्वों के लिए सिंगल-कोलन सिंटैक्स स्वीकार्य है।
::पहला अक्षर छद्म तत्व
::first-letterपाठ के पहले अक्षर में एक विशेष शैली जोड़ने के लिए छद्म तत्व का उपयोग किया जाता है ।
निम्न उदाहरण सभी <p> तत्वों में टेक्स्ट के पहले अक्षर को प्रारूपित करता है:
उदाहरण
p::first-letter
{
color: #ff0000;
font-size: xx-large;
}
नोट: छद्म ::first-letterतत्व केवल ब्लॉक-स्तरीय तत्वों पर लागू किया जा सकता है।
निम्नलिखित गुण :: प्रथम-अक्षर छद्म-तत्व पर लागू होते हैं:
- फ़ॉन्ट गुण
- रंग गुण
- पृष्ठभूमि गुण
- मार्जिन गुण
- पैडिंग गुण
- सीमा गुण
- text-decoration
- लंबवत-संरेखण (केवल अगर "फ्लोट" "कोई नहीं" है)
- पाठ बदलना
- ऊंची लाईन
- पानी पर तैरना
- स्पष्ट
छद्म तत्व और HTML वर्ग
छद्म तत्वों को HTML वर्गों के साथ जोड़ा जा सकता है:
उदाहरण
p.intro::first-letter {
color: #ff0000;
font-size: 200%;
}
ऊपर दिया गया उदाहरण अनुच्छेदों के पहले अक्षर को वर्ग = "परिचय" के साथ लाल और बड़े आकार में प्रदर्शित करेगा।
एकाधिक छद्म तत्व
कई छद्म तत्वों को भी जोड़ा जा सकता है।
निम्नलिखित उदाहरण में, एक xx-बड़े फ़ॉन्ट आकार में, अनुच्छेद का पहला अक्षर लाल होगा। शेष पहली पंक्ति नीली और स्मॉल-कैप में होगी। शेष अनुच्छेद डिफ़ॉल्ट फ़ॉन्ट आकार और रंग होगा:
उदाहरण
p::first-letter
{
color: #ff0000;
font-size: xx-large;
}
p::first-line
{
color: #0000ff;
font-variant: small-caps;
}
सीएसएस - :: छद्म तत्व से पहले
छद्म तत्व का ::beforeउपयोग किसी तत्व की सामग्री से पहले कुछ सामग्री डालने के लिए किया जा सकता है।
निम्न उदाहरण प्रत्येक <h1> तत्व की सामग्री से पहले एक छवि सम्मिलित करता है:
उदाहरण
h1::before
{
content: url(smiley.gif);
}
सीएसएस - :: छद्म तत्व के बाद
छद्म तत्व का ::afterउपयोग किसी तत्व की सामग्री के बाद कुछ सामग्री डालने के लिए किया जा सकता है।
निम्न उदाहरण प्रत्येक <h1> तत्व की सामग्री के बाद एक छवि सम्मिलित करता है:
उदाहरण
h1::after
{
content: url(smiley.gif);
}
सीएसएस - :: मार्कर छद्म तत्व
::markerछद्म तत्व सूची वस्तुओं के मार्करों का चयन करता है ।
निम्न उदाहरण सूची आइटम के मार्करों को स्टाइल करता है:
उदाहरण
::marker {
color: red;
font-size: 23px;
}
सीएसएस - :: चयन छद्म तत्व
छद्म तत्व उपयोगकर्ता द्वारा चुने गए तत्व के ::selectionहिस्से से मेल खाता है।
निम्नलिखित CSS गुणों को ::selection:
color,
background, cursor, और पर लागू किया जा सकता है outline।
निम्न उदाहरण पीले रंग की पृष्ठभूमि पर चयनित पाठ को लाल बनाता है:
उदाहरण
::selection {
color: red;
background: yellow;
}
सभी सीएसएस छद्म तत्व
| Selector | Example | Example description |
|---|---|---|
| ::after | p::after | Insert something after the content of each <p> element |
| ::before | p::before | Insert something before the content of each <p> element |
| ::first-letter | p::first-letter | Selects the first letter of each <p> element |
| ::first-line | p::first-line | Selects the first line of each <p> element |
| ::marker | ::marker | Selects the markers of list items |
| ::selection | p::selection | Selects the portion of an element that is selected by a user |
सभी सीएसएस छद्म वर्ग
| Selector | Example | Example description |
|---|---|---|
| :active | a:active | Selects the active link |
| :checked | input:checked | Selects every checked <input> element |
| :disabled | input:disabled | Selects every disabled <input> element |
| :empty | p:empty | Selects every <p> element that has no children |
| :enabled | input:enabled | Selects every enabled <input> element |
| :first-child | p:first-child | Selects every <p> elements that is the first child of its parent |
| :first-of-type | p:first-of-type | Selects every <p> element that is the first <p> element of its parent |
| :focus | input:focus | Selects the <input> element that has focus |
| :hover | a:hover | Selects links on mouse over |
| :in-range | input:in-range | Selects <input> elements with a value within a specified range |
| :invalid | input:invalid | Selects all <input> elements with an invalid value |
| :lang(language) | p:lang(it) | Selects every <p> element with a lang attribute value starting with "it" |
| :last-child | p:last-child | Selects every <p> elements that is the last child of its parent |
| :last-of-type | p:last-of-type | Selects every <p> element that is the last <p> element of its parent |
| :link | a:link | Selects all unvisited links |
| :not(selector) | :not(p) | Selects every element that is not a <p> element |
| :nth-child(n) | p:nth-child(2) | Selects every <p> element that is the second child of its parent |
| :nth-last-child(n) | p:nth-last-child(2) | Selects every <p> element that is the second child of its parent, counting from the last child |
| :nth-last-of-type(n) | p:nth-last-of-type(2) | Selects every <p> element that is the second <p> element of its parent, counting from the last child |
| :nth-of-type(n) | p:nth-of-type(2) | Selects every <p> element that is the second <p> element of its parent |
| :only-of-type | p:only-of-type | Selects every <p> element that is the only <p> element of its parent |
| :only-child | p:only-child | Selects every <p> element that is the only child of its parent |
| :optional | input:optional | Selects <input> elements with no "required" attribute |
| :out-of-range | input:out-of-range | Selects <input> elements with a value outside a specified range |
| :read-only | input:read-only | Selects <input> elements with a "readonly" attribute specified |
| :read-write | input:read-write | Selects <input> elements with no "readonly" attribute |
| :required | input:required | Selects <input> elements with a "required" attribute specified |
| :root | root | Selects the document's root element |
| :target | #news:target | Selects the current active #news element (clicked on a URL containing that anchor name) |
| :valid | input:valid | Selects all <input> elements with a valid value |
| :visited | a:visited | Selects all visited links |