Selettori Css: Pseudo Classi Strutturali Parte 1

Analisi progettuale delle pseudo-classi CSS

by admin admin Date: 02-05-2020 css webdesign css3


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.

Sintassi dei selettori CSS3
Tipo di selettore Pattern Descrizione
Selettore di attributo che seleziona una sottostringa E[att^=”val”] Seleziona ogni elemento E il cui valore di attributo att inizia “val”.
Selettore di attributo che seleziona una sottostringa E[att$=”val”] Seleziona ogni elemento E il cui valore di attributo att termina con “val”.
Selettore di attributo che seleziona una sottostringa E[att*=”val”] Seleziona ogni elemento E il cui valore di attributo att contiene la sottostringa “val”.
Pseudo-classe strutturale E:root Seleziona l'elemento radice del documento. In HTML, l'elemento radice è sempre l'elemento html .
Pseudo-classe strutturale E:nth-child(n) Seleziona ogni elemento E che è l'n-esimo figlio del suo genitore.
Pseudo-classe strutturale E:nth-last-child(n) Seleziona ogni elemento E che è l'n-esimo figlio del suo genitore, partendo dall'ultimo figlio.
Pseudo-classe strutturale E:nth-of-type(n) Seleziona ogni elemento E che è l'n-esimo fratello del suo tipo.
Pseudo-classe strutturale E:nth-last-of-type(n) Seleziona ogni elemento E che è l'n-esimo fratello del suo tipo, partendo dall'ultimo fratello.
Pseudo-classe strutturale E:last-child Seleziona ogni elemento E che è l'ultimo figlio del suo genitore.
Pseudo-classe strutturale E:first-of-type Seleziona ogni elemento E che è il primo fratello del suo tipo.
Pseudo-classe strutturale E:last-of-type Seleziona ogni elemento E che è l'ultimo fratello del suo tipo.
Pseudo-classe strutturale E:only-child Seleziona ogni elemento E che è l'unico figlio del suo genitore.
Pseudo-classe strutturale E:only-of-type Seleziona ogni elemento E che è il solo fratello del suo tipo.
Pseudo-classe strutturale E:empty Seleziona ogni elemento E che non ha figli (inclusi i nodi di testo).
Pseudo-classe di destinazione E:target Seleziona ogni elemento E che è la destinazione dell'URL di riferimento.
Pseudo-classe degli stati di un elemento della UI E:enabled Seleziona ogni elemento E dell'interfaccia utente (controllo di un form) che è abilitato.
Pseudo-classe degli stati di un elemento della UI E:disabled Seleziona ogni elemento E dell'interfaccia utente (controllo di un form) che è disabilitato.
Pseudo-classe degli stati di un elemento della UI E:checked Seleziona ogni elemento E dell'interfaccia utente (controllo di un form) che è selezionato.
Pseudo-elemento dei frammenti di un elemento della UI E::selection Seleziona la parte di un elemento E attualmente selezionata o sottolineata dall'utente.
Pseudo-classe di negazione E:not(s) Seleziona ogni elemento E a cui non corrisponde il selettore semplice s.
Combinatore del fratello generico E ~ F Seleziona ogni elemento F che è preceduto da un elemento E.

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.

Technology vector created by pikisuperstar - www.freepik.com
 
by admin admin Date: 02-05-2020 css webdesign css3 visite : 2766  
 
 
 
 

Articoli correlati

    Flexbox, breve guida pratica

    In questo articolo impareremo a gestire gli elementi del nostro sito web in modo più efficiente ed efficace, grazie alla proprietà Flexbox. Ma attenzione, non stiamo parlando di una semplice proprietà…

    Paesaggi Parallax costruiti interamente con CSS e HTML

    Il CSS3 ha messo finalmente fine alle nostre frustrazioni: con delle semplici proprietà si aprono infatti infinite soluzioni. Una tra tante, la possibilità di inserire uno sfondo animato in una pagina…

    9 Utili Librerie CSS per il Disegno Web

    I componenti perduti di bootstrap, un complemento che sicuramente non dovrete mai farvi mancare!  Jasny Bootstrap E se il vostro framework CSS parlasse? Ecco a voi un nuovo Framework Semantico.Un…

    Introduzione all'animazione dei poligoni con css

    Per lungo tempo noi sviluppatori web, abbiamo dovuto rassegnarci alle strutture geometriche fondamentali: i blocchi rettangolari. Cosí, quando è stato introdoto il clipping nei css, abbiamo gioito. Dite la verità... Ma cos'è…

    CSS: la funzione Calc()

    Nella progettazione di un sito web responsive, dobbiamo tener conto della ormai grande varietà di dispositivi sui quali sarà visualizzato il nostro lavoro e delle rispettive variazioni di risoluzioni alle…

    16 siti per scaricare immagini vettoriali gratuite

    Le immagini vettoriali, sono fondamentali per chi si occupa di grafica e web design.   La caratteristica che contraddistingue un’immagine vettoriale, da una normale, come ad esempio una fotografia, è che…

    Realizzare banner animati con CSS3

    Avete dei clienti esigenti che "ancora" vi chiedono movimentati, sbrilluccicanti banner in flash? Se siete stanchi di rispondere che ormai il flash è andato in pensione potete proporre una soluzione…

    I 10 migliori generatori di gradienti CSS

    Difficilmente si potrà creare il gradiente perfetto affidandoci alla pura e semplice scrittura di codice CSS. Avere un riferimento visivo in fase di creazione è fondamentale. Ecco perché tra i tool…

    15 effetti di testo avanzati con CSS3

    Le nuove proprietà CSS3 sono senza dubbio un grande vantaggio per poter modellare a piacimento tutti gli elementi di una pagina web senza dover ricorrere all'utilizzo del codice javascript. Una delle…

    15 esempi di trasformazioni 3D con CSS

    Lo sviluppo e l'evoluzione dei browser web come Safari, Chrome e Firefox ha dato agli sviluppatori web ed ai web designers, l'opportunitá di sbizzarrirsi con  la creazione di effetti bellissimi,…

    8 strumenti per formattare ed ottimizzare i CSS

    La fase di ottimizzazione dei file CSS è forse una delle piú importanti per velocizzare il caricamento di un sito web o blog. Per raggiungere questo obiettivo è necessario ripulire il…

    Come creare una dashboard simil Windows8 con CSS3 e jQuery

    Come creare un'animazione simil Windows8 con CSS3 e jQuery Markup CSS Javascript IL MARKUP L'intera struttura è abbastanza semplice: La dashboard è costituita da una serie di "box" o riquadri, di due dimensioni, floatanti dentro…