सीएसएस छद्म वर्ग
छद्म वर्ग क्या हैं?
एक छद्म वर्ग का उपयोग किसी तत्व की विशेष स्थिति को परिभाषित करने के लिए किया जाता है।
उदाहरण के लिए, इसका उपयोग किया जा सकता है:
- जब कोई उपयोगकर्ता उस पर माउस ले जाता है तो एक तत्व को स्टाइल करें
- शैली देखी गई और न देखी गई लिंक अलग-अलग
- एक तत्व को स्टाइल करें जब वह फोकस हो जाता है
मेरे ऊपर माउस
वाक्य - विन्यास
छद्म वर्गों का सिंटैक्स:
selector:pseudo-class {
property: value;
}
एंकर छद्म-वर्ग
लिंक विभिन्न तरीकों से प्रदर्शित किए जा सकते हैं:
उदाहरण
/* unvisited link */
a:link {
color: #FF0000;
}
/* visited
link */
a:visited {
color: #00FF00;
}
/* mouse over link */
a:hover {
color: #FF00FF;
}
/* selected link */
a:active {
color: #0000FF;
}
नोट: प्रभावी होने के लिए सीएसएस परिभाषा के बाद और
बाद में a:hoverआना चाहिए ! प्रभावी होने के लिए सीएसएस परिभाषा में अवश्य आना चाहिए
! छद्म वर्ग के नाम केस-संवेदी नहीं हैं।a:linka:visiteda:activea:hover
छद्म वर्ग और HTML वर्ग
छद्म वर्गों को HTML कक्षाओं के साथ जोड़ा जा सकता है:
जब आप उदाहरण में लिंक पर होवर करते हैं, तो यह रंग बदल जाएगा:
उदाहरण
a.highlight:hover {
color: #ff0000;
}
<div> . पर होवर करें
:hover<div> तत्व पर छद्म वर्ग का उपयोग करने का एक उदाहरण :
उदाहरण
div:hover {
background-color: blue;
}
सरल टूलटिप होवर
<p> तत्व (टूलटिप की तरह) दिखाने के लिए <div> तत्व पर होवर करें:
Tada! Here I am!
उदाहरण
p {
display: none;
background-color: yellow;
padding: 20px;
}
div:hover p {
display: block;
}
सीएसएस - द: फर्स्ट-चाइल्ड स्यूडो-क्लास
छद्म वर्ग एक निर्दिष्ट तत्व से मेल खाता है जो :first-childकिसी अन्य तत्व का पहला बच्चा है।
पहले <p> तत्व का मिलान करें
निम्नलिखित उदाहरण में, चयनकर्ता किसी भी <p> तत्व से मेल खाता है जो किसी भी तत्व का पहला बच्चा है:
उदाहरण
p:first-child
{
color: blue;
}
सभी <p> तत्वों में पहले <i> तत्व का मिलान करें
निम्नलिखित उदाहरण में, चयनकर्ता सभी <p> तत्वों में पहले <i> तत्व से मेल खाता है:
उदाहरण
p i:first-child
{
color: blue;
}
सभी पहले बच्चे <p> तत्वों में सभी <i> तत्वों का मिलान करें
निम्नलिखित उदाहरण में, चयनकर्ता <p> तत्वों में सभी <i> तत्वों से मेल खाता है जो किसी अन्य तत्व के पहले बच्चे हैं:
उदाहरण
p:first-child i
{
color: blue;
}
CSS - The :lang Pseudo-class
:langछद्म वर्ग आपको विभिन्न भाषाओं के लिए विशेष नियमों को परिभाषित करने की अनुमति देता है ।
नीचे दिए गए उदाहरण में, :lang<q> तत्वों के लिए lang="no" के साथ उद्धरण चिह्नों को परिभाषित किया गया है:
उदाहरण
<html>
<head>
<style>
q:lang(no) {
quotes: "~" "~";
}
</style>
</head>
<body>
<p>Some text <q lang="no">A quote in a paragraph</q>
Some text.</p>
</body>
</html>
और ज्यादा उदाहरण
यह उदाहरण दर्शाता है कि हाइपरलिंक में अन्य शैलियों को कैसे जोड़ा जाए।
यह उदाहरण दर्शाता है कि :फोकस छद्म वर्ग का उपयोग कैसे करें।
सभी सीएसएस छद्म वर्ग
| 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 |
सभी सीएसएस छद्म तत्व
| Selector | Example | Example description |
|---|---|---|
| ::after | p::after | Insert content after every <p> element |
| ::before | p::before | Insert content before every <p> element |
| ::first-letter | p::first-letter | Selects the first letter of every <p> element |
| ::first-line | p::first-line | Selects the first line of every <p> element |
| ::selection | p::selection | Selects the portion of an element that is selected by a user |