Articles
CSS का परिचय
सीएसएस स्यूडो-क्लास और स्यूडो-एलिमेंट्स

सीएसएस स्यूडो-क्लास और स्यूडो-एलिमेंट्स

यह लेख CSS छद्म-क्लास और छद्म-तत्वों को समझाता है।

आप छद्म-क्लास जैसे :hover और छद्म-तत्व जैसे ::before के बारे में जान सकते हैं।

YouTube Video

प्रीव्यू के लिए HTML

css-pseudo.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-pseudo-class.css">
  9</head>
 10<body>
 11    <!-- Header -->
 12    <header>
 13        <h1>CSS Pseudo Class/Element</h1>
 14    </header>
 15
 16    <!-- Main content -->
 17    <main>
 18        <header><h2>Pseudo Class</h2></header>
 19        <article>
 20            <h3>:hover</h3>
 21            <section>
 22                <header><h4>CSS</h4></header>
 23<pre class="sample">
 24a:hover {
 25    color: red;
 26}
 27</pre>
 28                <header><h4>HTML</h4></header>
 29                <pre>&lt;a href="#"&gt;Example of hover&lt;/a&gt;</pre>
 30                <header><h4>HTML+CSS</h4></header>
 31                <section class="sample-view">
 32                    <a href="#">Example of hover</a><br>
 33                </section>
 34            </section>
 35        </article>
 36        <article>
 37            <h3>:focus</h3>
 38            <section>
 39                <header><h4>CSS</h4></header>
 40<pre class="sample">
 41input:focus {
 42    outline: 2px solid blue;
 43}
 44</pre>
 45                <header><h4>HTML</h4></header>
 46                <pre>&lt;input type="text" placeholder="Example of focus"&gt;</pre>
 47                <header><h4>HTML+CSS</h4></header>
 48                <section class="sample-view">
 49                    <input type="text" placeholder="Example of focus">
 50                </section>
 51            </section>
 52        </article>
 53        <article>
 54            <h3>:active</h3>
 55            <section>
 56                <header><h4>CSS</h4></header>
 57<pre class="sample">
 58button:active {
 59    background-color: green;
 60}
 61</pre>
 62                <header><h4>HTML</h4></header>
 63                <pre>&lt;button type="button"&gt;Example of active&lt;/button&gt;</pre>
 64                <header><h4>HTML+CSS</h4></header>
 65                <section class="sample-view">
 66                    <button type="button">Example of active</button>
 67                </section>
 68            </section>
 69        </article>
 70        <article>
 71            <h3>:empty</h3>
 72            <section>
 73                <header><h4>CSS</h4></header>
 74<pre class="sample">
 75.box:empty {
 76    background-color: lightgray;
 77    border: 1px dashed black;
 78    height: 50px;
 79    width: 50px;
 80}
 81</pre>
 82                <header><h4>HTML</h4></header>
 83<pre>
 84&lt;p class="box"&gt;&lt;/p&gt;
 85&lt;p class="box"&gt; &lt;/p&gt;
 86</pre>
 87                <header><h4>HTML+CSS</h4></header>
 88                <section class="sample-view">
 89                    <p class="box"></p>
 90                    <p class="box"> </p>
 91                </section>
 92            </section>
 93        </article>
 94        <article>
 95            <h3>:valid / :invalid</h3>
 96            <section>
 97                <header><h4>CSS</h4></header>
 98<pre class="sample">
 99input:valid {
100    border: 2px solid green;
101    background-color: #eaffea;
102}
103
104input:invalid {
105    border: 2px solid red;
106    background-color: #ffeaea;
107}
108</pre>
109                <header><h4>HTML</h4></header>
110<pre>
111&lt;form&gt;
112    &lt;label&gt;Username (min. 5 characters):&lt;/label&gt;
113    &lt;input type="text" pattern=".{5,}" required&gt;
114    &lt;button type="submit"&gt;Submit&lt;/button&gt;
115&lt;/form&gt;
116</pre>
117                <header><h4>HTML+CSS</h4></header>
118                <section class="sample-view">
119                    <form>
120                        <label>Username (min. 5 characters):</label>
121                        <input type="text" pattern=".{5,}" required>
122                        <button type="submit">Submit</button>
123                    </form>
124                </section>
125            </section>
126        </article>
127        <article>
128            <h3>:in-range / :out-of-range</h3>
129            <section>
130                <header><h4>CSS</h4></header>
131<pre class="sample">
132input[type="number"]:in-range {
133    border: 2px solid blue;
134    background-color: #eaf4ff;
135}
136
137input[type="number"]:out-of-range {
138    border: 2px solid orange;
139    background-color: #fff4e6;
140}
141</pre>
142                <header><h4>HTML</h4></header>
143<pre>
144&lt;form&gt;
145    &lt;label&gt;Age (between 18 and 99):&lt;/label&gt;
146    &lt;input type="number" min="18" max="99" required&gt;
147    &lt;button type="submit"&gt;Submit&lt;/button&gt;
148&lt;/form&gt;
149</pre>
150                <header><h4>HTML+CSS</h4></header>
151                <section class="sample-view">
152                    <form>
153                        <label>Age (between 18 and 99):</label>
154                        <input type="number" min="18" max="99" required>
155                        <button type="submit">Submit</button>
156                    </form>
157                </section>
158            </section>
159        </article>
160        <article>
161            <h3>:nth-child(n)</h3>
162            <section>
163                <header><h4>CSS</h4></header>
164<pre class="sample">
165li:nth-child(2) {
166    color: blue;
167    font-weight: bold;
168}
169
170li:nth-child(odd) {
171    background-color: lightblue;
172}
173
174li:nth-child(even) {
175    background-color: steelblue;
176}
177</pre>
178                <header><h4>HTML</h4></header>
179<pre>
180&lt;ul&gt;
181    &lt;li&gt;First Item&lt;/li&gt;
182    &lt;li&gt;Second Item&lt;/li&gt;
183    &lt;li&gt;Third Item&lt;/li&gt;
184    &lt;li&gt;Fourth Item&lt;/li&gt;
185&lt;/ul&gt;
186</pre>
187                <header><h4>HTML+CSS</h4></header>
188                <section class="sample-view">
189                    <ul>
190                        <li>First Item</li>
191                        <li>Second Item</li>
192                        <li>Third Item</li>
193                        <li>Fourth Item</li>
194                    </ul>
195                </section>
196            </section>
197        </article>
198        <article>
199            <h3>:first-child</h3>
200            <section>
201                <header><h4>CSS</h4></header>
202<pre class="sample">
203small:first-child {
204    font-weight: bold;
205    color: steelblue;
206}
207</pre>
208                <header><h4>HTML</h4></header>
209<pre>
210    &lt;small&gt;First Small Text&lt;/small&gt;&lt;br&gt;
211    &lt;small&gt;Second Small Text&lt;/small&gt;&lt;br&gt;
212    &lt;small&gt;Third Small Text&lt;/small&gt;
213</pre>
214                <header><h4>HTML+CSS</h4></header>
215                <section class="sample-view">
216                    <small>First Small Text</small><br>
217                    <small>Second Small Text</small><br>
218                    <small>Third Small Text</small>
219                </section>
220            </section>
221        </article>
222        <article>
223            <h3>:last-child</h3>
224            <section>
225                <header><h4>CSS</h4></header>
226<pre class="sample">
227small:last-child {
228    font-weight: bold;
229    color: seagreen;
230}
231</pre>
232                <header><h4>HTML</h4></header>
233<pre>
234    &lt;small&gt;First Small Text&lt;/small&gt;&lt;br&gt;
235    &lt;small&gt;Second Small Text&lt;/small&gt;&lt;br&gt;
236    &lt;small&gt;Third Small Text&lt;/small&gt;
237</pre>
238                <header><h4>HTML+CSS</h4></header>
239                <section class="sample-view">
240                    <small>First Small Text</small><br>
241                    <small>Second Small Text</small><br>
242                    <small>Third Small Text</small>
243                </section>
244            </section>
245        </article>
246        <article>
247            <h3>:has()</h3>
248            <section>
249                <header><h4>CSS</h4></header>
250<pre class="sample">
251p:has(span.child) {
252    border: 2px solid black;
253}
254</pre>
255                <header><h4>HTML</h4></header>
256<pre>
257&lt;p&gt;Paragraph with &lt;span class="child"&gt;span element&lt;/span&gt;&lt;/p&gt;
258&lt;p&gt;Paragraph without span element&lt;/p&gt;
259</pre>
260                <header><h4>HTML+CSS</h4></header>
261                <section class="sample-view">
262                    <p>Paragraph with <span class="child">span element</span></p>
263                    <p>Paragraph without span element</p>
264                </section>
265            </section>
266        </article>
267        <article>
268            <h3>:not()</h3>
269            <section>
270                <header><h4>CSS</h4></header>
271<pre class="sample">
272q:not(.quote2) {
273    font-weight: bold;
274    color: steelblue;
275}
276</pre>
277                <header><h4>HTML</h4></header>
278<pre>
279    &lt;q class="quote1"&gt;First Quote&lt;/q&gt;&lt;br&gt;
280    &lt;q class="quote2"&gt;Second Quote&lt;/q&gt;&lt;br&gt;
281    &lt;q class="quote3"&gt;Third Quote&lt;/q&gt;
282</pre>
283                <header><h4>HTML+CSS</h4></header>
284                <section class="sample-view">
285                    <q class="quote1">First Quote</q><br>
286                    <q class="quote2">Second Quote</q><br>
287                    <q class="quote3">Third Small Text</q>
288                </section>
289            </section>
290        </article>
291        <article>
292            <h3>:where() / :is()</h3>
293            <section>
294                <header><h4>CSS</h4></header>
295<pre class="sample">
296:where(p, .detail) span {
297    color: darkcyan;
298    text-decoration: line-through;
299}
300:is(p, .detail) span {
301    font-style: italic;
302}
303p span {
304    text-decoration: none; /* Applied */
305    font-style: normal; /* Not Applied */
306}
307</pre>
308                <header><h4>HTML</h4></header>
309<pre>
310&lt;p class="detail"&gt;This is a &lt;span&gt;paragraph&lt;/span&gt; with the "detail" class.&lt;/p&gt;
311&lt;p&gt;This is a &lt;span&gt;paragraph&lt;/span&gt; without the "detail" class.&lt;/p&gt;
312</pre>
313                <header><h4>HTML+CSS</h4></header>
314                <section class="sample-view">
315                    <p class="detail">This is a <span>paragraph</span> with the "detail" class.</p>
316                    <p>This is a <span>paragraph</span> without the "detail" class.</p>
317                </section>
318            </section>
319        </article>
320        <article>
321            <h3>:checked</h3>
322            <section>
323                <header><h4>CSS</h4></header>
324<pre class="sample">
325input:checked {
326    outline: 4px solid red;
327}
328</pre>
329                <header><h4>HTML</h4></header>
330<pre>
331    &lt;label&gt;&lt;input type="checkbox"&gt;First Checkbox&lt;/label&gt;
332    &lt;label&gt;&lt;input type="checkbox"&gt;Second Checkbox&lt;/label&gt;
333</pre>
334                <header><h4>HTML+CSS</h4></header>
335                <section class="sample-view">
336                    <label><input type="checkbox">First Checkbox</label>
337                    <label><input type="checkbox">Second Checkbox</label>
338                </section>
339            </section>
340        </article>
341        <article>
342            <h3>:disabled</h3>
343            <section>
344                <header><h4>CSS</h4></header>
345<pre class="sample">
346button:disabled {
347    background-color: gray;
348    cursor: not-allowed;
349}
350</pre>
351                <header><h4>HTML</h4></header>
352                <pre>&lt;button type="button" disabled&gt;Example of active&lt;/button&gt;</pre>
353                <header><h4>HTML+CSS</h4></header>
354                <section class="sample-view">
355                    <button type="button" disabled>Example of active</button>
356                </section>
357            </section>
358        </article>
359        <article>
360            <h3>:visited</h3>
361            <section>
362                <header><h4>CSS</h4></header>
363<pre class="sample">
364.link:visited {
365    color: purple;
366}
367</pre>
368                <header><h4>HTML</h4></header>
369                <pre>&lt;a href="https://example.com" class="link"&gt;Example&lt;/a&gt;</pre>
370                <header><h4>HTML+CSS</h4></header>
371                <section class="sample-view">
372                    <a href="https://example.com" class="link">Example</a>
373                </section>
374            </section>
375        </article>
376        <article>
377            <h3>:first-of-type</h3>
378            <section>
379                <header><h4>CSS</h4></header>
380<pre class="sample">
381.first-example :first-of-type {
382    font-weight: bold;
383    color: steelblue;
384}
385</pre>
386                <header><h4>HTML</h4></header>
387<pre>
388&lt;p class="first-example"&gt;
389    &lt;var&gt;First Variable&lt;/var&gt;, &lt;code&gt;First Code Snippet&lt;/code&gt;&lt;br&gt;
390    &lt;var&gt;Second Variable&lt;/var&gt;, &lt;code&gt;Second Code Snippet&lt;/code&gt;&lt;br&gt;
391    &lt;var&gt;Third Variable&lt;/var&gt;, &lt;code&gt;Third Code Snippet&lt;/code&gt;
392&lt;/p&gt;
393</pre>
394                <header><h4>HTML+CSS</h4></header>
395                <section class="sample-view">
396                    <p class="first-example">
397                        <var>First Variable</var>, <code>First Code Snippet</code><br>
398                        <var>Second Variable</var>, <code>Second Code Snippet</code><br>
399                        <var>Third Variable</var>, <code>Third Code Snippet</code>
400                    </p>
401                </section>
402            </section>
403        </article>
404        <article>
405            <h3>:last-of-type</h3>
406            <section>
407                <header><h4>CSS</h4></header>
408<pre class="sample">
409.last-example :last-of-type {
410    font-weight: bold;
411    color: seagreen;
412}
413</pre>
414                <header><h4>HTML</h4></header>
415<pre>
416&lt;p class="last-example"&gt;
417    &lt;var&gt;First Variable&lt;/var&gt;, &lt;code&gt;First Code Snippet&lt;/code&gt;&lt;br&gt;
418    &lt;var&gt;Second Variable&lt;/var&gt;, &lt;code&gt;Second Code Snippet&lt;/code&gt;&lt;br&gt;
419    &lt;var&gt;Third Variable&lt;/var&gt;, &lt;code&gt;Third Code Snippet&lt;/code&gt;
420&lt;/p&gt;
421</pre>
422                <header><h4>HTML+CSS</h4></header>
423                <section class="sample-view">
424                    <p class="last-example">
425                        <var>First Variable</var>, <code>First Code Snippet</code><br>
426                        <var>Second Variable</var>, <code>Second Code Snippet</code><br>
427                        <var>Third Variable</var>, <code>Third Code Snippet</code>
428                    </p>
429                </section>
430            </section>
431        </article>
432        <article>
433            <h3>:nth-of-type(n)</h3>
434            <section>
435                <header><h4>CSS</h4></header>
436<pre class="sample">
437.nth-example :nth-of-type(2) {
438    font-weight: bold;
439    color: lightsalmon;
440}
441</pre>
442                <header><h4>HTML</h4></header>
443<pre>
444&lt;p class="nth-example"&gt;
445    &lt;var&gt;First Variable&lt;/var&gt;, &lt;code&gt;First Code Snippet&lt;/code&gt;&lt;br&gt;
446    &lt;var&gt;Second Variable&lt;/var&gt;, &lt;code&gt;Second Code Snippet&lt;/code&gt;&lt;br&gt;
447    &lt;var&gt;Third Variable&lt;/var&gt;, &lt;code&gt;Third Code Snippet&lt;/code&gt;
448&lt;/p&gt;
449</pre>
450                <header><h4>HTML+CSS</h4></header>
451                <section class="sample-view">
452                    <p class="nth-example">
453                        <var>First Variable</var>, <code>First Code Snippet</code><br>
454                        <var>Second Variable</var>, <code>Second Code Snippet</code><br>
455                        <var>Third Variable</var>, <code>Third Code Snippet</code>
456                    </p>
457                </section>
458            </section>
459        </article>
460
461        <header><h2>Pseudo Element</h2></header>
462        <article>
463            <h3>::before</h3>
464            <section>
465                <header><h4>CSS</h4></header>
466<pre class="sample">
467span.note::before {
468    content: "Note: ";
469    color: red;
470}
471</pre>
472                <header><h4>HTML</h4></header>
473                <pre>&lt;span class="note"&gt;Example Text&lt;/span&gt;</pre>
474                <header><h4>HTML+CSS</h4></header>
475                <section class="sample-view">
476                    <span class="note">Example Text</a><br>
477                </section>
478            </section>
479        </article>
480        <article>
481            <h3>::after</h3>
482            <section>
483                <header><h4>CSS</h4></header>
484<pre class="sample">
485span.five-stars::after {
486    content: "*****";
487    color: gold;
488}
489</pre>
490                <header><h4>HTML</h4></header>
491                <pre>&lt;span class="five-stars"&gt;Example Text&lt;/span&gt;</pre>
492                <header><h4>HTML+CSS</h4></header>
493                <section class="sample-view">
494                    <span class="five-stars">Example Text</a>
495                </section>
496            </section>
497        </article>
498        <article>
499            <h3>::placeholder</h3>
500            <section>
501                <header><h4>CSS</h4></header>
502<pre class="sample">
503input::placeholder {
504    color: rgba(0, 150, 150, 0.7);
505    font-size: 14px;
506    font-style: italic;
507}
508</pre>
509                <header><h4>HTML</h4></header>
510                <pre>&lt;input type="text" placeholder="Enter your name"&gt;</pre>
511                <header><h4>HTML+CSS</h4></header>
512                <section class="sample-view">
513                    <input type="text" placeholder="Enter your name">
514                </section>
515            </section>
516        </article>
517        <article>
518            <h3>::first-letter</h3>
519            <section>
520                <header><h4>CSS</h4></header>
521<pre class="sample">
522p.first::first-letter {
523    font-size: 2em;
524    color: blue;
525}
526</pre>
527                <header><h4>HTML</h4></header>
528<pre>
529&lt;p class="first"&gt;
530    &lt;span&gt;First Text&lt;/span&gt;&lt;br&gt;
531    &lt;span&gt;Second Text&lt;/span&gt;&lt;br&gt;
532    &lt;span&gt;Third Text&lt;/span&gt;
533&lt;/p&gt;
534</pre>
535                <header><h4>HTML+CSS</h4></header>
536                <section class="sample-view">
537                    <p class="first">
538                        <span>First Text</span><br>
539                        <span>Second Text</span><br>
540                        <span>Third Text</span>
541                    </p>
542                </section>
543<pre class="sample-error">
544/* Not Valid: `::first-letter` can only be applied to
545              block-level elements */
546span::first-letter {
547    font-size: 2em;
548    color: red;
549}
550</pre>
551            </section>
552        </article>
553        <article>
554            <h3>::first-line</h3>
555            <section>
556                <header><h4>CSS</h4></header>
557<pre class="sample">
558p.second::first-line {
559    font-weight: bold;
560    color: green;
561}
562</pre>
563                <header><h4>HTML</h4></header>
564<pre>
565&lt;p class="second"&gt;
566    First Text&lt;br&gt;
567    Second Text&lt;br&gt;
568    Third Text
569&lt;/p&gt;
570</pre>
571                <header><h4>HTML+CSS</h4></header>
572                <section class="sample-view">
573                    <p class="second">
574                        First Text<br>
575                        Second Text<br>
576                        Third Text
577                    </p>
578                </section>
579<pre class="sample-error">
580/* Not Valid: `::first-line` can only be applied to block-level elements */
581span::first-line {
582    font-size: 2em;
583    color: red;
584}
585</pre>
586            </section>
587        </article>
588        <article>
589            <h3>::selection</h3>
590            <section>
591                <header><h4>CSS</h4></header>
592<pre class="sample">
593span::selection {
594    background-color: yellow;
595    color: black;
596}
597</pre>
598                <header><h4>HTML</h4></header>
599<pre>
600&lt;p&gt;
601    &lt;span&gt;First Text&lt;/span&gt;&lt;br&gt;
602    &lt;span&gt;Second Text&lt;/span&gt;&lt;br&gt;
603    &lt;span&gt;Third Text&lt;/span&gt;
604&lt;/p&gt;
605</pre>
606                <header><h4>HTML+CSS</h4></header>
607                <section class="sample-view">
608                    <p>
609                        <span>First Text</span><br>
610                        <span>Second Text</span><br>
611                        <span>Third Text</span>
612                    </p>
613                </section>
614            </section>
615        </article>
616    </main>
617</body>
618</html>

