Articles
Introduzione al CSS
Pseudo-classi e Pseudo-elementi CSS

Pseudo-classi e Pseudo-elementi CSS

Questo articolo spiega le pseudo-classi e i pseudo-elementi di CSS.

Puoi imparare a conoscere le pseudo-classi come :hover e i pseudo-elementi come ::before.

YouTube Video

HTML per Anteprima

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>

Pseudo-classi

Le pseudo-classi CSS sono funzioni che applicano stili agli elementi in base a condizioni specifiche come stati degli elementi o gerarchia. Ti permettono di aggiungere stili speciali basati su stati o posizioni degli elementi, rendendole utili per rappresentare situazioni dinamiche che non possono essere specificate da classi o ID regolari. Le pseudo-classi facilitano l'implementazione di interfacce utente dinamiche e lo styling basato su condizioni specifiche, consentendo un design che risponde all'interazione dell'utente o alla struttura del contenuto.

Sintassi di base delle pseudo-classi

La sintassi di base delle pseudo-classi è la seguente.

1selector:pseudo-class {
2    /* Styles */
3}
  • selector è l'elemento di destinazione.
  • La parte pseudo-class rappresenta una pseudo-classe che indica uno stato o una condizione specifica.
  • : è usato per selezionare le pseudo-classi.

Pseudo-classi comunemente usate

:hover 

1a:hover {
2    color: red;
3}
  • :hover applica stili quando il cursore del mouse passa sopra un elemento.
  • In questo esempio, quando il mouse passa sopra un link, il colore del testo cambia in rosso.

:focus 

1input:focus {
2    outline: 2px solid blue;
3}
  • :focus applica stili quando un elemento riceve il focus. È utilizzato principalmente per gli elementi dei moduli e i link.
  • In questo esempio, un contorno blu appare quando un elemento input è in focus.

:active 

1button:active {
2    background-color: green;
3}
  • :active applica stili a un elemento quando è attivo (mentre viene cliccato).
  • In questo esempio, mentre il pulsante viene cliccato, il colore di sfondo cambia in verde.

:empty 

1.box:empty {
2    background-color: lightgray;
3    border: 1px dashed black;
4    height: 50px;
5    width: 50px;
6}
  • La pseudo-classe :empty viene utilizzata per applicare stili agli elementi privi di figli. L'elemento di destinazione non deve contenere nodi di testo, spazi vuoti o commenti.
  • In questo esempio, se un elemento con la classe box non contiene nulla, a tale elemento vengono applicati uno sfondo grigio e un bordo tratteggiato nero. Se sono presenti spazi vuoti, lo stile non viene applicato.

: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 è uno stile applicato agli elementi del modulo con valori di input validi. Lo stile :valid viene applicato quando vengono soddisfatte le condizioni specificate dagli attributi HTML come pattern o type (ad esempio, email).

  • :invalid è uno stile applicato agli elementi del modulo con valori di input non validi. Lo stile :invalid viene applicato quando un elemento del modulo non soddisfa le regole di validazione HTML (ad esempio, type="email").

  • In questo esempio, viene mostrato un bordo verde se il testo inserito è lungo 5 o più caratteri, come specificato dall'attributo pattern. Se il testo inserito è inferiore a 5 caratteri, viene mostrato un bordo rosso.

: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 è uno stile applicato quando un elemento di input numerico contiene un valore all'interno di un intervallo specificato. Lo stile :in-range viene applicato quando le condizioni specificate dagli attributi min e max in HTML sono soddisfatte.

  • :out-of-range è uno stile applicato quando un elemento di input numerico contiene un valore al di fuori dell'intervallo specificato. Lo stile :out-of-range viene applicato quando il valore supera l'intervallo specificato dagli attributi min o max.

  • In questo esempio, quando viene inserito un valore all'interno dell'intervallo specificato dagli attributi min="18" e max="99" (da 18 a 99 inclusi), viene visualizzato un bordo blu. Quando viene inserito un valore al di fuori dell'intervallo, viene visualizzato un bordo arancione.

:nth-child() 

1li:nth-child(2) {
2    color: blue;
3    font-weight: bold;
4}
  • :nth-child() applica stili basati sulla posizione di un elemento figlio all'interno del suo genitore. Puoi specificare un numero o un'espressione per n.
  • In questo esempio, il testo del secondo elemento dell'elenco diventa blu.
