Articles
সিএসএস-এর পরিচিতি
CSS ছদ্ম-ক্লাস এবং ছদ্ম-উপাদান

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 ছদ্ম-ক্লাস হল ফাংশন যা নির্দিষ্ট শর্ত যেমন উপাদানের অবস্থা বা শ্রেণীবিন্যাসের উপর ভিত্তি করে স্টাইল প্রয়োগ করে। এগুলি উপাদানের অবস্থা বা অবস্থানের উপর ভিত্তি করে বিশেষ স্টাইল যোগ করার অনুমতি দেয়, যা নিয়মিত ক্লাস বা আইডি দ্বারা নির্দিষ্ট করা যায় না এমন গতিশীল পরিস্থিতির প্রতিনিধিত্বের জন্য এটি কার্যকর করে তোলে। ছদ্ম-ক্লাসগুলি নির্দিষ্ট শর্তের উপর ভিত্তি করে গতিশীল UI এবং স্টাইলিং বাস্তবায়নকে সহজ করে তোলে, যা ব্যবহারকারীর ইন্টারঅ্যাকশন বা কন্টেন্ট গঠনের প্রতি সাড়া দেয় এমন ডিজাইন সক্রিয় করে।

ছদ্ম-ক্লাসের মৌলিক সিনট্যাক্স

পসুডো-ক্লাসের প্রাথমিক সিনট্যাক্স নিম্নরূপ।

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 স্টাইল প্রয়োগ করা হয় যখন pattern বা type (যেমন, email) এর মতো HTML বৈশিষ্ট্য দ্বারা নির্ধারিত শর্ত পূরণ হয়।

  • :invalid হল একটি স্টাইল যা ভুল ইনপুট মান সহ ফর্ম উপাদানগুলিতে প্রয়োগ করা হয়। :invalid স্টাইল প্রয়োগ করা হয় যখন একটি ফর্ম উপাদান HTML ভ্যালিডেশন নিয়মগুলি পূরণ করে না (যেমন, type="email")।

  • এই উদাহরণে, একটি সবুজ বর্ডার প্রদর্শিত হয় যদি প্রবেশিত টেক্সটের দৈর্ঘ্য pattern অ্যাট্রিবিউটে নির্ধারিত ৫ বা ততোধিক অক্ষর হয়। যদি প্রবেশিত টেক্সট ৫ অক্ষরের কম হয়, তাহলে একটি লাল বর্ডার প্রদর্শিত হয়।

: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 একটি স্টাইল যা প্রয়োগ করা হয় যখন একটি সংখ্যাসূচক ইনপুট উপাদান একটি নির্দিষ্ট সীমার মধ্যে একটি মান ধারণ করে। HTML-এ নির্দিষ্ট min এবং max বৈশিষ্ট্য দ্বারা প্রদত্ত শর্তগুলি পূরণ হলে :in-range স্টাইল প্রয়োগ করা হয়।

  • :out-of-range একটি স্টাইল যা প্রয়োগ করা হয় যখন একটি সংখ্যাসূচক ইনপুট উপাদান একটি নির্দিষ্ট সীমার বাইরে একটি মান ধারণ করে। min অথবা max বৈশিষ্ট্য দ্বারা নির্দিষ্ট সীমা অতিক্রম করলে :out-of-range স্টাইল প্রয়োগ করা হয়।

  • এই উদাহরণে, যখন min="18" এবং max="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}
  • even বা odd নির্দিষ্ট করে, আপনি বিজোড় বা জোড় উপাদানে স্টাইল প্রয়োগ করতে পারেন।
  • এই উদাহরণে, জোড়া এবং বিজোড় পংক্তিগুলির জন্য বিভিন্ন পটভূমি রং প্রয়োগ করা হয়েছে। এটি উদাহরণস্বরূপ ডোরা টেবিল ডিজাইনের জন্য ব্যবহার করা যেতে পারে।

: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() পসুডো-ক্লাস একটি প্যারেন্ট সিলেক্টর হিসাবে কাজ করে। এই পসুডো-ক্লাসটি ব্যবহার করে, আপনি চাইল্ড এলিমেন্ট থাকা সাপেক্ষে একটি প্যারেন্ট এলিমেন্ট নির্বাচন করতে পারেন।
  • এই উদাহরণে, p উপাদানগুলির মধ্যে .child শ্রেণীর span উপাদান থাকলে, সেই p উপাদানগুলির উপর একটি সীমানা প্রয়োগ করা হয়েছে।

: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() পসুডো-ক্লাস নিজেই সাধারণ সিলেক্টরের মতো স্পেসিফিসিটি বহন করে, তবে এটি অভ্যন্তরীণ সিলেক্টরদের মধ্যে সর্বোচ্চ স্পেসিফিসিটির ভিত্তিতে স্টাইল প্রয়োগ করে।
  • এই উদাহরণে, detail ক্লাসের মধ্যে <p> এবং <span> এলিমেন্টগুলিতে স্টাইল প্রয়োগ করার জন্য :where() এবং :is() ব্যবহার করা হয়েছে। :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() একই টাইপের উপাদানের n-তম ঘটনাকে স্টাইল প্রয়োগ করে।
  • এই উদাহরণে, 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> উপাদানগুলোর আগে "Note:" টেক্সট যোগ করা হয়েছে। এখানে নির্দিষ্ট করা কন্টেন্টটি প্রকৃত HTML এ বিদ্যমান নয়; এটি CSS এর মাধ্যমে ভার্চুয়ালি যোগ করা হয়েছে। এর মানে হলো যে JavaScript ইত্যাদির মাধ্যমে যোগ করা কনটেন্ট সরাসরি সংশোধন করা যায় না।

::after 

1span.five-stars::after {
2    content: "*****";
3    color: gold;
4}
  • ::after একটি উপাদানের সামগ্রীর পরে ভার্চুয়াল কন্টেন্ট প্রবেশ করায়। এটি সাধারণত একটি এলিমেন্টের পরে অতিরিক্ত বা শৈল্পিক বিষয়বস্তু যোগ করতে ব্যবহৃত হয়।
  • এই উদাহরণে, <span> উপাদানটি যা five-stars শ্রেণীর, তার পরে একটি সোনালি তারকার আইকন যোগ করা হয়েছে।

::placeholder 

1input::placeholder {
2    color: rgba(0, 150, 150, 0.7);
3    font-size: 14px;
4    font-style: italic;
5}
  • ::placeholder ছদ্ম-উপাদান ফর্ম উপাদানগুলির প্লেসহোল্ডার টেক্সটের স্টাইলিং করার জন্য ব্যবহৃত হয়। ডিফল্টরূপে এটি সাধারণত হালকা ধূসর টেক্সটে প্রদর্শিত হয়, তবে ::placeholder ছদ্ম-উপাদানের মাধ্যমে আপনি আপনার ডিজাইনের সাথে মিলিয়ে স্টাইলটি পরিবর্তন করতে পারেন।
  • এই উদাহরণে, input উপাদানের প্লেসহোল্ডার টেক্সটের রঙ ৭০% স্বচ্ছ নীল, ফন্ট আকার 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 Video

CSS-এ বিশেষ অক্ষর এবং ফাংশনগুলিCSS `@` বিধিসমূহ