स्यूडो-क्लास

CSS छद्म-वर्ग विशेष स्थितियों जैसे तत्व की अवस्थाओं या पदानुक्रम के आधार पर तत्वों पर शैलियाँ लागू करने के लिए कार्य होते हैं। वे आपको तत्वों की अवस्थाओं या स्थानों के आधार पर विशेष शैलियाँ जोड़ने की अनुमति देते हैं, जिससे ये गतिशील परिस्थितियों का प्रतिनिधित्व करने के लिए उपयोगी बन जाते हैं जिन्हें सामान्य वर्गों या आईडी द्वारा निर्दिष्ट नहीं किया जा सकता। छद्म-वर्ग विशेष स्थितियों के आधार पर गतिशील यूआई और शैलियाँ लागू करने में आसान बनाते हैं, जिससे ऐसे डिज़ाइन का सक्षम होता है जो उपयोगकर्ता की बातचीत या सामग्री संरचना का प्रत्युत्तर देता है।

स्यूडो-क्लास की मूल संरचना

छद्म-क्लास का मूल सिंटेक्स इस प्रकार है।

1selector:pseudo-class {
2    /* Styles */
3}
  • selector लक्षित तत्व है।
  • pseudo-class भाग एक छद्म-वर्ग का प्रतिनिधित्व करता है जो एक विशेष अवस्था या स्थिति इंगित करता है।
  • : का उपयोग स्यूडो-क्लासेस को चुनने के लिए किया जाता है।