Applicazione a elementi dispari e pari 
1li:nth-child(odd) {
2    background-color: lightblue;
3}
4
5li:nth-child(even) {
6    background-color: steelblue;
7}
  • Specificando even o odd, puoi applicare stili agli elementi dispari o pari.
  • In questo esempio, colori di sfondo diversi sono applicati alle righe pari e dispari. Questo può essere utilizzato per disegni di tabelle a righe, ad esempio.

:first-child 

1small:first-child {
2    font-weight: bold;
3    color: steelblue;
4}
  • :first-child applica stili al primo elemento figlio di un genitore.
  • In questo esempio, il testo del primo elemento small è stilizzato in grassetto con una tonalità di blu.

:last-child 

1small:last-child {
2    font-weight: bold;
3    color: seagreen;
4}
  • :last-child applica stili all'ultimo elemento figlio di un genitore.
  • In questo esempio, il testo dell'ultimo elemento small è stilizzato in grassetto con una tonalità di verde.

:has() 

1p:has(span.child) {
2    border: 2px solid black;
3}
  • La pseudo-classe :has() in CSS funziona come un selettore padre. Utilizzando questa pseudo-classe, puoi selezionare un elemento padre in base alla presenza di elementi figli.
  • In questo esempio, il border viene applicato agli elementi p che contengono elementi span con la classe .child.

:not() 

1q:not(.quote2) {
2    font-weight: bold;
3    color: steelblue;
4}
  • :not() applica stili agli elementi che non soddisfano condizioni specifiche.
  • In questo esempio, il testo degli elementi q, eccetto quelli con la classe quote2, è stilizzato in grassetto con una tonalità di blu.

: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}
  • La pseudo-classe :where() è un selettore CSS speciale che imposta la specificità a zero. Questo è utile quando vuoi gestire più selettori collettivamente e applicare stili senza influire sulla specificità degli elementi selezionati.
  • La pseudo-classe :is() raggruppa più selettori e seleziona gli elementi che soddisfano una qualsiasi delle condizioni. La pseudo-classe :is() ha la stessa specificità dei selettori normali, ma applica stili in base alla specificità più alta tra i suoi selettori interni.
  • In questo esempio, :where() e :is() vengono utilizzati per applicare stili agli elementi <p> e <span> all'interno della classe detail. Lo stile text-decoration impostato con :where() viene sovrascritto dal CSS successivo. Tuttavia, lo stile impostato con :is() ha una specificità più alta e non viene sovrascritto dal CSS successivo.

:checked 

1input:checked {
2    outline: 4px solid red;
3}
  • :checked applica stili quando una casella di controllo o un pulsante radio è selezionato.
  • In questo esempio, un bordo rosso viene visualizzato sull'elemento input selezionato.

:disabled 

1button:disabled {
2    background-color: gray;
3    cursor: not-allowed;
4}
  • :disabled applica stili agli elementi di modulo disabilitati.
  • In questo esempio, uno sfondo grigio e un cursore 'non consentito' sono applicati al pulsante disabilitato.

:visited 

1.link:visited {
2    color: purple;
3}
  • :visited viene utilizzato per applicare stili ai link visitati.
  • In questo esempio, dopo aver cliccato e visitato un link, il colore del testo dell'elemento <a> cambia in viola.
Limitazioni di Privacy e Stile

:visited ha alcune restrizioni sugli stili per ragioni di protezione della privacy. Questo impedisce ai siti esterni di dedurre la cronologia delle visite dell'utente. Le proprietà che possono essere modificate con :visited sono limitate a quelle seguenti:.

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

D'altra parte, proprietà diverse da queste (ad esempio, display, visibility, position, ecc.) non possono essere modificate con :visited. Ciò impedisce che la privacy dell'utente venga compromessa attraverso la cronologia di navigazione.

:first-of-type 

1.first-example :first-of-type {
2    font-weight: bold;
3    color: steelblue;
4}
  • :first-of-type seleziona il primo elemento del suo tipo (con lo stesso nome di tag) all'interno del suo elemento genitore.
  • In questo esempio, il testo del primo elemento <var> e <code> nella classe first-example è stilizzato in grassetto blu.

:last-of-type 

1.last-example :last-of-type {
2    font-weight: bold;
3    color: seagreen;
4}
  • :last-of-type seleziona l'ultimo elemento del suo tipo all'interno del suo elemento genitore.
  • In questo esempio, il testo dell'ultimo elemento <var> e <code> nella classe last-example è stilizzato in grassetto verde.

