CSS
छद्म तत्वों
खोज…
परिचय
छद्म-तत्व, जैसे कि छद्म-कक्षाएं, एक सीएसएस चयनकर्ताओं में जोड़ दी जाती हैं, लेकिन एक विशेष राज्य का वर्णन करने के बजाय, वे आपको HTML तत्व के कुछ हिस्सों को स्कोप और स्टाइल करने की अनुमति देते हैं।
उदाहरण के लिए, :: पहला अक्षर छद्म तत्व चयनकर्ता द्वारा निर्दिष्ट ब्लॉक तत्व के पहले अक्षर को लक्षित करता है।
वाक्य - विन्यास
- चयनकर्ता :: छद्म तत्व {संपत्ति: मूल्य}
पैरामीटर
| छद्म तत्व | विवरण |
|---|---|
::after | किसी तत्व की सामग्री के बाद सामग्री डालें |
::before | किसी तत्व की सामग्री से पहले सामग्री डालें |
::first-letter | प्रत्येक तत्व के पहले अक्षर का चयन करता है |
::first-line | प्रत्येक तत्व की पहली पंक्ति का चयन करता है |
::selection | किसी उपयोगकर्ता द्वारा चयनित तत्व के भाग से मेल खाता है |
::backdrop | एक पृष्ठभूमि बनाने के लिए उपयोग किया जाता है जो शीर्ष परत के ढेर में एक तत्व के लिए अंतर्निहित दस्तावेज़ को छुपाता है |
::placeholder | आपको फॉर्म तत्व के प्लेसहोल्डर टेक्स्ट को स्टाइल करने देता है (प्रायोगिक) |
::marker | किसी दिए गए तत्व पर सूची-शैली विशेषताओं को लागू करने के लिए (प्रायोगिक) |
::spelling-error | एक पाठ खंड का प्रतिनिधित्व करता है जिसे ब्राउज़र ने गलत वर्तनी के रूप में चिह्नित किया है (प्रायोगिक) |
::grammar-error | एक पाठ सेगमेंट का प्रतिनिधित्व करता है जिसे ब्राउज़र ने व्याकरणिक रूप से गलत माना है (प्रायोगिक) |
टिप्पणियों
कभी-कभी आप डबल कोलन (देखेंगे
::सिर्फ एक के बजाय) (:)। यह एक तरह से अलग करने के लिए छद्म तत्वों से छद्म वर्गों है, लेकिन इंटरनेट एक्सप्लोरर 8 की तरह कुछ पुराने ब्राउज़र केवल एकल पेट का समर्थन करता है (:छद्म तत्वों के लिए)।एक चयनकर्ता में केवल एक छद्म तत्व का उपयोग कर सकते हैं। यह कथन में साधारण चयनकर्ताओं के बाद दिखाई देना चाहिए।
छद्म तत्व DOM का हिस्सा नहीं हैं, इसलिए इसके द्वारा लक्षित नहीं हैं
:hoverया अन्य उपयोगकर्ता ईवेंट।
छद्म तत्वों
छद्म तत्व चयनकर्ताओं में जोड़े जाते हैं, लेकिन एक विशेष राज्य का वर्णन करने के बजाय, वे आपको एक दस्तावेज़ के कुछ हिस्सों को स्टाइल करने की अनुमति देते हैं।
छद्म तत्वों को रेंडर करने के लिए content विशेषता आवश्यक है; हालाँकि, विशेषता में रिक्त मान हो सकता है (उदाहरण के लिए content: "" )।
div::after {
content: 'after';
color: red;
border: 1px solid red;
}
div {
color: black;
border: 1px solid black;
padding: 1px;
}
div::before {
content: 'before';
color: green;
border: 1px solid green;
}
सूचियों में छद्म तत्व
छद्म तत्वों का उपयोग अक्सर सूचियों के लुक को बदलने के लिए किया जाता है (ज्यादातर अनियोजित सूचियों के लिए, ul )।
डिफ़ॉल्ट सूची गोलियों को हटाने के लिए पहला कदम है:
ul {
list-style-type: none;
}
फिर आप कस्टम स्टाइल जोड़ते हैं। इस उदाहरण में, हम गोलियों के लिए ढाल बॉक्स बनाएंगे।
li:before {
content: "";
display: inline-block;
margin-right: 10px;
height: 10px;
width: 10px;
background: linear-gradient(red, blue);
}
एचटीएमएल
<ul>
<li>Test I</li>
<li>Test II</li>
</ul>
परिणाम