सामान्यतः उपयोग की जाने वाली स्यूडो-क्लास

:hover 

1a:hover {
2    color: red;
3}
  • :hover तब शैलियाँ लागू करता है जब माउस कर्सर किसी तत्व पर मँडराता है।
  • इस उदाहरण में, जब माउस किसी लिंक पर मँडराता है, तो पाठ का रंग लाल हो जाता है।

:focus 

1input:focus {
2    outline: 2px solid blue;
3}
  • :focus तब शैलियाँ लागू करता है जब कोई तत्व फोकस प्राप्त करता है। यह मुख्यतः फ़ॉर्म तत्वों और लिंक के लिए उपयोग किया जाता है।
  • इस उदाहरण में, जब कोई input तत्व फोकस होता है, तो एक नीली रूपरेखा दिखाई देती है।

:active 

1button:active {
2    background-color: green;
3}
  • :active तब शैलियाँ लागू करता है जब कोई तत्व सक्रिय होता है (जब उस पर क्लिक किया जा रहा होता है)।
  • इस उदाहरण में, जब बटन पर क्लिक किया जा रहा होता है, तो पृष्ठभूमि का रंग हरा हो जाता है।

:empty 

1.box:empty {
2    background-color: lightgray;
3    border: 1px dashed black;
4    height: 50px;
5    width: 50px;
6}
  • :empty छद्म-क्लास का उपयोग ऐसे तत्वों पर स्टाइल लागू करने के लिए किया जाता है जिनके कोई चाइल्ड एलिमेंट नहीं होते हैं। लक्षित तत्व में टेक्स्ट नोड्स, व्हाइटस्पेस, या टिप्पणियाँ (कमेंट्स) नहीं होनी चाहिए।
  • इस उदाहरण में, यदि एक box क्लास वाला तत्व कुछ नहीं रखता है, तो उस तत्व पर ग्रे बैकग्राउंड और काली डैश्ड बॉर्डर लागू की जाती है। यदि व्हाइटस्पेस मौजूद हो, तो स्टाइल लागू नहीं होती है।

