CSS विशेषता चयनकर्ता
विशिष्ट विशेषताओं के साथ HTML तत्वों को स्टाइल करें
HTML तत्वों को स्टाइल करना संभव है जिनमें विशिष्ट विशेषताएँ या विशेषता मान हों।
सीएसएस [विशेषता] चयनकर्ता
[attribute]चयनकर्ता का उपयोग निर्दिष्ट विशेषता वाले तत्वों का चयन करने के लिए किया जाता है ।
निम्न उदाहरण लक्ष्य विशेषता वाले सभी <a> तत्वों का चयन करता है:
उदाहरण
a[target] {
background-color: yellow;
}
सीएसएस [विशेषता = "मान"] चयनकर्ता
[attribute="value"]चयनकर्ता का उपयोग निर्दिष्ट विशेषता और मान वाले तत्वों का चयन करने के लिए किया जाता है ।
निम्न उदाहरण लक्ष्य = "_ रिक्त" विशेषता वाले सभी <a> तत्वों का चयन करता है:
उदाहरण
a[target="_blank"] {
background-color: yellow;
}
सीएसएस [विशेषता ~ = "मान"] चयनकर्ता
चयनकर्ता का [attribute~="value"]उपयोग एक निर्दिष्ट शब्द वाले विशेषता मान वाले तत्वों का चयन करने के लिए किया जाता है।
निम्न उदाहरण एक शीर्षक विशेषता वाले सभी तत्वों का चयन करता है जिसमें शब्दों की एक स्थान से अलग की गई सूची है, जिनमें से एक "फूल" है:
उदाहरण
[title~="flower"] {
border: 5px solid yellow;
}
ऊपर दिया गया उदाहरण शीर्षक = "फूल", शीर्षक = "ग्रीष्मकालीन फूल" और शीर्षक = "फूल नया" वाले तत्वों से मेल खाएगा, लेकिन शीर्षक = "मेरा-फूल" या शीर्षक = "फूल" नहीं।
सीएसएस [विशेषता|="मान"] चयनकर्ता
चयनकर्ता का [attribute|="value"]उपयोग निर्दिष्ट विशेषता वाले तत्वों का चयन करने के लिए किया जाता है, जिसका मान बिल्कुल निर्दिष्ट मान हो सकता है, या निर्दिष्ट मान के बाद हाइफ़न (-) हो सकता है।
नोट: मान एक संपूर्ण शब्द होना चाहिए, या तो अकेला, जैसे वर्ग = "शीर्ष", या उसके बाद एक हाइफ़न (-), जैसे वर्ग = "टॉप-टेक्स्ट"।
उदाहरण
[class|="top"] {
background: yellow;
}
सीएसएस [विशेषता ^ = "मान"] चयनकर्ता
चयनकर्ता का [attribute^="value"]उपयोग निर्दिष्ट विशेषता वाले तत्वों का चयन करने के लिए किया जाता है, जिसका मान निर्दिष्ट मान से शुरू होता है।
निम्न उदाहरण "शीर्ष" से शुरू होने वाले वर्ग विशेषता मान वाले सभी तत्वों का चयन करता है:
नोट: मान का पूरा शब्द होना ज़रूरी नहीं है!
उदाहरण
[class^="top"] {
background: yellow;
}
सीएसएस [विशेषता $ = "मान"] चयनकर्ता
चयनकर्ता का [attribute$="value"]उपयोग उन तत्वों का चयन करने के लिए किया जाता है जिनकी विशेषता मान निर्दिष्ट मान के साथ समाप्त होती है।
निम्न उदाहरण एक वर्ग विशेषता मान वाले सभी तत्वों का चयन करता है जो "परीक्षण" के साथ समाप्त होता है:
नोट: मान का पूरा शब्द होना ज़रूरी नहीं है!
उदाहरण
[class$="test"] {
background: yellow;
}
सीएसएस [विशेषता*="मान"] चयनकर्ता
[attribute*="value"]चयनकर्ता का उपयोग उन तत्वों का चयन करने के लिए किया जाता है जिनके विशेषता मान में एक निर्दिष्ट मान होता है ।
निम्न उदाहरण वर्ग विशेषता मान वाले सभी तत्वों का चयन करता है जिसमें "te" शामिल है:
नोट: मान का पूरा शब्द होना ज़रूरी नहीं है!
उदाहरण
[class*="te"] {
background: yellow;
}
स्टाइलिंग फॉर्म
विशेषता चयनकर्ता वर्ग या आईडी के बिना रूपों को स्टाइल करने के लिए उपयोगी हो सकते हैं:
उदाहरण
input[type="text"]
{
width: 150px;
display: block;
margin-bottom: 10px;
background-color: yellow;
}
input[type="button"]
{
width: 120px;
margin-left: 35px;
display: block;
}
टिप: सीएसएस के साथ फॉर्म को स्टाइल करने के तरीके के बारे में अधिक उदाहरणों के लिए हमारे सीएसएस फॉर्म ट्यूटोरियल पर जाएं।
सभी CSS विशेषता चयनकर्ता
| Selector | Example | Example description |
|---|---|---|
| [attribute] | [target] | Selects all elements with a target attribute |
| [attribute=value] | [target=_blank] | Selects all elements with target="_blank" |
| [attribute~=value] | [title~=flower] | Selects all elements with a title attribute containing the word "flower" |
| [attribute|=value] | [lang|=en] | Selects all elements with a lang attribute value starting with "en" |
| [attribute^=value] | a[href^="https"] | Selects every <a> element whose href attribute value begins with "https" |
| [attribute$=value] | a[href$=".pdf"] | Selects every <a> element whose href attribute value ends with ".pdf" |
| [attribute*=value] | a[href*="w3schools"] | Selects every <a> element whose href attribute value contains the substring "w3schools" |