सीएसएस गुण चयनक
- पिछला पृष्ठ सीएसएस इमेज स्प्राइट
- अगला पृष्ठ सीएसएस फॉर्म
विशेष गुण वाले HTML एलीमेंट के साइल निर्धारित करने के लिए
हम विशेष गुण या गुण मूल्य वाले HTML एलीमेंट के साइल निर्धारित कर सकते हैं।
CSS [attribute] सेलेक्टर
[attribute] चयनक विन्यासक निर्दिष्ट गुण वाले एलीमेंट को चयन करने के लिए उपयोग किया जाता है।
नीचे का उदाहरण सभी target गुण वाले <a> एलीमेंट को चयन करता है;
उदाहरण
a[target] {
background-color: yellow;
}
CSS [attribute="value"] चयनक विन्यासक
[attribute="value"] चयनक विन्यासक निर्दिष्ट गुण और मूल्य वाले एलीमेंट को चयन करने के लिए उपयोग किया जाता है।
नीचे का उदाहरण सभी target="_blank" गुण वाले <a> एलीमेंट को चयन करता है:
उदाहरण
a[target="_blank"] {
background-color: yellow;
}
CSS [attribute~="value"] चयनक विन्यासक
[attribute~="value"] चयनक विन्यासक गुण के मूल्य में निर्दिष्ट शब्द शामिल सभी एलीमेंट को चयन करता है।
नीचे का उदाहरण title गुण में "flower" शब्द शामिल सभी एलीमेंट को चयन करता है:
उदाहरण
[title~="flower"] {
border: 5px solid yellow;
}
ऊपरी उदाहरण निम्नलिखित गुण के एलीमेंट को मेल खाता है: title="flower"、title="summer flower" और title="flower new" लेकिन title="my-flower" या title="flowers" से मेल नहीं खाता है।
CSS [attribute|="value"] चयनक विन्यासक
[attribute|="value"] चयनक विन्यासक निर्दिष्ट गुण को निर्दिष्ट मूल्य के साथ चयन करने के लिए उपयोग किया जाता है।
नीचे का उदाहरण class अट्रिब्यूट "top" से शुरू होता है:
टिप्पणी:मूल्य पूर्ण या अलग-अलग शब्द होना चाहिए, जैसे class="top" या हाथ बाद में होने वाले, जैसे class="top-text"।
उदाहरण
[class|="top"] {
background: yellow;
}
CSS [attribute^="value"] चयनक
[attribute^="value"] चयनक निर्दिष्ट वाले एट्रिब्यूट को निर्दिष्ट मालिकी से शुरू होने वाले एलीमेंट को चयन करता है।
नीचे का उदाहरण class अट्रिब्यूट "top" से शुरू होता है:
सूचना:मूल्य पूर्ण शब्द नहीं होना चाहिए!
उदाहरण
[class^="top"] {
background: yellow;
}
CSS [attribute$="value"] चयनक
[attribute$="value"] चयनक निर्दिष्ट वाले एट्रिब्यूट को निर्दिष्ट मालिकी से समाप्त होने वाले एलीमेंट को चयन करता है।
नीचे का उदाहरण class अट्रिब्यूट "test" से समाप्त होता है:
सूचना:मूल्य पूर्ण शब्द नहीं होना चाहिए!
उदाहरण
[class$="test"] {
background: yellow;
}
CSS [attribute*="value"] चयनक
[attribute*="value"] चयनक निर्दिष्ट शब्द को शामिल करने वाले एट्रिब्यूट वाले एलीमेंट को चयन करता है।
नीचे का उदाहरण class अट्रिब्यूट "te" शामिल करता है:
सूचना:मूल्य पूर्ण शब्द नहीं होना चाहिए!
उदाहरण
[class*="te"] {
background: yellow;
}
फॉर्म स्टाइल सेट करें
क्लास या id के बिना के फॉर्म को स्टाइल लगाने के लिए, एट्रिब्यूट चयनक बहुत उपयोगी है:
उदाहरण
input[type="text"] {
width: 150px;
display: block;
margin-bottom: 10px;
background-color: yellow;
}
input[type="button"] {
width: 120px;
margin-left: 35px;
display: block;
}
सूचना:हमारे CSS फॉर्म ट्यूटोरियलसीएसएस फॉर्म स्टाइलिंग के लिए और अधिक जानकारी सीखें।
सभी CSS एट्रिब्यूट चयनक
| चयनक | उदाहरण | उदाहरण वर्णन |
|---|---|---|
| [attribute] | [target] | चुनें जिन सभी एलीमेंट के target अट्रिब्यूट है। |
| [attribute=value] | [target=_blank] | चुनें जिन सभी एलीमेंट के target अट्रिब्यूट "_blank" है। |
| [attribute~=value] | [title~=flower] | चुनें जिन सभी एलीमेंट के title अट्रिब्यूट "flower" शब्द को शामिल करता है। |
| [attribute|=value] | [lang|=en] | चुनें जिन सभी एलीमेंट के lang अट्रिब्यूट "en" से शुरू होता है। |
| [attribute^=value] | a[href^="https"] | चुनें जिन <a> एलीमेंट के href अट्रिब्यूट "https" से शुरू होता है। |
| [attribute$=value] | a[href$="\.pdf"] | चुनें जिन <a> एलीमेंट के href अट्रिब्यूट का मालिकी "\.pdf" से समाप्त हो। |
| [attribute*=value] | a[href*="codew3c"] | href अट्रिब्यूट की मान में "codew3c" शब्दांश शामिल होने वाले हर एक <a> एलीमेंट को चुनें। |
अतिरिक्त पठन
- पिछला पृष्ठ सीएसएस इमेज स्प्राइट
- अगला पृष्ठ सीएसएस फॉर्म