:valid / :invalid 

1input:valid {
2    border: 2px solid green;
3    background-color: #eaffea;
4}
5
6input:invalid {
7    border: 2px solid red;
8    background-color: #ffeaea;
9}

  • :valid एक शैली है जो मान्य इनपुट मानों वाली फ़ॉर्म तत्वों पर लागू होती है। :valid शैली तब लागू होती है जब HTML विशेषताएँ जैसे pattern या type (जैसे, email) द्वारा निर्दिष्ट शर्तें पूरी होती हैं।

  • :invalid एक शैली है जो अमान्य इनपुट मानों वाली फ़ॉर्म तत्वों पर लागू होती है। :invalid शैली तब लागू होती है जब कोई फ़ॉर्म तत्व HTML सत्यापन नियमों (जैसे, type="email") का पालन नहीं करता।

  • इस उदाहरण में, यदि दर्ज किया गया पाठ 5 या उससे अधिक वर्ण लंबा है, जैसा कि pattern विशेषता द्वारा निर्दिष्ट है, तो एक हरी सीमा दिखाई जाती है। यदि दर्ज किया गया पाठ 5 वर्णों से कम है, तो एक लाल सीमा दिखाई जाती है।

:in-range / :out-of-range 

1input[type="number"]:in-range {
2    border: 2px solid blue;
3    background-color: #eaf4ff;
4}
5
6input[type="number"]:out-of-range {
7    border: 2px solid orange;
8    background-color: #fff4e6;
9}

  • :in-range एक शैली है जो लागू होती है जब किसी न्यूमेरिक इनपुट तत्व में निर्दिष्ट रेंज के भीतर मान होता है। :in-range शैली तब लागू होती है जब HTML में min और max गुणों द्वारा निर्दिष्ट शर्तें पूरी हो जाती हैं।

  • :out-of-range एक शैली है जो लागू होती है जब किसी न्यूमेरिक इनपुट तत्व में निर्दिष्ट रेंज के बाहर मान होता है। :out-of-range शैली तब लागू होती है जब मान min या max गुणों द्वारा निर्दिष्ट रेंज को पार कर जाता है।

  • इस उदाहरण में, जब min="18" और max="99" गुणों (18 से 99 सहित) द्वारा निर्दिष्ट रेंज के भीतर एक मान दर्ज किया जाता है, तो एक नीली बॉर्डर प्रदर्शित होती है। जब रेंज के बाहर का एक मान दर्ज किया जाता है, तो एक नारंगी बॉर्डर प्रदर्शित होती है।

