الفئات الوهمية والعناصر الوهمية في CSS

Articles

توضح هذه المقالة الفئات الزائفة والعناصر الزائفة في 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}

المحدد هو العنصر المستهدف۔
جزء الفئة الزائفة يمثل فئة زائفة تشير إلى حالة أو ظرف محدد.۔
: يُستخدم لاختيار الفئات الزائفة۔

الفئات الزائفة المستخدمة بشكل شائع

`: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 عندما يتم استيفاء الشروط المحددة بواسطة سمات min و max في HTML۔
يُطبق النمط :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}

بتحديد 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}

تعمل الفئة الزائفة :has() في CSS كأداة لتحديد العنصر الأب۔ باستخدام هذه الفئة الزائفة، يمكنك تحديد العنصر الأب بناءً على وجود عناصر فرعية۔
في هذا المثال، يتم تطبيق border على عناصر p التي تحتوي على عناصر span التي تحتوي على الفئة .child۔

`:not()`

1q:not(.quote2) {
2    font-weight: bold;
3    color: steelblue;
4}

:not() تقوم بتطبيق الأنماط على العناصر التي لا تفي بشروط معينة۔
في هذا المثال، يتم تنسيق نص عناصر q، باستثناء تلك التي تحتوي على الفئة quote2، بخط عريض وظل أزرق۔

`: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۔ يتم تجاوز نمط text-decoration الذي تم تعيينه بواسطة :where() بواسطة 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 تقوم بتطبيق الأنماط على عناصر النموذج المعطلة۔
في هذا المثال، يتم تطبيق خلفية رمادية ومؤشر 'غير مسموح' على الزر المعطل۔

`: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 يختار العنصر الأول من نوعه (بنفس اسم العلامة) داخل عنصر الوالد۔
في هذا المثال، يتم تنسيق نص العنصر الأول <var> والعنصر <code> في الصف first-example باللون الأزرق الغامق۔

`:last-of-type`

1.last-example :last-of-type {
2    font-weight: bold;
3    color: seagreen;
4}

:last-of-type يختار العنصر الأخير من نوعه داخل عنصر الوالد۔
في هذا المثال، يتم تنسيق نص العنصر الأخير <var> والعنصر <code> في الصف last-example باللون الأخضر الغامق۔

`:nth-of-type()`

1.nth-example :nth-of-type(2) {
2    font-weight: bold;
3    color: lightsalmon;
4}

:nth-of-type() يطبق الأنماط على التكرار الـ n للعناصر من نفس النوع۔
في هذا المثال، يتم تنسيق نص العنصر الثاني <var> والعنصر <code> في الصف nth-example باللون البرتقالي الغامق۔

العناصر الكاذبة

يتم استخدام العناصر الوهمية في CSS لتطبيق الأنماط على أجزاء محددة من العنصر المختار۔ على عكس الفئات الوهمية، تركز العناصر الوهمية على أجزاء معينة من العنصر بدلاً من العنصر كله۔ على سبيل المثال، تُستخدم لإضافة محتوى قبل أو بعد العنصر أو لتطبيق الأنماط على حروف أو خطوط محددة۔

البنية الأساسية للعناصر الكاذبة

عادةً ما تُكتب العناصر الوهمية باستخدام :: (نقطتين مزدوجتين) بعد المُحَدِّد۔ وهذا لتمييزها عن الفئات الوهمية۔

1selector::pseudo-element {
2    /* Styles */
3}

المحدد هو العنصر المستهدف۔
يمثل الجزء pseudo-element عنصراً وهميًا يشير إلى جزء معين أو جانب من جوانب العنصر۔
يمكنك تحديد عنصر وهمي باستخدام ::۔

العناصر الوهمية المستخدمة بشكل شائع

`::before`

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

::before يُدرج محتوى افتراضيًا قبل محتوى العنصر ويطبق الأنماط على ذلك الجزء۔ هو مفيد لإدراج الأيقونات أو التسميات، على سبيل المثال۔
في هذا المثال، يتم إضافة النص "Note:" قبل العناصر  التي تحمل الصف note۔ المحتوى المحدد هنا غير موجود في HTML الفعلي؛ يتم إضافته افتراضياً عبر CSS۔ هذا يعني أنه لا يمكنك تعديل المحتوى المضاف عبر JavaScript وما إلى ذلك بشكل مباشر۔

`::after`

1span.five-stars::after {
2    content: "*****";
3    color: gold;
4}

::after يُدرج محتوى افتراضيًا بعد محتوى العنصر۔ عادةً ما يُستخدم لإضافة محتوى تكميلي أو زخرفي بعد العنصر۔
في هذا المثال، يتم إضافة رمز نجم ذهبي بعد العنصر  ذو الفئة 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 إلى الأزرق بنسبة شفافية 70%، حجم الخط إلى 14px، ومائل۔

`::first-letter`

1p.first::first-letter {
2    font-size: 2em;
3    color: blue;
4}

::first-letter يطبق التنسيق على الحرف الأول لعناصر المستوى الكتلي۔ يستخدم للتأثيرات الطباعية مثل تلك التي تُرى في المجلات أو الصحف، حيث يتم إبراز الحرف الأول.۔ لاحظ أن هذا العنصر الزائف فعال فقط مع عناصر المستوى الكتلي ولا يمكن تطبيقه مباشرة على العناصر المضمنة مثل ۔
في هذا المثال، سيكون الحرف الأول من الفقرة بحجم يعادل الضعف، غامق، وأزرق۔

`::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 يطبق التنسيقات على الجزء المحدد (المضاء) من النص بواسطة المستخدم۔ باستخدام هذا، يمكنك تغيير لون الخلفية ولون النص عند تحديد النص۔
في هذا المثال، عند تحديد نص العنصر ، تصبح الخلفية صفراء ويتحول النص إلى اللون الأسود۔

يمكنك متابعة المقالة أعلاه باستخدام Visual Studio Code على قناتنا على YouTube.۔ يرجى التحقق من القناة على YouTube أيضًا.۔

YouTube Video

الأحرف الخاصة والدوال في CSS قواعد CSS `@`