सीएसएस प्सेउडोक्लास

अशी विशेषण क्या है?

अशी विशेषण तत्व के विशेष स्थिति को परिभाषित करने के लिए प्रयोग किया जाता है。

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

  • तत्व पर चूही लगाए हुए समय का शैली निर्धारित करें
  • देखा हुआ और देखा नहीं हुआ लिंक के लिए अलग-अलग शैली निर्धारित करें
  • तत्व फोकस प्राप्त करते समय का शैली निर्धारित करें
मेरे ऊपर चूही लगाएं

व्याकरण

अशी विशेषण का व्याकरण:

selector:pseudo-class {
  property: value;
}

एंकर प्रभावी विशेषण

लिंक अलग-अलग तरीके से प्रदर्शित कर सकते हैं:

उदाहरण

/* देखा नहीं हुआ कड़ी */
a:link {
  color: #FF0000;
}
/* देखा हुआ कड़ी */
a:visited {
  color: #00FF00;
}
/* चूही लगाए हुए कड़ी */
a:hover {
  color: #FF00FF;
}
/* चयनित कड़ी */
a:active {
  color: #0000FF;
}

स्वयं अभिप्राय करें

ध्यान दें:a:hover जरूरी है कि यह CSS विभाजन में a:link और a:visited बाद में ही लागू होती है!a:active जरूरी है कि यह CSS विभाजन में a:hover बाद में ही लागू होती हैं! अशी विशेषण का नाम हिसाब से महत्वपूर्ण नहीं है।

अशी विशेषण और CSS वर्ग

अशी विशेषण को CSS वर्ग के साथ प्रयोग किया जा सकता है:

जब आप उदाहरण में कड़ी पर चूही लगाएं तो इसका रंग बदल जाएगा:

उदाहरण

a.highlight:hover {
  color: #ff0000;
}

स्वयं अभिप्राय करें

डीवी पर जूहा होना

डीवी तत्व पर प्रयोग करें :hover अशी विशेषण इन्स्टेंस:

उदाहरण

div:hover {
  background-color: blue;
}

स्वयं अभिप्राय करें

सरल टूल टिप हॉवर

<div> एलीमेंट पर माउस स्थित करके <p> एलीमेंट दिखाएं (टूल टिप जैसा प्रभाव):

मेरे ऊपर स्थित होकर <p> एलीमेंट दिखाएं।

हाँ, मैं यहाँ हूँ!

उदाहरण

p {
  प्रदर्शन: निष्क्रिय;
  पृष्ठभूमि रंग: पीला;
  पैडिंग: 20पिक्सल;
}
div:hover p {
  प्रदर्शन: ब्लॉक;
}

स्वयं अभिप्राय करें

CSS - :first-child अशास्त्रीय वर्ग

:first-child अशास्त्रीय वर्ग इस तरह के निर्दिष्ट एलीमेंट के साथ मेल खाता है: यह एक अन्य एलीमेंट का प्रथम उप-एलीमेंट है।

प्रथम <p> एलीमेंट को मेल खाता है

इस उदाहरण में, चुनावक प्रत्येक एलीमेंट के प्रथम उप-एलीमेंट को मेल खाता है:

उदाहरण

p:first-child {
  रंग: नीला;
}

स्वयं अभिप्राय करें

सभी <p> एलीमेंट के प्रथम एलीमेंट को मेल खाता है

इस उदाहरण में, चुनावक प्रत्येक <p> एलीमेंट के प्रथम एलीमेंट को मेल खाता है:

उदाहरण

p i:first-child {
  रंग: नीला;
}

स्वयं अभिप्राय करें

सभी प्रथम <p> एलीमेंट के अन्य एलीमेंटों को मेल खाता है

इस उदाहरण में, चुनावक प्रत्येक प्रभावी <p> एलीमेंट के अन्य एलीमेंटों को चुनता है जो एक अन्य एलीमेंट के प्रथम उप-एलीमेंट है:

उदाहरण

p:first-child i {
  रंग: नीला;
}

स्वयं अभिप्राय करें

CSS - :lang अशास्त्रीय वर्ग

:lang अशास्त्रीय वर्ग आपको विभिन्न भाषाओं के लिए विशेष नियमों को निर्धारित करने की अनुमति देता है।

इस उदाहरण में,:lang अभिलक्षण लांग="en" के <q> एलीमेंट के लिए अनुवाद को निर्धारित करें: अनुवाद की ओर

उदाहरण

<html>
<head>
<style>
q:lang(en) {
  quotes: "~" "~";
}
</style>
</head>
<body>
<p>कुछ पाठ <q lang="no">पैराग्राफ में एक कथन</q> कुछ पाठ.</p>
</body>
</html>

स्वयं अभिप्राय करें

अधिक उदाहरण

अधिकारिता लिंक को विभिन्न शैली योजना जोड़ें
इस उदाहरण में देखा जाता है कि कैसे अन्य शैली योजना को अधिकारिता लिंक को जोड़ा जाता है।
उपयोग करें :focus
इस उदाहरण में देखा जाता है कि कैसे :focus अशास्त्रीय वर्ग का उपयोग किया जाता है।

सभी 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(language) 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(selector) :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 एलीमेंट को चयन करें (इस अंकन के नाम के अनुसार यूआरएल को क्लिक करें)।
:valid input:valid सभी सही मूल्य वाले <input> एलीमेंट को चयन करें।
:visited a:visited सभी पछतावा लिंक को चयन करें।

सभी CSS अनुप्रेषण चयनकर्ता

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