:nth-child() 

1li:nth-child(2) {
2    color: blue;
3    font-weight: bold;
4}
  • :nth-child() माता-पिता के भीतर किसी संतान तत्व की स्थिति के आधार पर शैलियाँ लागू करता है। आप n के लिए एक संख्या या एक अभिव्यक्ति निर्दिष्ट कर सकते हैं।
  • इस उदाहरण में, दूसरी सूची का वस्तु का पाठ नीला हो जाता है।
विषम और सम तत्वों पर लागू करना 
1li:nth-child(odd) {
2    background-color: lightblue;
3}
4
5li:nth-child(even) {
6    background-color: steelblue;
7}
  • द।
  • इस उदाहरण में, सम और विषम पंक्तियों पर विभिन्न पृष्ठभूमि रंग लागू किए गए हैं। इसे धारीदार तालिका डिज़ाइन के लिए इस्तेमाल किया जा सकता है, उदाहरण के लिए।

:first-child 

1small:first-child {
2    font-weight: bold;
3    color: steelblue;
4}
  • :first-child माता-पिता के पहले बच्चे तत्व पर स्टाइल लागू करता है।
  • इस उदाहरण में, पहले small तत्व का टेक्स्ट नीले रंग की छाया के साथ बोल्ड स्टाइल में है।

