सीएसएस प्सयॉल एलिमेंट

क्या नकली तत्व है?

CSS नकली तत्व तत्व के निर्दिष्ट हिस्से के साइल सेट करने के लिए उपयोग किया जाता है।

उदाहरण में, यह इसके लिए उपयोग किया जा सकता है:

  • तत्व के पहले अक्षर, पहले पंक्ति के साइल सेट करने के लिए
  • तत्व के सामग्री के पहले या बाद में सामग्री जोड़ने के लिए

वाक्यबद्ध

नकली तत्व के वाक्यबद्ध:

चयनकर्ता::नकली तत्व {
  प्रकृति: मूल्य;
}

::first-line नकली तत्व

::first-line नकली तत्व टेक्स्ट के पहले पंक्ति को विशेष साइल प्रदान करने के लिए उपयोग किया जाता है।

नीचे दिए उदाहरण में सभी <p> तत्वों के लिए पहले पंक्ति को साइल जोड़ता है:

उदाहरण

p::first-line {
  color: #ff0000;
  font-variant: small-caps;
}

अपने आप साबित करें

ध्यान:::first-line नकली तत्व केवल ब्लॉक स्केल तत्वों के लिए उपयोगी हैं।

नीचे की विशेषताएँ: ::first-line नकली तत्व:

  • फ़ॉन्ट प्रकृति
  • रंग प्रकृति
  • बैकग्राउंड प्रकृति
  • वर्ड-स्पेसिंग
  • लेटर-स्पेसिंग
  • text-decoration
  • वर्टिकल-अलाइन
  • text-transform
  • line-height
  • clear

ध्यान दें:दो डॉट प्रदर्शन - ::first-line विरोध :first-line

CSS3 में, दो डॉट का प्रयोग नकली तत्व के एकल डॉट प्रदर्शन को बदलता है। यह W3C द्वारा नकली तत्व और नकली वर्ग को अलग अलग करने का प्रयास है।नकली वर्गऔरनकली तत्वका प्रयास।

CSS2 और CSS1 में, नकली वर्ग और नकली तत्व एकल डॉट के लिए वाक्यबद्ध का उपयोग करते हैं।

पिछले समर्थन के लिए, CSS2 और CSS1 नकली तत्व एकल डॉट के लिए वाक्यबद्ध को स्वीकार करते हैं।

::first-letter नकली तत्व

::first-letter नकली तत्व टेक्स्ट के पहले अक्षर को विशेष साइल प्रदान करने के लिए उपयोग किया जाता है।

नीचे दिए उदाहरण में सभी <p> तत्वों के लिए चीनी टेक्स्ट के पहले अक्षर के फॉर्मेटिंग सेट करता है:

उदाहरण

p::first-letter {
  color: #ff0000;
  font-size: xx-large;
}

अपने आप साबित करें

ध्यान:::first-letter नकली तत्व केवल ब्लॉक स्केल तत्वों के लिए उपयोगी हैं।

इस प्रकृति के लिए ::first-letter नकली तत्व:

  • फ़ॉन्ट प्रकृति
  • रंग प्रकृति
  • बैकग्राउंड प्रकृति
  • आउटर मार्गीन प्रकृति
  • इनर पैडिंग प्रकृति
  • बॉर्डर प्रकृति
  • text-decoration
  • vertical-align (केवल "float" "none" के लिए)
  • text-transform
  • line-height
  • float
  • clear

उप-एलिमेंट और CSS कोटी

उप-एलिमेंट को CSS कोटी से उपयोग किया जा सकता है:

उदाहरण

p.intro::first-letter {
  color: #ff0000;
  font-size: 200%;
}

अपने आप साबित करें

ऊपरी उदाहरण class="intro" के पड़ाव के पहले अक्षर को लाल रंग और बड़े फ़ॉन्ट में दिखाता है。

अनेक उप-एलिमेंट

भी कई उप-एलिमेंट को संयोजित किया जा सकता है。

नीचे के उदाहरण में, पड़ाव का पहला अक्षर लाल रंग में होगा और फ़ॉन्ट साइज़ xx-large होगा। पहले पंक्ति के बाकी हिस्सा नीला रंग में बनेगा और छोटे बड़े अक्षरों का उपयोग किया जाएगा। इस पड़ाव के बाकी हिस्सा डिफ़ॉल्ट फ़ॉन्ट साइज़ और रंग में होगा:

उदाहरण

p::first-letter {
  color: #ff0000;
  font-size: xx-large;
}
p::first-line {
  color: #0000ff;
  font-variant: small-caps;
}

अपने आप साबित करें

CSS - ::before उप-एलिमेंट

::before उप-एलिमेंट को एलिमेंट के सामग्री के पहले कुछ सामग्री जोड़ने के लिए उपयोग किया जा सकता है。

नीचे का उदाहरण हर <h1> एलिमेंट के सामग्री के पहले एक चित्र जोड़ता है:

उदाहरण

h1::before {
  content: url(smiley.gif);
}

अपने आप साबित करें

CSS - ::after उप-एलिमेंट

::after उप-एलिमेंट को एलिमेंट के सामग्री के बाद कुछ सामग्री जोड़ने के लिए उपयोग किया जा सकता है。

नीचे का उदाहरण हर <h1> एलिमेंट के सामग्री के बाद एक चित्र जोड़ता है:

उदाहरण