:nth-of-type() 

1.nth-example :nth-of-type(2) {
2    font-weight: bold;
3    color: lightsalmon;
4}
  • :nth-of-type() applica stili all'ennesima occorrenza di elementi dello stesso tipo.
  • In questo esempio, il testo del secondo elemento <var> e <code> nella classe nth-example è stilizzato in grassetto arancione.

Pseudo-elementi

Gli pseudo-elementi in CSS sono utilizzati per applicare stili a parti specifiche dell'elemento selezionato. A differenza delle pseudo-classi, gli pseudo-elementi si concentrano su parti specifiche di un elemento piuttosto che sull'intero elemento. Ad esempio, sono utilizzati per aggiungere contenuto prima o dopo un elemento o per applicare stili a caratteri o righe specifici.

Sintassi di base degli pseudo-elementi

Gli pseudo-elementi sono solitamente scritti con :: (doppio due punti) dopo il selettore. Questo per distinguerli dalle pseudo-classi.

1selector::pseudo-element {
2    /* Styles */
3}
  • selector è l'elemento di destinazione.
  • La parte pseudo-element rappresenta un pseudo-elemento che si riferisce a una parte o a un aspetto specifico di un elemento.
  • È possibile specificare un pseudo-elemento utilizzando ::.

Pseudo-elementi comunemente usati

::before 

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

  • ::before inserisce contenuto virtuale prima del contenuto di un elemento e applica stili a quella parte. È utile per inserire icone o etichette, ad esempio.

  • In questo esempio, il testo "Nota:" è inserito prima degli elementi <span> con la classe note. Il contenuto specificato qui non esiste nell'HTML reale; è aggiunto virtualmente tramite CSS. Ciò significa che non è possibile manipolare direttamente il contenuto aggiunto tramite JavaScript, ecc.

::after 

1span.five-stars::after {
2    content: "*****";
3    color: gold;
4}
  • ::after inserisce contenuto virtuale dopo il contenuto di un elemento. Di solito viene utilizzato per aggiungere contenuti supplementari o decorativi dopo un elemento.
  • In questo esempio, un'icona a forma di stella dorata viene aggiunta dopo l'elemento <span> con la classe five-stars.

::placeholder 

1input::placeholder {
2    color: rgba(0, 150, 150, 0.7);
3    font-size: 14px;
4    font-style: italic;
5}
  • Il pseudo-elemento ::placeholder viene utilizzato per stilizzare il testo del segnaposto negli elementi del modulo. Per impostazione predefinita, viene solitamente visualizzato in grigio chiaro, ma con il pseudo-elemento ::placeholder è possibile modificare lo stile in base al proprio design.
  • In questo esempio, il colore del testo del segnaposto per l'elemento input è impostato su un blu trasparente al 70%, la dimensione del carattere a 14px e stilizzato in corsivo.

::first-letter 

1p.first::first-letter {
2    font-size: 2em;
3    color: blue;
4}
  • ::first-letter applica uno stile alla prima lettera di un elemento di livello blocco. Viene utilizzato per effetti tipografici come quelli visti nelle riviste o nei giornali, dove la prima lettera è enfatizzata. Si noti che questo pseudo-elemento è efficace solo sugli elementi di livello blocco e non può essere applicato direttamente agli elementi in linea come <span>.
  • In questo esempio, la prima lettera del paragrafo sarà due volte più grande, in grassetto e blu.

::first-line 

1p.second::first-line {
2    font-weight: bold;
3    color: green;
4}
  • ::first-line applica uno stile alla prima riga di un elemento di blocco. Viene particolarmente utilizzato per i paragrafi di testo, consentendo di applicare stili differenti alla prima riga.
  • In questo esempio, la prima riga del paragrafo sarà in grassetto e verde.

::selection 

1span::selection {
2    background-color: yellow;
3    color: black;
4}
  • ::selection applica stili alla parte di testo selezionata (evidenziata) dall'utente. Con questo, puoi modificare il colore di sfondo e il colore del testo quando il testo viene selezionato.
  • In questo esempio, quando viene selezionato il testo di un elemento <span>, lo sfondo diventa giallo e il testo diventa nero.

Puoi seguire l'articolo sopra utilizzando Visual Studio Code sul nostro canale YouTube. Controlla anche il nostro canale YouTube.

YouTube Video

Caratteri Speciali e Funzioni in CSSRegole CSS `@`