:last-child 

1small:last-child {
2    font-weight: bold;
3    color: seagreen;
4}
  • :last-child माता-पिता के अंतिम बच्चे तत्व पर स्टाइल लागू करता है।
  • इस उदाहरण में, अंतिम small तत्व का टेक्स्ट हरे रंग की छाया के साथ बोल्ड स्टाइल में है।

:has() 

1p:has(span.child) {
2    border: 2px solid black;
3}
  • CSS में :has() छद्म-क्लास पैरेंट सेलेक्टर के रूप में कार्य करता है। इस छद्म-क्लास का उपयोग करके, आप चाइल्ड एलिमेंट्स की उपस्थिति के आधार पर एक पैरेंट एलिमेंट का चयन कर सकते हैं।
  • इस उदाहरण में, border को उन p तत्वों पर लागू किया गया है जो .child क्लास वाले span तत्वों को समाहित करते हैं।

:not() 

1q:not(.quote2) {
2    font-weight: bold;
3    color: steelblue;
4}
  • :not() उन तत्वों पर स्टाइल लागू करता है जो विशिष्ट शर्तों को पूरा नहीं करते हैं।
  • इस उदाहरण में, quote2 क्लास वाले तत्वों को छोड़कर, q तत्वों के टेक्स्ट को नीले रंग की छाया के साथ बोल्ड स्टाइल में लागू किया गया है।

