Le pseudo classi CSS - ulteriori pseudo classi

Go to the profile of  Jacopo Kahl
Jacopo Kahl
1 min di lettura
Le pseudo classi CSS - ulteriori pseudo classi

Alcune pseudo-classi non rientrano in nessuna delle categorie viste in precedenza (dinamiche, strutturali e user interface),  e sono :target, :lang() e :not.

target

La pseudo-classe :target può applicare lo stile ad un elemento attraverso un collegamento id. Questa pseudo-classe può essere utile per evidenziare una sezione del documento.

:target { color: yellow; } /* elemento target */

Quando viene seguito il seguente collegamento al link interno della stessa pagina, questa regola viene applicata all'elemento di ancoraggio. Il browser scorre anche verso il basso fino a quell'elemento.

<a href="#my-target" id="my-target">Link interno della pagina</a>

lang

La pseudo-classe :lang() corrisponde agli elementi forniti in una determinata lingua tramite il loro attributo.

p:lang(it) {}

Questa pseudo-classe si applicherà quindi a quegli elementi paragrafo previsti per gli utente di lingua italiana:

<p lang="it">Italiano</p>

A differenza del selettore di attributo per la lingua, questa pseudo-classe può anche corrispondere agli elementi del linguaggio ereditato, come ad esempio attraverso l'intestazione della pagina o un <meta> tag.

<body lang="it">
    <p>Italiano</p>
</body>

not

La pseudo-classe di negazione :neg corrisponde a quegli elementi che non sono interessati dal selettore specificato.

p:not(.first) { font-size: 16px; }

Nel seguente esempio la regola seleziona i paragrafi che non utilizzano la classe capo.

<p class="capo">Non interessato dalla pseudo-classe</p>
<p>Testo portato a 16px</p>

Vuoi approfondire l'argomento? 🤓 + 📚 = 😄

Libro consigliato

Un modo nuovo e più bello per imparare HTML5 e CSS3.

Unità di misura in CSS
4 min di lettura
I Colori in CSS
3 min di lettura
Specificità in CSS
3 min di lettura
I selettori CSS di relazione
3 min di lettura