Attribute Selectors In Hindi
सीएसएस में एट्रिब्यूट सलेक्टर आपको एचटीएमएल वेब पेज टैग एलिमेंट या कंटेंट एलिमेंट को सलेक्ट कर स्पेशल मॉडिफिकेशन और कस्टम यूजर डिफाइन सीएसएस स्टाइल अप्लाई करने में हेल्प करते हैं। सीएसएस में एट्रिब्यूट अलग अलग सलेक्टर ऐट्रिब्यूट्स मौजूदा एचटीएमएल वेब पेज एलिमेंट कंटेंट को इंडिविजुअल और ग्रुप आर्डर में डिफरेंट सलेक्टर का उपयोग कर कस्टमाइज किया जा सकता है।
So, let’s get to know the attribute selectors in CSS better.
Attribute selector syntax in CSS.
[attribute] {
css property: element value;
}
CSS developers can also set custom attribute selectors.
[attribute=”value”] {
css property: element value;
}
Attribute selector types in CSS web development scripts.
Basic CSS attribute selector.
सीएसएस में एट्रिब्यूट सलेक्टर का उपयोग विभिन्न प्रकार के एचटीएमएल वेब पेज एलिमेंट टैग कण्ट्रोल को मॉडिफाई और अपडेट या स्टाइल करने में किया जाता है, जहा आप एचटीएमएल वेब पेज में टार्गेटेड सीएसएस एट्रिब्यूट सलेक्टर को अप्लाई कर डिजायर वेब पेज डिजिटल कंटेंट में मॉडिफिकेशन कर सकते है।
Attribute selector example in CSS.
[enable] {
opacity: 0.7; /* it used to apply 0.7 opacity to display attributes */
}
Exact value selector in CSS.
सीएसएस स्क्रिप्ट में एक स्पेशल ऐट्रिब्यूट्स वाले एचटीएमएल वेब पेज टैग एलिमेंट को टारगेट कर स्पेशल सीएसएस एट्रिब्यूट सलेक्टर इफ़ेक्ट और ऐट्रिब्यूट्स को अप्लाई किया जाता है।
Exact value selector example.
input[type=”number”] {
border: 2px solid red; /* it used to apply number input field attributes */
}
Substring matching selector in CSS script.
सीएसएस स्क्रिप्ट में मैचिंग सलेक्टर वेब डेवलपर को स्पेशल ऐट्रिब्यूट्स वैल्यू को पार्शियल वैल्यू मैचिंग वैल्यू के आधार पर ऑब्जेक्ट प्रॉपर्टीज वैल्यू को टारगेट और मॉडिफिकेशन में हेल्प करते है.
Starts with (^=) css selector – मौजूदा एचटीएमएल वेब पेज में सीएसएस स्क्रिप्ट में केवल उन टैग एलिमेंट को सलेक्ट किया जाता है, जिनका सलेक्टर ऐट्रिब्यूट्स वैल्यू में स्पेसिफिक वैल्यू से स्टार्ट होता है।
Substring matching selector example.
a[href^=”https”] {
color: yellow; /* it used to apply href “https” yellow color attributes */
}
Ends with ($=) css selector – मौजूदा एचटीएमएल वेब पेज में केवल उन टैग एलिमेंट को सीएसएस एट्रिब्यूट सलेक्टर में सलेक्ट करता है, जिसमे एट्रिब्यूट वैल्यू स्पेसिफिक वैल्यू पर टर्मिनेट होता है।
Ends with ($=) example.
img[src$=”.jpeg”] {
border: 4px solid teal; /* it used to apply selector attributes with given css effect */
}
(*=) contains css selector – मौजूदा एचटीएमएल वेब पेज में केवल उन टैग एलिमेंट को सीएसएस एट्रिब्यूट सलेक्टर में सलेक्ट करता है, जिसमे यहाँ दी गई स्पेशल एट्रिब्यूट वैल्यू इंडीकेट सबस्ट्रिंग मौजूद हो।
(*=) contains css selector example.
a[href*=”vcanhelpsu”] {
font-weight: bold;
font-family: arial;
}
Combining attribute selectors in html web page.
आप अपनी वेब डेवलपमेंट जरूरत के अनुसार एक से अधिक सीएसएस ऐट्रिब्यूट्स सलेक्टर को एचटीएमएल वेब पेज में अप्लाई कर सकते है, जहा आप मौजूदा सीएसएस सलेक्टर में एक से ज्यादा अलग अलग सीएसएस सलेक्टर ऐट्रिब्यूट्स को अप्लाई कर सकते है।
Multiple attribute selector example in css.
div[job=”developer”] {
background-color: aqua; /* apply div section with aqua background color */
}
Multiple selector attribute usage example in CSS script.
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>Multiple Css Individual Attribute Selectors Code </title>
<style>
h2{
color: teal;
font-size: 3em
text-align: center;
font-weight: bold;
}
/* enable button attribute selector */
[enable] {
opacity: 0.7;
}
/* input type Exact selector */
input[type=”number”] {
border: 3px solid brown;
}
/* Starts with https attribute selector */
a[href^=”https”] {
color: orange;
}
/* Ends with jpg attribute selector */
img[src$=”.jpg”] {
border: 3px solid red;
}
/* Contains word substring selector */
a[href*=”vcanhelpsu”] {
font-weight: bold;
font-family: times new roman;
}
</style>
</head>
<body>
<h2>Let Create A Basic Form Which Show Some Additional Css Selector Attributes</h2>
<label>Input Value – </label><input type=”text” placeholder=”Text input”>
<input type=”button” enable value=”Enable button”>
<a href=”https://vcanhelpsu.com/”>Home Page </a>
<a href=”https://vcanhelpsu.com/blog/”>Blog Page</a>
<img src=”city.png” alt=”city image”>
<img src=”map.jpg” alt=”map image”>
<a href=”https://www.mitacademys.com/page”>Mitacademys Link</a>
</body>
</html>
Multiple CSS Attribute Selector Explanation.
- एचटीएमएल वेब पेज में स्पेशल सीएसएस एट्रिब्यूट सलेक्टर वेब डेवलपर को स्पेशल एचटीएमएल टैग एलिमेंट पर सीएसएस स्टाइल इफ़ेक्ट और ऐट्रिब्यूट्स अप्लाई करने में हेल्प करते है, जहा इन स्पेसिफिक वेब पेज एलिमेंट के आधार पर टार्गेटड वेब पेज एलिमेंट पर ही इन विशेष सीएसएस स्टाइल ऐट्रिब्यूट्स को अप्लाई कर पाएंगे।
- जहा आप अलग अलग सीएसएस ऐट्रिब्यूट्स सलेक्टर का उपयोग किया बिना आप डिजायर सीएसएस स्टाइल इफ़ेक्ट अप्लाई कर पाएंगे।
- जहा आप टार्गेटड एचटीएमएल वेब पेज टैग एलिमेंट पर ही डिजायर मॉडिफिकेशन कर पाएंगे। जहा आप स्पेसिफिक वेब पेज एलिमेंट को टारगेट कर मल्टीप्ल सीएसएस एट्रिब्यूट को डिस्प्ले कर पाएंगे।