h1::after {
  content: url(smiley.gif);
}

अपने आप साबित करें

CSS - ::selection उप-एलिमेंट

::selection उप-एलिमेंट में उपयोगकर्ता द्वारा चयनित टेक्स्ट के हिस्से को मेल खाते हैं。

नीचे के CSS गुण को उप-एलिमेंट पर लागू किया जा सकता है ::selection:

  • color
  • background
  • cursor
  • outline

नीचे का उदाहरण चयनित टेक्स्ट को पीले पृष्ठभूमि पर लाल रंग में दिखाता है:

उदाहरण

::selection {
  color: red; 
  background: yellow;
}

अपने आप साबित करें

सभी CSS उप-एलिमेंट

चयनकर्ता उदाहरण उदाहरण वर्णन
::after p::after प्रत्येक <p> एलिमेंट के बाद सामग्री जोड़ें。
::before p::before प्रत्येक <p> एलिमेंट के पहले सामग्री जोड़ें。
::first-letter p::first-letter चुनें प्रत्येक <p> एलिमेंट का पहला अक्षर。
::first-line p::first-line चुनें प्रत्येक <p> एलिमेंट का पहला पंक्ति。
::selection p::selection उपयोगकर्ता द्वारा चयनित एलीमेंट के भाग को चुनें。

सभी CSS उपचयनकर्ता

चयनकर्ता उदाहरण उदाहरण वर्णन
:active a:active सक्रिय लिंक को चुनें。
:checked input:checked प्रत्येक चयनित <input> एलीमेंट को चुनें。
:disabled input:disabled प्रत्येक निष्क्रिय <input> एलीमेंट को चुनें。
:empty p:empty प्रत्येक बच्चे वाले <p> एलीमेंट को चुनें。
:enabled input:enabled प्रत्येक सक्षम <input> एलीमेंट को चुनें。
:first-child p:first-child अपने पिता के पहले बच्चे के रूप में होने वाले प्रत्येक <p> एलीमेंट को चुनें。
:first-of-type p:first-of-type अपने पिता के पहले <p> एलीमेंट के रूप में होने वाले प्रत्येक <p> एलीमेंट को चुनें。
:focus input:focus फोकस प्राप्त करने वाले <input> एलीमेंट को चुनें。
:hover a:hover माउस को उपर ले जाने पर स्थित लिंक को चुनें。
:in-range input:in-range निर्दिष्ट रेंज के मान वाले <input> एलीमेंट को चुनें。
:invalid input:invalid अवैध मान वाले सभी <input> एलीमेंट को चुनें。
:lang(भाषा) p:lang(it) अपने lang एट्रिब्यूट की मान "it" से शुरू होने वाले प्रत्येक <p> एलीमेंट को चुनें。
:last-child p:last-child अपने पिता के अंतिम बच्चे के रूप में होने वाले प्रत्येक <p> एलीमेंट को चुनें。
:last-of-type p:last-of-type अपने पिता के अंतिम <p> एलीमेंट के रूप में होने वाले प्रत्येक <p> एलीमेंट को चुनें。
:link a:link सभी अनदेखी हुए लिंक को चुनें。
:not(चयनकर्ता) :not(p) प्रत्येक नहीं <p> एलीमेंट को चुनें。
:nth-child(n) p:nth-child(2) अपने पिता के दूसरे बच्चे के रूप में होने वाले प्रत्येक <p> एलीमेंट को चुनें。
:nth-last-child(n) p:nth-last-child(2) अंतिम बच्चे से गिनती करते हुए प्रत्येक <p> एलीमेंट को चुनें जो उसके पिता के दूसरे बच्चे के रूप में है。
:nth-last-of-type(n) p:nth-last-of-type(2) पिता के दूसरे <p> एलीमेंट के प्रत्येक <p> एलीमेंट को चुनें, अंतिम पुत्र से गिनती करें।
:nth-of-type(n) p:nth-of-type(2) अपने पिता के दूसरे <p> एलीमेंट के प्रत्येक <p> एलीमेंट को चुनें。
:only-of-type p:only-of-type अपने पिता के एकमात्र <p> एलीमेंट के प्रत्येक <p> एलीमेंट को चुनें。
:only-child p:only-child अपने पिता के एकमात्र पुत्र के रूप में उपस्थित <p> एलीमेंट को चुनें。
:optional input:optional जिसमें 'required' गुण नहीं होने वाले <input> एलीमेंट को चुनें。
:out-of-range input:out-of-range मूल्य निर्दिष्ट रेंज से बाहर के <input> एलीमेंट को चुनें。
:read-only input:read-only जिसमें 'readonly' गुण निर्दिष्ट किया गया <input> एलीमेंट को चुनें。
:read-write input:read-write जिसमें 'readonly' गुण नहीं होने वाले <input> एलीमेंट को चुनें。
:required input:required जिसमें 'required' गुण निर्दिष्ट किया गया <input> एलीमेंट को चुनें。
:root root एलीमेंट के रूट एलीमेंट को चुनें。
:target #news:target वर्तमान गतिविधि वाले #news एलीमेंट को चुनें (जो अयंतरिक नाम वाले URL को शामिल करता है)。
:valid input:valid सभी वैध मूल्य वाले <input> एलीमेंट्स को चुनें。
:visited a:visited सभी पहले देखा गये लिंक को चुनें。