Selettori CSS: Pseudo Classi Strutturali Parte 1

Analisi progettuale delle pseudo-classi CSS

Al giorno d'oggi gli sviluppatori web, principalmente coloro che si occupano di front-end, non devono solo studiare e capire i CSS ma devono cercare di trovare la maniera piú efficace ed efficente per scrivere un ottimo codice CSS.

Le pseudo-classi consentono di inserire uno stile basato sulle relazioni tra gli elementi, in particolare esse definiscono lo stato di un elemento.

Molte di loro si inseriscono in tre categorie: pseudo-classi dinamiche, strutturali e di interfaccia utente. Diversamente dagli pseudo-elementi, più pseudo-classi possono essere applicate a un solo selettore per renderlo ancora più specifico.

Con la versione 3 dei CSS la lista delle classi e delle pseudo classi, prima limitata a

:link
:visited
:hover
:active
:focus
:first-child

si è notevolmente ampliata e viene introdotto per la prima volta il concetto di pseudo-classe strutturale.

Le pseudo-classi strutturali

Le pseudo-classi strutturali sono uno strumento che consente di selezionare gli elementi all'interno della pagina in base a delle informazioni sull'oggetto che non possono essere raggiunte da selettori semplici o combinatori.

Sintatticamente vengono definite come quelle previste nelle precedenti specifiche: una pseudo-classe si definisce attraverso il segno : seguito dal nome della pseudo-classe.

Prima di enumerare e spiegare alcune delle nuove pseudo classi strutturali ci soffermeremo sulla sintassi da utilizzare.

La sintassi delle pseudo classi

Una pseudo-classe non definisce un elemento ma un particolare stato di quest’ultimo. In buona sostanza imposta uno stile per un elemento al verificarsi di certe condizioni. A livello sintattico, una pseudo-classe non può essere mai dichiarata da sola, bensì deve appoggiarsi ad un elemento. La sintassi è la seguente:

selector:pseudo-class {property: value}

Il segno di due punti (:) divide, senza ulteriori spazi, l’elemento dal nome della pseudo-classe ad esso associato.

Una pseudo-classe può anche essere associata a selettori di tipo classe. In questo caso la pseudo-classe deve seguire la dichiarazione della classe e le regole di stile definite saranno applicate esclusivamente all’elemento con attributo class dichiarato.

selector.class:pseudo-class {property: value}

Prima di analizzare ogni pseudo-classe, facciamo una precisazione necessaria alla corretta comprensione dell'argomento. Partendo da un qualsiasi oggetto all'interno del DOM, se questo contiene degli elementi figli, l'indice dei figli, contrariamente ai linguaggi di programmazione, inizia da 1 e non da 0.

Esempio :

<ul>
<li>Elemento Lista 1</li>  (Posizione 1)
<li>Elemento Lista 2</li>  (Posizione 2)
<li>Elemento Lista 3</li>  (Posizione 3)
<li>Elemento Lista 4</li>  (Posizione 4)
<li>Elemento Lista 5</li>  (Posizione 5)
</ul>

La tabella che segue ci offre uno sguardo d'insieme dei nuovi selettori disponibili nei CSS3.

Selettori di attributo che selezionano una sottostringa

I seguenti selettori di attributo sono particolarmente utili nella gestione dei collegamenti ipertestuali. Esempio:

a[href^="http://"] { background: #fff; border: 1px solid; padding: 4px; color: #000; }

Qui andiamo a selezionare i collegamenti che puntano ad un sito esterno, ovvero quelli il cui attributo href inizia con la sottostringa "http://". Vediamo un altro esempio:

a[href$=".css"] { font: 1em "SFProverbialGothic"; color: #000; border-bottom: 1px dashed; text-decoration: none; }

In questo caso selezioniamo tutti i collegamenti che puntano ad un file CSS, ovvero quelli il cui attributo href termina con la sottostringa ".css".

Per concludere la nostra panoramica sui selettori CSS, vi proponiamo un ulteriore esempio

a[href*="luna"] { padding-right: 10px; background: transparent url("img/luna.gif") no-repeat 100% 100%; }

In quest'ultimo caso selezioniamo quei collegamenti che puntano ad un sito o sottosito della galassia "luna", ossia quelli il cui attributo href contiene la sottostringa "luna".

Come prima accennato, le pseudo-classi strutturali permettono di selezionare gli elementi all’interno della pagina in base a delle informazioni dell’oggetto che non possono essere raggiunte da selettori semplici o combinatori.

Nella seconda parte dell'articolo, ne vedremo il funzionamento nei dettagli.

Janeth Kent

Licenciada en Bellas Artes y programadora por pasión. Cuando tengo un rato retoco fotos, edito vídeos y diseño cosas. El resto del tiempo escribo en MA-NO WEB DESIGN END DEVELOPMENT.