Un blog sullo sviluppo Front End, corsi WordPress, Data Science, Machine Leaning e Python.

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.

Ti sei iscritto con successo al blog di Jacopo Kahl
Bentornato! Hai effettuo l'accesso al blog.
Ottimo! Ti sei appena registrato.
Perfetto! Il tuo account è attivo, ed hai l'accesso a tutti i contenuti.