CSS में ऐट्रिब्यूट सेलेक्टर्स का विवरण
यह लेख CSS में एट्रिब्यूट सिलेक्टर्स के विवरण की व्याख्या करता है।
आप यह सीख सकते हैं कि एट्रिब्यूट सेलेक्टर्स के लिए फॉरवर्ड मैचिंग, बैकवर्ड मैचिंग और पार्टियल मैचिंग कैसे लिखें।
YouTube Video
प्रीव्यू के लिए HTML
css-attribute-selector.html
1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>CSS Pseudo Class/Element</title>
7 <link rel="stylesheet" href="css-base.css">
8 <link rel="stylesheet" href="css-attribute-selector.css">
9</head>
10<body>
11 <!-- Header -->
12 <header>
13 <h1>CSS Attribute Selectors</h1>
14 </header>
15
16 <!-- Main content -->
17 <main>
18 <header><h2>CSS Attribute Selectors</h2></header>
19 <article>
20 <h3>element[attribute]</h3>
21 <section>
22 <header><h4>CSS</h4></header>
23<pre class="sample">
24a[target] {
25 font-weight: bold;
26}
27</pre>
28 <header><h4>HTML</h4></header>
29<pre>
30<a href="https://example.com" target="_blank">Example Link (target="_blank")</a>
31<a href="https://example.com">Example Link (no target)</a>
32</pre>
33 <header><h4>HTML+CSS</h4></header>
34 <section class="sample-view">
35 <a href="https://example.com" target="_blank">Example Link (target="_blank")</a>
36 <a href="https://example.com">Example Link (no target)</a>
37 </section>
38 </section>
39 </article>
40 <article>
41 <h3>element[attribute=value] : =</h3>
42 <section>
43 <header><h4>CSS</h4></header>
44<pre class="sample">
45input[type="text"] {
46 border: 2px solid green;
47}
48</pre>
49 <header><h4>HTML</h4></header>
50<pre>
51<input type="text" placeholder="Enter text here">
52<input type="password" placeholder="Password (no border)">
53<input type="text" placeholder="Another text input">
54</pre>
55 <header><h4>HTML+CSS</h4></header>
56 <section class="sample-view">
57 <input type="text" placeholder="Enter text here">
58 <input type="password" placeholder="Password (no border)">
59 <input type="text" placeholder="Another text input">
60 </section>
61 </section>
62 </article>
63 <article>
64 <h3>element[attribute^=value] : ^=</h3>
65 <section>
66 <header><h4>CSS</h4></header>
67<pre class="sample">
68a[href^="https://"] {
69 font-weight: bold;
70}
71</pre>
72 <header><h4>HTML</h4></header>
73<pre>
74<a href="https://example.com">Secure Link (https)</a>
75<a href="http://example.com">Non-Secure Link (http)</a>
76<a href="https://another-example.com">Another Secure Link (https)</a>
77</pre>
78 <header><h4>HTML+CSS</h4></header>
79 <section class="sample-view">
80 <a href="https://example.com">Secure Link (https)</a>
81 <a href="http://example.com">Non-Secure Link (http)</a>
82 <a href="https://another-example.com">Another Secure Link (https)</a>
83 </section>
84 </section>
85 </article>
86 <article>
87 <h3>element[attribute$=value] : $=</h3>
88 <section>
89 <header><h4>CSS</h4></header>
90<pre class="sample">
91img[src$=".jpg"] {
92 border-radius: 10px;
93}
94</pre>
95 <header><h4>HTML</h4></header>
96<pre>
97<img src="image.jpg" alt="JPG Image" width="100">
98<img src="pattern.png" alt="PNG Image (no border radius)" width="100">
99<img src="example.jpg" alt="Another JPG Image" width="100">
100</pre>
101 <header><h4>HTML+CSS</h4></header>
102 <section class="sample-view">
103 <img src="image.jpg" alt="JPG Image" width="100">
104 <img src="pattern.png" alt="PNG Image (no border radius)" width="100">
105 <img src="example.jpg" alt="Another JPG Image" width="100">
106 </section>
107 </section>
108 </article>
109 <article>
110 <h3>element[attribute*=value] : *=</h3>
111 <section>
112 <header><h4>CSS</h4></header>
113<pre class="sample">
114p[class*="highlight"] {
115 background-color: yellow;
116}
117</pre>
118 <header><h4>HTML</h4></header>
119<pre>
120<p class="highlight-text">This paragraph is highlighted.</p>
121<p class="normal-text">This paragraph is not highlighted.</p>
122<p class="text-highlight-important">This is another highlighted paragraph.</p>
123</pre>
124 <header><h4>HTML+CSS</h4></header>
125 <section class="sample-view">
126 <p class="highlight-text">This paragraph is highlighted.</p>
127 <p class="normal-text">This paragraph is not highlighted.</p>
128 <p class="text-highlight-important">This is another highlighted paragraph.</p>
129 </section>
130 </section>
131 </article>
132 <article>
133 <h3>element[attribute~=value] : ~=</h3>
134 <section>
135 <header><h4>CSS</h4></header>
136<pre class="sample">
137div[class~="featured"] {
138 border: 1px solid red;
139}
140</pre>
141 <header><h4>HTML</h4></header>
142<pre>
143<div class="featured">This div is featured.</div>
144<div class="content featured">This div is also featured.</div>
145<div class="content">This div is not featured.</div>
146</pre>
147 <header><h4>HTML+CSS</h4></header>
148 <section class="sample-view">
149 <div class="featured">This div is featured.</div>
150 <div class="content featured">This div is also featured.</div>
151 <div class="content">This div is not featured.</div>
152 </section>
153 </section>
154 </article>
155 <article>
156 <h3>element[attribute|=value] : |=</h3>
157 <section>
158 <header><h4>CSS</h4></header>
159<pre class="sample">
160p[lang|="en"] {
161 font-style: italic;
162}
163</pre>
164 <header><h4>HTML</h4></header>
165<pre>
166<p lang="en">This paragraph is in English.</p>
167<p lang="en-US">This paragraph is in American English.</p>
168<p lang="fr">Ce paragraphe est en français.</p>
169</pre>
170 <header><h4>HTML+CSS</h4></header>
171 <section class="sample-view">
172 <p lang="en">This paragraph is in English.</p>
173 <p lang="en-US">This paragraph is in American English.</p>
174 <p lang="fr">Ce paragraphe est en français.</p>
175 </section>
176 </section>
177 </article>
178
179 <article>
180 <h3>CSS Attribute Selector Example : input[required] & input[placeholder]</h3>
181 <section>
182 <header><h4>CSS</h4></header>
183<pre class="sample">
184input[required] {
185 background-color: #ffcccc;
186}
187
188input[placeholder] {
189 font-style: italic;
190 color: #999;
191}
192</pre>
193 <header><h4>HTML</h4></header>
194<pre>
195<input type="text" required placeholder="Enter your name">
196<input type="email" required placeholder="Enter your email">
197<input type="text" placeholder="Optional field">
198</pre>
199 <header><h4>HTML+CSS</h4></header>
200 <section class="sample-view">
201 <input type="text" required placeholder="Enter your name">
202 <input type="email" required placeholder="Enter your email">
203 <input type="text" placeholder="Optional field">
204 </section>
205 </section>
206 </article>
207 <article>
208 <h3>CSS Attribute Selector Example : a[href^="https://"]</h3>
209 <section>
210 <header><h4>CSS</h4></header>
211<pre class="sample">
212a[href^="http://"] {
213 color: orange;
214}
215
216a[href^="https://"] {
217 color: green;
218}
219</pre>
220 <header><h4>HTML</h4></header>
221<pre>
222<a href="http://example.com">HTTP Link</a>
223<a href="https://secure.example.com">HTTPS Link</a>
224<a href="/relative/path">Relative Link</a>
225</pre>
226 <header><h4>HTML+CSS</h4></header>
227 <section class="sample-view">
228 <a href="http://example.com">HTTP Link</a>
229 <a href="https://secure.example.com">HTTPS Link</a>
230 <a href="/relative/path">Relative Link</a>
231 </section>
232 </section>
233 </article>
234 <article>
235 <h3>Attribute Selectors</h3>
236 <section>
237 <header><h4>CSS</h4></header>
238<pre class="sample">
239img[src$=".png"] {
240 border: 2px solid blue;
241}
242
243img[src$=".jpg"] {
244 opacity: 0.5;
245}
246</pre>
247 <header><h4>HTML</h4></header>
248<pre>
249<img src="pattern.png" alt="PNG Image" width="100">
250<img src="document.jpg" alt="JPEG Image" width="100">
251</pre>
252 <header><h4>HTML+CSS</h4></header>
253 <section class="sample-view">
254 <img src="pattern.png" alt="PNG Image" width="100">
255 <img src="image.jpg" alt="JPEG Image" width="100">
256 </section>
257 </section>
258 </article>
259
260 </main>
261</body>
262</html>CSS में ऐट्रिब्यूट सेलेक्टर्स का विवरण
CSS एट्रिब्यूट सिलेक्टर्स का उपयोग उन HTML तत्वों का चयन करने के लिए किया जाता है जिनमें विशिष्ट एट्रिब्यूट्स होते हैं। यह आपको तत्वों को उनके एट्रिब्यूट मानों के आधार पर स्टाइल करने की अनुमति देता है। हम अब एट्रिब्यूट सिलेक्टर्स के उपयोग को बुनियादी से लेकर उन्नत स्तर तक चरण-दर-चरण समझाएंगे।
ऐट्रिब्यूट सेलेक्टर्स के प्रकार और सिंटैक्स
एट्रिब्यूट सिलेक्टर्स के विभिन्न प्रकार होते हैं। यहां, हम प्रत्येक प्रकार के सिलेक्टर को विस्तार से देखेंगे।
ऐट्रिब्यूट के साथ तत्वों का चयन करना
1a[target] {
2 font-weight: bold;
3}- एट्रिब्यूट नाम निर्दिष्ट करके, आप उन सभी तत्वों का चयन कर सकते हैं जिनमें निर्दिष्ट एट्रिब्यूट है।
- इस उदाहरण में, सभी
<a>तत्व जिनके पासtargetविशेषता है, उनके पाठ को बोल्ड किया गया है।
विशिष्ट ऐट्रिब्यूट मान वाले तत्वों का चयन करना
1input[type="text"] {
2 border: 2px solid green;
3}=का उपयोग करने से आप उन तत्वों का चयन कर सकते हैं जिनकी एट्रिब्यूट मान सटीक रूप से किसी विशिष्ट मान से मेल खाती है।- इस उदाहरण में, सभी
<input>तत्व जिनकेtypeएट्रिब्यूट का मान"text"है, उन पर एक हरी बॉर्डर लागू की जाएगी।
आंशिक ऐट्रिब्यूट मान मेल के साथ तत्वों का चयन करना
आप निम्नलिखित तीन सिलेक्टर्स का उपयोग करके एट्रिब्यूट मानों का आंशिक मिलान निर्दिष्ट कर सकते हैं।
- शुरू होता है (
^=)
1a[href^="https://"] {
2 font-weight: bold;
3}- उन तत्वों का चयन करता है जहाँ एट्रिब्यूट मान निर्दिष्ट स्ट्रिंग से शुरू होता है।
- इस उदाहरण में, वे सभी लिंक जिनके
hrefएट्रिब्यूट की शुरुआत"https://"से होती है, उन्हें बोल्ड किया जाएगा।
- खत्म होता है (
$=)
1img[src$=".jpg"] {
2 border-radius: 10px;
3}- उन तत्वों का चयन करता है जिनके एट्रिब्यूट मान निर्दिष्ट स्ट्रिंग के साथ समाप्त होते हैं।
- इस उदाहरण में, कोनों को घोलने वाले शैलियों को सभी छवियों पर लागू किया जाता है जिनकी
srcविशेषता.jpgपर समाप्त होती है।
- शामिल है (
*=)
1p[class*="highlight"] {
2 background-color: yellow;
3}- उन तत्वों का चयन करता है जिनकी विशेषता मान निर्दिष्ट स्ट्रिंग को सम्मिलित करती है।
- इस उदाहरण में, सभी
<p>तत्वों पर पीला पृष्ठभूमि रंग लागू किया जाता है जिनकीclassविशेषता"highlight"को सम्मिलित करती है।
वे तत्व चुनें जहां ऐट्रिब्यूट मान में एक स्पेस से अलग शब्द शामिल होता है (~=)
1div[class~="featured"] {
2 border: 1px solid red;
3}~=तत्वों का चयन करता है यदि विशेषता मान में सफेद स्थान से अलग शब्दों के बीच एक विशेष शब्द होता है।- इस उदाहरण में, सभी
<div>तत्वों पर लाल सीमा लागू की जाती है जिनकीclassविशेषता में शब्द"featured"शामिल होता है।
ऐसे तत्वों का चयन करना जहाँ एट्रिब्यूट मान एक हाइफ़न से शुरू होता है (|=)
1p[lang|="en"] {
2 font-style: italic;
3}|=तत्वों का चयन करता है यदि विशेषता मान निर्दिष्ट स्ट्रिंग से मेल खाती है या हाइफ़न के बाद उसी से शुरू होती है। यह मुख्य रूप से भाषा विशेषता (lang) के साथ उपयोग किया जाता है।- इस उदाहरण में, सभी
<p>तत्वों पर इटैलिक्स लागू किया जाता है जिनकीlangविशेषता"en"से शुरू होती है, जैसे"en"या"en-US"।
व्यावहारिक उदाहरण और अनुप्रयोग
आगे, आइए कुछ व्यावहारिक परिदृश्यों को देखें।
प्रपत्र इनपुट फ़ील्ड्स को स्टाइल करना
1input[required] {
2 background-color: #ffcccc;
3}
4
5input[placeholder] {
6 font-style: italic;
7 color: #999;
8}- इस उदाहरण में, सभी इनपुट फ़ील्ड्स पर लालिमा भरी पृष्ठभूमि रंग लागू की जाती है जिनमें
requiredविशेषता होती है, औरplaceholderविशेषता वाले इनपुट फ़ील्ड्स के प्लेसहोल्डर पाठ को इटैलिक्स और ब्लीक रंग के साथ स्टाइल किया गया है।
लिंक प्रोटोकॉल के आधार पर स्टाइल करना
1a[href^="http://"] {
2 color: orange;
3}
4
5a[href^="https://"] {
6 color: green;
7}- यहाँ,
http://से शुरू होने वाले लिंक नारंगी बनाए गए हैं, औरhttps://से शुरू होने वाले लिंक हरे बनाए गए हैं। यह सुरक्षित और असुरक्षित लिंक के बीच दृश्य भेदभाव की अनुमति देता है।
छवि प्रारूपों के आधार पर स्टाइल करना
1img[src$=".png"] {
2 border: 2px solid blue;
3}
4
5img[src$=".jpg"] {
6 opacity: 0.5;
7}- इस उदाहरण में,
.pngप्रारूप की छवियों के लिए एक नीली सीमा जोड़ी जाती है, और.jpgप्रारूप की छवियों के अपारदर्शिता को 50% पर सेट किया जाता है।
सारांश
CSS विशेषता चयनकर्ता HTML विशेषताओं के आधार पर तत्वों का चयन करने का एक लचीला और शक्तिशाली तरीका हैं। इन चयनकर्ताओं का उपयोग करने से अधिक विशिष्ट स्टाइलिंग की अनुमति मिलती है।
इस लेख में समझाई गई मूलभूत सिंटैक्स और लागू किए गए उदाहरणों का उपयोग करके अधिक उन्नत स्टाइलिंग को आसानी से प्राप्त करें।
आप हमारे YouTube चैनल पर Visual Studio Code का उपयोग करके ऊपर दिए गए लेख के साथ आगे बढ़ सकते हैं। कृपया YouTube चैनल को भी देखें।