Articles
מבוא ל-CSS
מחלקות-פסאודו ואלמנטים-פסאודו ב-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 הן פונקציות שמיישמות סגנונות על אלמנטים בהתבסס על תנאים מסוימים, כמו מצבי אלמנטים או היררכיה. הן מאפשרות להוסיף סגנונות מיוחדים בהתבסס על מצבי או מיקומי אלמנטים, דבר שמועיל לייצוג מצבים דינמיים שלא ניתן להגדיר באמצעות מחלקות רגילות או מזהים. מחלקות-פסאודו מקלות על יישום ממשקי משתמש דינמיים וסגנון בהתבסס על תנאים מסוימים, ומאפשרות עיצוב שמגיב לאינטראקציות של המשתמש או למבנה תוכן.

תחביר בסיסי של מחלקות-פסאודו

התחביר הבסיסי של מחלקות-פסאודו הוא כדלקמן.

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 מוחל כאשר התנאים שהוגדרו על ידי התכונות 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() משמשים ליישום סגנונות על אלמנטים <p> ו-<span> בתוך המחלקה 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}
  • 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 מוגדר כחול שקוף ב-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> נבחר, הרקע הופך לצהוב והטקסט הופך לשחור.

תוכלו לעקוב אחר המאמר שלמעלה באמצעות Visual Studio Code בערוץ היוטיוב שלנו. נא לבדוק גם את ערוץ היוטיוב.

YouTube Video

תווים מיוחדים ופונקציות ב-CSSכללי CSS `@`