:where() / :is() 

 1:where(p, .detail) span {
 2    color: darkcyan;
 3    text-decoration: line-through;
 4}
 5:is(p, .detail) span {
 6    font-style: italic;
 7}
 8p span {
 9    text-decoration: none; /* Applied */
10    font-style: normal; /* Not Applied */
11}
  • :where() छद्म-क्लास एक विशेष CSS सेलेक्टर है जो विशिष्टता को शून्य पर सेट करता है। यह तब उपयोगी होता है जब आप कई सेलेक्टरों को सामूहिक रूप से नियंत्रित करना चाहते हैं और चयनित तत्वों की विशिष्टता पर प्रभाव डाले बिना स्टाइल लागू कर सकते हैं।
  • :is() छद्म-क्लास कई सेलेक्टरों को समूहित करता है और उन तत्वों को चुनता है जो किसी भी शर्त से मेल खाते हैं। :is() छद्म-क्लास स्वयं सामान्य सेलेक्टरों के समान विशिष्टता रखता है, लेकिन यह आंतरिक सेलेक्टरों में सबसे अधिक विशिष्टता के आधार पर स्टाइल लागू करता है।
  • इस उदाहरण में, :where() और :is() का उपयोग detail क्लास के अंदर <p> तत्वों और <span> तत्वों पर स्टाइल लागू करने के लिए किया गया है। :where() द्वारा सेट किया गया text-decoration स्टाइल बाद की CSS द्वारा ओवरराइड कर दिया जाता है। हालाँकि, :is() द्वारा सेट किया गया स्टाइल उच्च विशिष्टता रखता है और इसे बाद की CSS द्वारा ओवरराइड नहीं किया जाता है।

:checked 

1input:checked {
2    outline: 4px solid red;
3}
  • :checked स्टाइल लागू करता है जब एक चेकबॉक्स या रेडियो बटन चुना जाता है।
  • इस उदाहरण में, जाँच किए गए (चेक्ड) इनपुट तत्व पर लाल बॉर्डर प्रदर्शित होती है।

:disabled 

1button:disabled {
2    background-color: gray;
3    cursor: not-allowed;
4}
  • :disabled अक्षम फॉर्म तत्वों पर स्टाइल लागू करता है।
  • इस उदाहरण में, अक्षम बटन पर एक ग्रे पृष्ठभूमि और 'not-allowed' कर्सर लागू किया गया है।

:visited 

1.link:visited {
2    color: purple;
3}
  • :visited का उपयोग विज़िट किए गए लिंक पर स्टाइल लागू करने के लिए किया जाता है।
  • इस उदाहरण में, किसी लिंक पर क्लिक करने और उसे विज़िट करने के बाद <a> तत्व का टेक्स्ट रंग बैंगनी हो जाता है।
गोपनीयता और शैली सीमाएं

:visited में गोपनीयता सुरक्षा कारणों से कुछ स्टाइल सीमाएँ होती हैं। यह बाहरी साइट्स को उपयोगकर्ता की विज़िट हिस्ट्री का अनुमान लगाने से रोकता है। :visited का उपयोग करके बदली जा सकने वाली गुणधर्म निम्नलिखित तक सीमित हैं:।

color
background-color
border-color
outline-color
column-rule-color
text-decoration-color
fill
stroke

दूसरी ओर, इन संपत्तियों के अलावा अन्य गुण (जैसे, display, visibility, position, आदि) को :visited के साथ बदला नहीं जा सकता। यह उपयोगकर्ता की गोपनीयता को विज़िट इतिहास के माध्यम से लीक होने से रोकता है।

:first-of-type 

1.first-example :first-of-type {
2    font-weight: bold;
3    color: steelblue;
4}
  • :first-of-type अपने पैरेंट एलिमेंट के अंदर उसी प्रकार (समान टैग नाम) के पहले तत्व को चुनता है।
  • इस उदाहरण में, first-example क्लास में पहले <var> एलिमेंट और <code> एलिमेंट का टेक्स्ट बोल्ड नीले रंग में स्टाइल किया गया है।

:last-of-type 

1.last-example :last-of-type {
2    font-weight: bold;
3    color: seagreen;
4}
  • :last-of-type अपने पैरेंट एलिमेंट के अंदर उसी प्रकार के अंतिम तत्व को चुनता है।
  • इस उदाहरण में, last-example क्लास में अंतिम <var> एलिमेंट और <code> एलिमेंट का टेक्स्ट बोल्ड हरे रंग में स्टाइल किया गया है।

:nth-of-type() 

1.nth-example :nth-of-type(2) {
2    font-weight: bold;
3    color: lightsalmon;
4}
  • :nth-of-type() समान प्रकार के तत्वों के एनवां आवृत्ति पर शैली लागू करता है।
  • इस उदाहरण में, nth-example क्लास में दूसरे <var> एलिमेंट और <code> एलिमेंट का टेक्स्ट बोल्ड नारंगी रंग में स्टाइल किया गया है।

छद्म-तत्व

CSS में छद्म-तत्व चयनित तत्व के विशेष भागों पर शैली लागू करने के लिए उपयोग किए जाते हैं। छद्म-वर्गों के विपरीत, छद्म-तत्व तत्व के विशेष भागों पर ध्यान केंद्रित करते हैं, संपूर्ण तत्व पर नहीं। उदाहरण के लिए, इन्हें तत्व के पहले या बाद में सामग्री जोड़ने या विशिष्ट चरित्रों या लाइनों पर शैली लागू करने के लिए उपयोग किया जाता है।

छद्म-तत्वों की मौलिक शिंरचना

छद्म-तत्व सामान्यतः चयनकर्ता के बाद :: (दोहरा कॉलन) के साथ लिखे जाते हैं। यह उन्हें छद्म-वर्गों से अलग करने के लिए है।

1selector::pseudo-element {
2    /* Styles */
3}
  • selector लक्षित तत्व है।
  • pseudo-element भाग एक छद्म-तत्व का प्रतिनिधित्व करता है जो तत्व के किसी विशिष्ट भाग या पहलू को संदर्भित करता है।
  • आप :: का उपयोग करके एक छद्म-तत्व निर्दिष्ट कर सकते हैं।

आम तौर पर उपयोग किए जाने वाले छद्म-तत्व

::before 

1span.note::before {
2    content: "Note: ";
3    color: red;
4}

  • ::before एक तत्व की सामग्री से पहले आभासी सामग्री डालता है और उस भाग पर शैली लागू करता है। यह उदाहरण के लिए प्रतीकों या लेबल डालने के लिए उपयोगी है।

  • इस उदाहरण में, note क्लास वाले <span> तत्वों से पहले "नोट:" टेक्स्ट जोड़ा गया है। यहां निर्दिष्ट सामग्री वास्तविक HTML में मौजूद नहीं होती; इसे CSS के माध्यम से आभासी रूप से जोड़ा जाता है। इसका मतलब है कि आप जावास्क्रिप्ट आदि के माध्यम से जोड़े गए सामग्री को सीधे नियंत्रित नहीं कर सकते।

::after 

1span.five-stars::after {
2    content: "*****";
3    color: gold;
4}
  • ::after एक तत्व की सामग्री के बाद आभासी सामग्री डालता है। यह आमतौर पर किसी तत्व के बाद पूरक या सजावटी सामग्री जोड़ने के लिए उपयोग किया जाता है।
  • इस उदाहरण में, five-stars क्लास वाले <span> तत्व के बाद एक सुनहरा सितारा चिह्न जोड़ा गया है।

::placeholder 

1input::placeholder {
2    color: rgba(0, 150, 150, 0.7);
3    font-size: 14px;
4    font-style: italic;
5}
  • ::placeholder प्यूसडो-एलिमेंट का उपयोग फ़ॉर्म एलिमेंट्स में प्लेसहोल्डर टेक्स्ट को स्टाइल करने के लिए किया जाता है। डिफ़ॉल्ट रूप से, इसे आमतौर पर हल्के ग्रे टेक्स्ट में दिखाया जाता है, लेकिन ::placeholder प्यूसडो-एलिमेंट के साथ, आप इसे अपने डिज़ाइन से मेल खाने के लिए स्टाइल बदल सकते हैं।
  • इस उदाहरण में, input एलिमेंट के प्लेसहोल्डर टेक्स्ट का रंग 70% ट्रांसपेरेंट नीला, फॉन्ट आकार 14px, और टेक्स्ट को इटैलिक स्टाइल में सेट किया गया है।

::first-letter 

1p.first::first-letter {
2    font-size: 2em;
3    color: blue;
4}
  • ::first-letter किसी ब्लॉक-लेवल एलिमेंट के पहले अक्षर पर स्टाइल लागू करता है। इसका उपयोग टाइपोग्राफिक प्रभावों के लिए किया जाता है जैसे कि पत्रिकाओं या समाचार पत्रों में देखा जाता है, जहाँ पहले अक्षर को विशेष रूप से महत्वपूर्ण बनाया जाता है। ध्यान दें कि यह प्यूसडो-एलिमेंट केवल ब्लॉक-लेवल एलिमेंट्स पर प्रभावी है और इसे सीधे इनलाइन एलिमेंट्स जैसे <span> पर लागू नहीं किया जा सकता।
  • इस उदाहरण में, पैराग्राफ का पहला अक्षर आकार में दोगुना, बोल्ड और नीला होगा।

::first-line 

1p.second::first-line {
2    font-weight: bold;
3    color: green;
4}
  • ::first-line किसी ब्लॉक एलिमेंट की पहली पंक्ति पर स्टाइल लागू करता है। इसे विशेष रूप से टेक्स्ट पैराग्राफ के लिए उपयोग किया जाता है, जिससे आप पहली पंक्ति पर विभिन्न स्टाइल लागू कर सकते हैं।
  • इस उदाहरण में, पैराग्राफ की पहली पंक्ति बोल्ड और हरी होगी।

::selection 

1span::selection {
2    background-color: yellow;
3    color: black;
4}
  • ::selection उपयोगकर्ता द्वारा चयनित (हाइलाइटेड) टेक्स्ट के हिस्से पर स्टाइल लागू करता है। इसके साथ, आप टेक्स्ट चयनित होने पर बैकग्राउंड रंग और टेक्स्ट रंग बदल सकते हैं।
  • इस उदाहरण में, जब <span> एलिमेंट के टेक्स्ट को चयनित किया जाता है, तो बैकग्राउंड पीला हो जाता है और टेक्स्ट काला हो जाता है।

आप हमारे YouTube चैनल पर Visual Studio Code का उपयोग करके ऊपर दिए गए लेख के साथ आगे बढ़ सकते हैं। कृपया YouTube चैनल को भी देखें।

YouTube Video

CSS में विशेष वर्ण और फ़ंक्शनसीएसएस `@` नियम