Il pseudo-elemento ::backdrop il CSS consente di creare un fondale (backdrop) che copre l'intera visuale della pagina ed è visualizzato immediatamente dietro un <dialog> o qualsiasi altro elemento che vada in modalità a schermo intero utilizzando la Fullscreen API. dialog::backdrop: { background-color: yellow; } Questo pseudo-elemento ci consente di modificare lo stile dell'intero sfondo dietro agli elementi quando il browser è in modalità a schermo intero. Si noti che con "modalità a schermo intero" si parla di quando il browser occupa l'intero schermo del computer, non va confuso con il viewport del browser. Spesso la modalità a schermo intero viene attivata da un'opzione del sistema operativo per espandere la finestra. Il ::backdrop non eredita lo stile da nessun elemento, così come il suo stile non viene ereditato da niente. Non si verifica quindi nessun effetto a cascata in cui lo sfondo di due elementi potrebbe entrare in conflitto. Stile dello sfondo di una finestra di dialogo Consideriamo il seguente elemento <dialog> in HTML: <dialog> <h3>Benvenuto in un Dialogo!</h3> <p>Questo è il testo del fantastico dialogo che stai visualizzando.</p> <button onclick="closeDialog()">Chiudi</button> </dialog> <button onclick="openDialog()">Apri dialog</button> Lo stile di ::backdrop può essere utilizzato per applicare uno stile dietro a un <dialog> quando la finestra di dialogo viene visualizzata con HTMLDialogElement.showModal(), che è attualmente una funzione sperimentale, ma è ciò che attiva il backdrop. const dialog = document.querySelector('dialog'); function openDialog() { dialog.showModal(); } function closeDialog() { dialog.close(); } Ora, se premiamo sul pulsante aprendo di conseguenza la finestra di dialogo, il seguente codice CSS verrà applicato all'elemento: dialog::backdrop { background-color: yellow; } Puoi provare ad osservare tu stesso il comportamento che abbiamo appena descritto provando ad aprire la finestra di dialogo nel seguente esempio: CodePen Embed Fallback Sfondo dei contenuti multimediali a schermo intero Quando i contenuti multimediali, come immagini o video, entrano in modalità a schermo intero, è possibile che non coprano l'intera area dello schermo, per esempio potrebbero lasciare dello spazio vuoto intorno ad essi. Attualmente lo stile predefinito del browser Google Chrome per il backdrop è il seguente: dialog::backdrop { position: fixed; top: 0px; right: 0px; bottom: 0px; left: 0px; background: rgba(0, 0, 0, 0.1); } Con ::backdrop possiamo andare a modificare questo comportamento oppure sovrascriverlo completamente. Potremmo per esempio impostare il seguente sfondo per i video: video::backdrop { background-color: red; } Nel seguente esempio, quando il video sarà messo a schermo intero, sarà possibile vedere lo sfondo rosso dato che il video non copre tutta l'area dello schermo: CodePen Embed Fallback Trasformazioni, animazioni e stati al passaggio del mouse Dal momento che non ci sono restrizioni sulle proprietà che possiamo dichiarare su questo pseudo-elemento, è possibile aggiungere animazioni e trasformazioni a uno sfondo o persino modificare lo stile dei vari stati, come per esempio al passaggio del mouse: .element::backdrop { animation: move 5s infinite linear paused both; background: conic-gradient(red, orange, yellow, green, blue); } .element:hover::backdrop { animation-play-state: running; } @keyframes move { 50% { transform: scale(0.9); } } CodePen Embed Fallback
I selettori::before e ::after, consentono in CSS di creare degli pseudo-elementi per aggiungere del contenuto in una pagina senza che sia scritto nel documento HTML attraverso la proprietà content. Ecco un esempio di come il seguente codice CSS possa influire sul documento: div::before { content: "♥"; } div::after { content: "★"; } <div> ♥ <!-- Il resto del contenuto... --> ★ </div> Come avrete potuto osservare, il contenuto è comunque all'interno dell'elemento. Quindi non viene aggiunto prima o dopo l'elemento ma prima o dopo il contenuto dell'elemento. L'unico motivo per utilizzare uno o l'altro è che il contenuto aggiunto con ::after sarà posizionato al di sopra del contenuto aggiunto con ::before. Possibili Utilizzi Il valore per content può essere vario: Una stringa può contenere qualsiasi carattere, anche Unicode. Il contenuto va racchiuso tra due virgolette: content: "stringa"; Un'immagine può essere aggiunta specificandone il percorso: content: url(percorso/immagine.png). L'immagine sarà aggiunta con le sue esatte dimensioni ma può essere ridimensionata utilizzando transform: scale(0.5). Si possono anche specificare dei gradienti. Un contatore può essere inserito per personalizzare le liste - content: counter(contatore); Un attributo di un elemento può essere visualizzato utilizzando la funzione attr() - content: attr(nome-attributo); Nulla con content: "". Questo torna utile quando per i clearifix e per inserire immagini di sfondo aggiungendo la proprietà background-image. Non può essere inserito del codice HTML, o meglio, anche se inserito non verrà renderizzato come tale. Esempio CodePen Embed Fallback : oppure :: Ogni browser che supporta i doppi due punti (::) introdotti con CSS3 supporta anche un solo doppio punto (:), ma IE 8 supporta solo il singolo doppio punto. Se si vuole ottenere il miglior supporto da parte dei browser è quindi consigliato usare un singolo doppio punto (:). I doppi due punti sono il nuovo formato per distinguere le pseudo-classi (::) dalle pseudo-classi (:). Se non ti interessa il supporto per Internet Explorer 8, puoi usare i doppi due punti. Link utili MDN ::beforeMDN ::after Supporto dei Browser [caniuse feature="css-gencontent"]
Il pseudo-selettore ::first-letter permette di applicare uno stile specifico alla prima lettera di un elemento, senza doverla racchiudere in un elemento <span> nella sintassi HTML. Infatti con questo selettore, anche se non viene modificato in alcun modo il DOM, è come se la prima lettera in questione fosse inserita in un tag. Questo ci consente di conseguenza di applicare il nostro stile personalizzato a quella lettera, proprio come faremmo con un elemento. p::first-letter { color: red; font-weight: bold; } Immaginando che questo codice CSS venga applicato ad un paragrafo reale, ecco come apparrebbe ai nostri occhi: Questo è un paragrafo di esempio! Note Questo pseudo-elemento funziona solamente se l'elemento padre è un contenitore block, quindi non funzionerà sulla prima lettera degli elementi impostati con display: inline. Se si applica sia ::first-letter che ::first-line ad un elemento, la prima lettera erediterà le regole di stile impostate per la prima riga, tuttavia queste regole verranno sovrascritte solamente se lo stile di ::first-letter è in conflitto esplicito. I contenuti generati con ::before riceveranno lo stile applicato con ::first-line, proprio come se fossero contenuto integrante dell'elemento in questione. Supporto dei Browser [caniuse feature="css-first-letter"]
Il pseudo-elemento ::first-line può essere utilizzato per applicare uno stile alla prima riga di testo di un elemento. Mettiamo caso di avere un paragrafo di testo lungo varie righe, con ::first-line possiamo applicare uno stile solamente alla prima riga di quel paragrafo. Per esempio, può essere utilizzato per ingrandire il testo, trasformarlo in maiuscolo o applicare qualsiasi altra scelta stilistica che si possa voler fare. La quantità di testo che verrà modificata dal selettore dipende da molti fattori, tra cui la dimensione della finestra, la lunghezza della riga, le dimensioni del carattere, la spaziatura tra le lettere o le parole, ecc. Non appena la riga si interrompe, il testo successivo non sarà più oggetto di modifiche. Questo pseudo-elemento funziona solamente su elementi a livello block, quindi nei casi in cui la proprietà display è impostata su block, inline-block, table-caption o table-cell. Sugli elementi inline non ci sarà nessun effetto. Tieni presente anche che non tutte le proprietà possono essere utilizzate all'interno della regola ::first-line. Principalmente si utilizzano le seguenti regole: font-style: ... font-variant: ... font-weight: ... font-size: ... font-family: ... line-height: ... color: ... word-spacing: ... letter-spacing: ... text-decoration: ... text-transform: ... background-color: ... background-image: ... background-position: ... background-repeat: ... background-size: ... background-attachment: ... La specifica ufficiale CSS comunque fornisce agli User Agent di consentre l'utilizzo di altre proprietà nel caso lo ritenessero opportuno. Specificità Lo stile CSS impostato con ::first-line è in grado di sovrascrivere qualsiasi altra regola, anche quelle che utilizzano !important. Questo è dovuto al fatto che uno pseudo-elemento viene trattato come un elemento figlio e non solamente come una parte dell'elemento genitore. Di conseguenza, le regole vengono applicate solamente a quell'elemento, e le regole del genitore si aggiungono in cascata. Supporto dei Browser [caniuse feature="css-first-letter"]
Il pseudo-selettore :active consente di modificare lo stile di un link mentre è attivo (ovvero mentre qualcuno sta cliccando sopra di esso). Solitamente lo stile così applicato è visibile per qualche una frazione di secondo, e fornisce un feedback visuale per indicare che l'elemento sia stato premuto. Solitamente viene utilizzato con gli anchor link <a>. Nel seguente esempio, quando un link viene premuto andremo a impostare uno sfondo di un colore diverso utilizzando il selettore CSS: CodePen Embed Fallback Il selettore :active può essere applicato su qualsiasi elemento. Nel prossimo esempio vediamo che, cliccando su qualsiasi punto della pagina, tutta la pagina diventerà di colore giallo: CodePen Embed Fallback Quando si lavora allo stile dei link, è fortemente consigliato coprire tutti i vari stati in cui un link si può trovare, nel seguente ordine: :link - indica tutti i link che hanno un attributo href;:visited - quando il link è già stato visitato;:hover - quando si passa con il puntatore sopra il link;:active - quando il link viene premuto. Ecco un esempio dello stile dei link: a:link { color: blue; } a:visited { color: purple; } a:hover { color: green; } a:active { color: red; } Nel caso non venisse seguito l'ordine elencato, se inseriamo come ultimo stato il visited, il suo stile andrà a sovrascrivere gli stati active e hover, e il link sarebbe sempre viola anche se ci passiamo sopra o lo premiamo con il mouse.
Il pseudo-selettore any-link è un selettore CSS che consente di selezionare gli elementi che sono sorgenti di un link ipertestuale, ovvero tutti gli elementi che hanno un attributo href. L'attributo è nativo dei tag <a>, <link> e <area>. Maggiori informazioni sono disponibili sul documento di specifica HTML. Ogni elemento che accetta e ha un attributo href è un link ipertestuale e come tale verrà selezionato con :any-link. Questo strumento è piuttosto utile nel caso volessimo selezionare tutti i link all'interno di un documento HTML che potrebbero sembrare slegati e senza modificare il markup della pagina. Questo selettore possiamo definirlo una versione potenziata di :link, dato che questo seleziona tutti i link escludendo quelli nello stato :visited, mentre :any-link unisce tutto. Ecco di seguito un esempio con il selettore :any-link in azione: <a href="#">Questo è un link!</a> :any-link { color: red; background-color: yellow; } CodePen Embed Fallback È utile tenere in considerazione che si potrebbe ottenere lo stesso risultato anche con il selettore :matches(), infatti utilizzando :matches(:link, :visited) potremmo selezionare gli stessi elementi che otteniamo con :any-link. Degno di nota è il fatto che attualmente la specifica attuale è alla ricerca di un nome alternativo per questo selettore. Non è chiaro se il nome cambierà in futuro, ma sappiamo che in passato il selettore :matches() si chiamava :any(), e questo potrebbe sicuramente essere un indizio. Supporto dei Browser Il pseudo-selettore :any-link è considerata ancora una funzione sperimentale ed è parte della specifica Selettori di Livello 4, che è attualmente in bozza. Per il supporto completo è necessario utilizzare i vari prefissi: :-webkit-any-link { } :-moz-any-link { } :any-link { } Si ricorda di non separare i selettori con le virgole e inserirli in un'unica regola dato che i browser ignorano interamente le regole con parti a loro non comprensibili. [caniuse feature="css-any-link"]
La pseudo-classe :blank si basa sulla pseudo-classe :empty. Proprio come :empty, :blank seleziona solamente elementi che non contengono nulla al loro interno oppure contengono solo un commento HTML. La differenza tra le due pseudo-classi è che :empty seleziona anche gli elementi che contengono spazi bianchi, cosa che :empty non fa. p:blank { display: none; } La regola appena riportata andrà a selezionare solamente paragrafi come quelli riportati di seguito, che verrebbero selezionati anche con :empty: <p></p> <p><!-- Questo è un commento --></p> Tuttavia, a differenza di :empty, verranno selezionati anche paragrafi come i seguenti: <p> </p> <p> <!-- Un commento con spazi bianchi --> </p> Al momento :blank fa ancora parte della bozza Selettori CSS Livello 4 e non è supportato da alcun browser. Mozilla supporta la propria versione di :blank con un nome diverso, utilizzando il suo prefisso: :-moz-only-whitespace. L'esempio riportato di seguito illustra il funzionamento di :blank utilizzando la versione di Mozilla, e di conseguenza, per ora, è funzionante solamente sul browser Firefox: CodePen Embed Fallback
La pseudo-classe :checked in CSS consente di selezionare gli elementi che sono nello stato checked (selezionato o spuntato) . È associata solamente agli elementi per l'inserimento di dati (<input>) dei tipi radio button e checkbox. Il selettore :checked seleziona i radio button e le checkbox quando sono selezionate o su uno stato attivo. Se non sono selezionate o spuntate dall'utente, non verranno selezionate. Un semplice esempio che possiamo fare è selezionare la label di una checkbox che è stata spuntata, e cambiare il colore del testo: <input type="checkbox" id="casella" name="casella"> <label for="casella">Testo della checkbox</label> input[type=checkbox] + label { color: black; font-weight: normal; } input[type=checkbox]:checked + label { color: red; font-weight: bold; } Il testo della label di default sarà nero con pesantezza normale, ma quando la casella verrà spuntata il testo diventerà rosso e i grassetto. Testo della checkbox Nell'esempio appena riportato abbiamo visto come la pseudo-classe :checked sia utile per migliorare l'accessibilità di un modulo, rendendo più evidente una casella che è stata selezionata. Il :checked potrebbe essere utilizzato anche su input nascosti ma con la label visibile per realizzare applicazioni interattive con l'utente.
Il pseudo-selettore :default può essere utilizzato per selezionare il valore predefinito in un gruppo di elementi associati tra loro, come per esempio il bottone radio che viene selezionato di default all'interno di un gruppo di bottoni. input[type="radio"]:default + label { color: yellow; font-weight: bold; } Il codice CSS dell'esempio andrà a selezionare l'etichetta appartenente al bottone radio che viene selezionato di default all'interno di un gruppo di più bottoni radio: rosso giallo verde Il testo dell'etichetta del pulsante giallo sarà in grassetto e di colore giallo, ovviamente nei browser che supportano il selettore. Altri Esempi Negli esempi seguenti viene dimostrato il funzionamento del selettore con il pulsante di invio predefinito all'interno di un gruppo di bottoni, con l'opzione predefinita di un menu a tendina, con il bottone radio che ha l'attributo checked impostato e con le caselle di controllo spuntate di default. CodePen Embed Fallback Supporto dei Browser I vari browser supportano questo selettore a vari livelli. Su Firefox il supporto è completo, mentre i browser basati su Webkit supportano :default sui bottoni ma non sui pulsanti di opzione o sulle caselle di controllo, mentre su Opera la situazione è invertita. Ricapitolando: Firefox supporta :default sulle checkbox, sui radio buttons e sugli input di tipo submit;I browser basati su WebKit (tra cui Chrome e Safari) supportano :default sui pulsanti submit;Opera supporta :default sulle checkbox e sui radio buttons;Internet Explorer non supporta :default in alcun modo. [caniuse feature="css-default-pseudo"]
La pseudo-classe :dir() consente di selezionare gli elementi in base alla direzione della lingua, così come impostato sul markup HTML. Ci sono solamente due direzioni in cui la lingua può essere impostata in un documento, ovvero da sinistra a destra e da destra a sinistra. Questo selettore consente di applicare un determinato stile agli elementi in base alla direzione in cui è orientata la lingua. <div class="elemento"> Testo contenuto all'interno dell'elemento. </div> <div class="elemento" dir="rtl"> Anche questo testo è contenuto all'interno dell'elemento, ma sarà orientato nella direzione opposta. </div> .elemento:dir(rtl) { background: black; color: white; } Questa pseudo-classe accetta come parametro solamente un singolo valore e non funzionerà correttamente se più di un valore viene inserito. Esempio Di seguito ecco un esempio di uno stile applicato in base alla direzione del testo. Attenzione, attualmente l'esempio funzionerà solamente sul browser Firefox. CodePen Embed Fallback Differenza tra :dir(rtl) e [dir=rtl] Possiamo anche selezionare un elemento in base alla direzione della lingua utilizzando un selettore per attributo: .elemento[dir=rtl] { background: black; color: white; } La differenza principale è che mentre [dir=rtl] seleziona gli elementi solamente in base a quello che è stabilito nella sintassi HTML, la controparte :dir(rtl) sarà in grado di rilevare anche le impostazioni della lingua attraverso lo user agent dell'utente che visita il sito. Questo consentirà al selettore di agire anche su elementi la cui direzione non è deliberatamente specificata nell'HTML. Questo ci risolve un grosso problema, dato che gli elementi in cui non è esplicitamente indicata la direzione della lingua, erediteranno l' attributo dir dell'antenato più vicino che ne contiene uno. Ciò può portare a uno scenario in cui l'utilizzo [dir=rtl] seleziona altri elementi non desiderati. Supporto dei Browser Attualmente solo Firefox e Firefox su Android supportano questo selettore. [caniuse feature="css-dir-pseudo"]
La pseudo-classe :disabled consente di applicare uno stile CSS solamente agli elementi HTML che possono ricevere input dagli utenti ma sono disabilitati. Secondo la specifica CSS è un selettore che consente di applicare dello stile a un elemento in base alle interazioni dell'utente con quell'elemento. input:disabled { background-color: gray; } Gli elementi HTML a cui può essere impostato l'attributo disabled, ovvero disabilitato, sono: button, input, textarea, optgroup, option e fieldset. Le due sintassi valide per impostare questo attributo sono disabled="disabled" oppure, a partire da HTML5, anche disabled="true | false", utilizzando un valore booleano. Per definizione, un elemento è disabilitato quando non può essere attivato da parte dell'utente, ovvero non può essere selezionato, cliccato, accettare un input o essere messo a fuoco. Lo stile di questi elementi disabilitato può essere definito utilizzando questo attributo: CodePen Embed Fallback Il selettore :disabled può essere concatenato ad altri selettori, come per esempio :like, :before o :after per aggiungere dei testi o delle icone utili a fornire un feedback visivo all'utente. Qualsiasi proprietà che possa essere animata attraverso le Transizioni CSS o le Animazioni CSS sarà animata anche quando l'attributo disabled viene attivato o disattivato su un dato elemento HTML. Questo può essere utile per aggiungere delle animazioni ai form.
La pseudo-classe :empty in CSS consennte di selezionare, dato un selettore, tutti gli elementi che non contengono al loro interno un child, letteralmente un "figlio", ovvero un altro elemento all'interno di essi. div:empty { background-color: red; } Il codice dell'esempio appena riportato andrà a selezionare ogni elemento <div> che al suo interno non ha altri elementi. Possiamo visualizzare come si comporterebbe con il seguente blocco di codice HTML: <div> <p>Questo elemento ha del contenuto!</p> </div> <div> <ul> <li>Anche questo elemento</li> <li>ha del contenuto.</li> </ul> </div> <div> <!-- Questo elemento invece no, ha solo un commento, che non è considerato contenuto! --> </div> Gli elementi vuoti Un elemento si considera vuoto quando non c'è nulla tra il tag di apertura e quello di chiusura: <div></div> Questo include anche gli elementi che contengono al loro interno solo commenti: <div><!-- Un commento non è considerato contenuto! --> </div> Anche se l'elemento in questione ha al suo interno del contenuto generato utilizzando la proprietà content di CSS attraverso :before o :after, viene comunque considerato vuoto. div:before { content: "Il contenuto rimane vuoto"; } Gli elementi NON vuoti Un elemento è detto avere dei "figli" (Child) se contiene un altro elemento, del testo o spazi bianchi tra i suoi tag. Tutti e tre gli elementi nel seguente esempio non sono considerati vuoti. <div> <p>Questo elemento contiene un altro elemento.</p> </div> <p>Il testo viene considerato child di un elemento.</p> <strong> </strong> Anche l'ultimo elemento viene considerato non-vuoto dato che ha degli spazi vuoti al suo interno. Per questo motivo dobbiamo stare attenti soprattutto con gli editor di testo, che potrebbero aggiungere degli spazi vuoti all'interno degli elementi a nostra insaputa (es: per l'indentazione).
La pseudo-classe :enabled in CSS può essere utilizzata per selezionare elementi che possono essere messi a fuoco e non sono disabilitati, quindi elementi abilitati. Questo selettore è associato solamente con gli elementi dei moduli, ovvero <input>, <select> e <textarea>. Gli elementi abilitati sono quelli che l'utente può selezionare, in cui può inserire dati o più semplicemente che possono essere premuti o messi a fuoco. Per esempio, con il seguente codice CSS andiamo a rendere la label di ogni checkbox abilitata di colore verde e con il carattere in grassetto. input:enabled + label { color: green; font-weight: bold; } Ecco di seguito come appare in azione. Le label delle caselle che possiamo selezionare sono di colore verde e con il testo grassetto: Tizio Caio Sempronio In teoria con il selettore :enabled potremmo selezionare anche gli elementi <a>, <area> o <link> con l'attributo href impostato, tuttavia i browser non supportano questo scenario. Possiamo applicare dello stile anche agli elementi button, input, textarea, optgroup, option e fieldset che non sono disabilitati. Quando l'elemento <menu> è supportato, possiamo anche applicare dello stile agli elementi <command> e <li> che sono contenuti all'interno di esso, se non sono disabilitati. Tieni presente che, anche se la cosa può sembrare controintuitiva, con questo attributo non è possibile selezionare gli elementi con gli attributi contenteditable e tabindex. La specifica CSS non supporta questa modalità d'uso e nemmeno i browser.
Il selettore :first-child può essere utilizzato per applicare uno stile al primo elemento contenuto immediatamente all'interno di un altro elemento. Viene definito nella specifica CSS come una "pseudo-classe strutturale", quindi viene utilizzata per applicare regole di stile ad un elemento in base alla sua relazione con il contenuto genitore o fratello. Supponiamo di avere una lista e di voler modificare lo stile del primo elemento per indicare, per esempio, l'ultimo elemento aggiunto o il più importante: <ul> <li>Primo elemento</li> <li>Secondo elemento</li> <li>Terzo elemento</li> <li>Quarto elemento</li> </ul> Invece di assegnare una classe o un id all'elemento, possiamo utilizzare il selettore :first-child per applicare delle regole solo ad esso: li:first-child { font-size: 150%; font-weight: bold; text-color: red; } Il comportamento di :first-child è molto simile a :first-of-type ma è meno specifico. Mentre :first-child seleziona solamente il primo elemento figlio immediatamente contenuto in un elemento genitore, :first-of-type seleziona la prima occorrenza di un determinato elemento. Nell'esempio sopra il risultato sarebbe lo stesso, ma solo perché è anche la prima volta che un elemento <li> si trova nel documento HTML. Capiamo quindi che :first-child può essere utilizzato per identificare un elemento in relazione a tutti i suoi fratelli parigrado, e non solo a parigrado dello stesso tipo. Supporto dei Browser Il selettore :first-child è stato introdotto con CSS3, quindi le versioni più vecchie dei browser non lo supportano, per questo è possibile utilizzare un Polyfill per Internet Explorer.
Il selettore :first-of-type consente di selezionare, in CSS, la prima occorrenza di un particolare elemento all'interno di un documento HTML. Nella specifica CSS3 è definita come una "pseudo-classe strutturale", quindi che consente di definire lo stile di un elemento in base alla sua relazione con l'elemento genitore e fratello. Supponiamo di avere il seguente documento HTML: <article> <h1>Titolo dell'Articolo</h1> <p>Questo è il paragrafo introduttivo dell'articolo con il riassunto del contenuto</p> <p>Contenuto vero e proprio dell'articolo, si compone di tanti paragrafi e questo è il primo</p> <p>Altro paragrafo di contenuto dell'articolo</p> </article> Vogliamo in questo esempio rendere il primo paragrafo più evidente, aumentando le dimensioni del testo e rendendolo in grassetto. Invece di assegnare una classe o un id, possiamo utilizzare il selettore :first-of-type per selezionarlo: p:first-of-type { font-size: 150%; font-weight: bold; } Il comportamento di :first-of-type è molto simile a quello di :nth-child, ma con la differenza di essere meno specifico. Infatti, nell'esempio appena fatto, se avessimo usato p:nth-child(1), non sarebbe stato selezionato nulla dato che il paragrafo non è il primo figlio dell'elemento <article>. Questo significa che :first-of-type può selezionare un particolare tipo di elemento in una particolare disposizione in relazione a fratelli parigrado simili, ma non a tutti i fratelli parigrado. Supporto dei Browser Il selettore :first-of-type è stato introdotto con CSS3, questo significa che le versioni più vecchie dei browser non supportano questo pseudo-elemento.
La pseudo-classe :focus, è utilizzata, in CSS, per applicare lo stile ad un elemento che è strato messo a fuoco. Generalmente quando un utente ci clicca o preme sopra oppure lo seleziona con il tasto Tab della tastiera. textarea:focus { background: yellow; } Ecco un esempio live: .prova:focus { background: yellow; } Prova a cliccare qui! Per quanto riguarda gli <input> e le <textarea> sono "a fuoco" quando sono selezionate e pronte per inserire del testo (quando il cursore diventa la barra verticale che lampeggia). Un'altro utilizzo per la pseudo-classe :focus è per quando si naviga tra gli elementi utilizzando il taso Tab. Molti browser hanno uno stile predefinito per gli elementi a fuoco, solitamente un contorno esterno puntinato. Molto semplice da rimuovere ma altamente sconsigliato, se non si pianifica già di rimpiazzarlo con un'alternativa adeguata. Oltre agli input e alle textarea viste prima, anche gli elementi <a> e <button> hanno uno stato :focus predefinito, ma in HTML5 è possibile assegnarne uno a qualsiasi elemento. Entrambi gli attributi contenteditable e tabindex funzionano. Compatibilità dei Browser [caniuse feature="mdn-css_selectors_hover"]
La pseudo-classe :hover consente, in CSS, di selezionare gli elementi quando il cursore del mouse (o un'altro dispositivo di puntamento) è sopra ad essi. Comunemente viene utilizzato con i link <a>. a:hover { color: red; } Quindi, quando il puntatore del mouse passerà sopra ad un link con quello stile, esso diventerà rosso. .demolink { color: #000 !important } .demolink:hover { color: red !important } Passa sopra questo link Per applicare lo stile ad un link correttamente, bisogna applicare i selettori seguendo la regola dell'ordine LVHA: :link — :visited — :hover — :active Nei browser moderni :hover funziona su qualsiasi elemento, ma su IE 6 e inferiori funziona solo sui link. Il problema sui Touchscreen La pseudo-classe :hover crea diversi problemi sui touchscreen. In base al browser l'hover potrebbe non essere mai attivato, attivarsi solo per un breve momento dopo che l'utente ha toccato un elemento o continuare a rimanere attivo anche dopo che l'utente ha smesso di toccare l'elemento, fino a quando non ne toccherà un'altro. Link utili MDN :hover Supporto dei Browser [caniuse feature="mdn-css_selectors_hover"]
Il selettore :invalid ti consente di selezionare gli elementi <input> che non contengono un contenuto valido, che viene determinato dall'attributo type. Nella specifica dei Selettori CSS di Livello 3, :invalid viene definito come un "pseudo-selettore di validità", questo significa che viene utilizzato per applicare delle regole di stile ad elementi interattivi in base all'input dell'utente. Questo selettore viene utilizzato principalmente per fornire agli utenti un feedback mentre interagiscono con un form sulla pagina. Nel seguente esempio si applicano delle regole CSS per colorare il campo "email" di rosso o di verde, in base alla validità dell'input dell'utente, che deve seguire la struttura valida di un indirizzo email: CodePen Embed Fallback Osserva come il primo campo rimanga verde (quindi contenuto valido) anche se non è inserito nulla al suo interno. Questo è perché il campo è opzionale, quindi lasciandolo bianco si potrebbe comunque inviare il form. Per risolvere questo problema, il secondo campo ha l'attributo required impostato a true, rendendo la compilazione obbligatoria per poter inviare il modulo. Il selettore :invalid può essere concatenato con altri pseudo-selettori come :focus per validare l'input solamente mentre l'utente lo sta scrivendo. Con :before e :after si possono aggiungere icone o testi per fornire all'utente un feedback ulteriore. Si possono utilizzare anche selettori come input[value=""] per validare solamente campi di input con un determinato contenuto. Supporto dei Browser
Ci sono vari sistemi per selezionare un elemento in CSS. Il sistema più semplice è utilizzando il tag, per esempio p { } o h1 { }. Per andare più nello specifico possono essere utilizzate le Classi e gli ID, entrambe attributi di un elemento specificati nel codice HTML. Tuttavia è possibile utilizzare un qualsiasi attributo dell'elemento come selettore per esso. La sintassi per selezionare un elemento con un suo qualsiasi attributo è la seguente: a[href="http://www.gbfactory.it"] { color: yellow; } Questa è un selettore di corrispondenza esatta (exact match), che seleziona solamente sui link con l'esatto valore dell'attributo href specificato, in questo caso http://gbfactory.it. Le diverse tipologie Il selettore per attributo di default distingue tra lettere maiuscole e minuscole, e l'attributo viene inserito tra parentesi quadre [ ]. Esistono sette diverse tipologie di corrispondenze che possono essere effettuate con un selettore di attributi, e la sintassi è diversa per ciascuno di essi. Ogni selettore di attributi si basa sulla sintassi del selettore di corrispondenza esatta: tutti iniziano con il nome dell'attributo e terminano con un segno di uguale seguito dal valore dell'attributo desiderato, solitamente indicato tra virgolette. Ciò che va tra il nome dell'attributo e il segno di uguale è ciò che fa la differenza tra i selettori. [data-value] { /* L'attributo è presente */ } [data-value="pippo"] { /* L'attributo ha l'esatto valore specificato */ } [data-value*="pippo"] { /* L'attributo contiene il valore specificato da qualche parte all'interno di esso */ } [data-value~="pippo"] { /* L'attributo ha il valore specificato all'interno di una lista separata da spazi */ } [data-value^="pippo"] { /* L'attributo inizia con la stringa specificata */ } [data-value|="pippo"] { /* L'attributo inizia con la stringa specificata in una lista separata da trattini */ } [data-value$="pippo"] { /* L'attributo finisce con la stringa specificata */ } Contiene il valore: la stringa specificata è contenuta all'interno del valore dell'attributo come unico valore, come valore in un elenco di valori o come parte di un altro valore. Per utilizzare questo selettore, aggiungi un asterisco (*) prima del segno di uguale. Ad esempio, img[alt*="foto"] selezionerà tutte le immagini che contengono nell'attributo alt la parola foto, come per esempio "foto di un gatto" ma anche "mostra fotografica", perché il valore "foto" è contenuto in entrambe gli alt. Il valore è in un elenco separato da spazi: la stringa specificata è l'unico valore di attributo o è un valore inserito in un elenco di valori separati da spazi. A differenza del selettore "contiene", questo selettore non cercherà il valore come un frammento di parola. Per utilizzare questo selettore è necessario aggiungere un tilde (~) prima del segno di uguale. Ad esempio, img[alt~="foto"] selezionerà le immagini con il testo alt impostato a "foto di gatti" e " mostra di foto", ma non "mostra di fotografia d'epoca" (che il selettore "contiene" avrebbe invece selezionato). Il valore inizia con: il valore dell'attributo inizia con la stringa inserita. Per utilizzare questo selettore, bisogna aggiungere un accento circonflesso (^) prima del segno di uguale. Non dimenticare che la distinzione tra maiuscole e minuscole è importante. Ad esempio, img[alt^=”foto”] selezionerà le immagini con il testo alternativo impostato a “foto di un gatto” e “fotografia in bianco e nero”, ma non funzionerà con “Fotografo” perché la parola inizia con una lettera maiuscola. Il valore è il primo in un elenco separato da trattini: questo selettore è molto simile al selettore "inizia con". Qui, il selettore corrisponde a un valore che è l'unico valore o è il primo in un elenco di valori separati da trattini. Per utilizzare questo selettore, aggiungi un carattere pipe (|) prima del segno di uguale. Ad esempio, img[data-soggetti|="gatto"] selezionerà le immagini con data-soggetti impostato, per esempio a "gatto-cane-tartaruga", ma non l'immagine che ha come data-soggetti un valore di "cane-gatto-pesce". Il valore termina con: il valore dell'attributo termina con il termine selezionato. Per utilizzare questo selettore, aggiungi un segno di dollaro ($) prima del segno di uguale. Per esempio, a[href$=".pdf"] seleziona tutti i link che portano ad un URL che termina con .pdf. Nota: in alcune circostanze è possibile utilizzare il valore senza virgolette, ma le regole per la selezione senza virgolette sono diverse nei vari browser. Le virgolette funzionano sempre, quindi è meglio inserirle per essere sicuri che il selettore funzionerà come desiderato. Dato che i valori vengono trattati come stringhe, non è necessario eseguire l'escape dei caratteri per farli corrispondere, che sarebbe invece necessario nel caso si utilizzassero caratteri speciali in una classe o ID. [class="C*a!s||^ =W? s £d/*-5 e"] { text-size: 150px; } Corrispondenza non case-sensitive Come accennato in precedenza, le stringhe dei valori degli attributi fanno distinzione tra maiuscole e minuscole, ma questo comportamento può essere modificato per fare in modo che il selettore non distingua tra maiuscole e minuscole. Per fare questo dobbiamo aggiungere la lettere i prima della parentesi quadra di chiusura, in questo modo: [attribute="valore" i] { /* regole css */ } La corrispondenza senza distinzione tra maiuscole e minuscole potrebbe essere utile per selezionare attributi il cui contenuto è imprevedibile, per esempio scritto da persone. Ad esempio, potremmo voler cambiare il colore di ogni paragrafo che contenga la scritta "GB FACTORY", che tuttavia potrebbe venir scritta con lettere sia maiuscole che minuscole. È possibile farlo utilizzando solo CSS, con il selettori così impostato senza distinzione tra maiuscole e minuscole per selezionare tutte le possibili variazioni: Combinare più selettori È possibile combinare un selettori di attributi con altri selettori, come Tag, Classi o ID. Possono essere anche combinati più selettori di attributi insieme, come è visibile nell'ultimo dei seguenti esempi: div[attribute="valore"] { /* regole css */ } .elemento[attribute="valore"] { /* regole css */ } #testo[attribute="valore"] { /* regole css */ } img[alt~="gatto"][src*="catimages.com"] { /* regole css */ } Selettori di attributi in JavaScript e in jQuery I selettori di attributi possono essere utilizzati in jQuery come avviene per qualsiasi altro selettore CSS. In JavaScript vanilla possono essere utilizzati con document.querySelector() e document.querySelectorAll().
Il combinatore child (figlio) in CSS è il simbolo maggiore di (>), che viene utilizzato in questo modo: ul > li { color: red; } Letteralmente significa "selezionare elementi che sono discendenti diretti di un elemento". In questo caso vengono selezionate tutte le voci della lista (<li>) che sono diretti discendenti di un elenco (<ol>). <ul> <li>Questo elemento sarà selezionato</li> <li>E anche questo elemento</li> <ol> <li>Questo elemento invece no</li> <li>Non è discendente diretto di ul</li> </ol> <li>Anche questo qui viene selezionato</li> </ul> Ecco come appare questo eleneco: CodePen Embed Fallback Sinonimi Il combinatore child in italiano può essere tradotto come combinatore figlio, ma può essere chiamato anche: selettore child;selettore figlio;selettore discendente diretto;combinatore discendente diretto.
Il selettore di una classe in CSS inizia con un punto (.) seguito da una stringa, come nel seguente esempio: .classe { /* regole css */ } Un selettore di una classe seleziona tutti gli elementi che hanno un attributo classe corrispondente a quello inserito. Ad esempio, questo elemento HTML: <h1 class="titolo">Benvenuti!</h1> può essere selezionato con il seguente codice CSS: .titolo { font-size: 100px; } Il nome di una classe può essere rappresentato da una qualsiasi parola che inizi con una lettera, un trattino (-) o un trattino basso (_). Si possono utilizzare anche i numeri, ma un numero non può essere il primo carattere o il secondo carattere dopo un trattino. Volendo si potrebbe eseguire l'escape dei caratteri della classe, ottenendo dei selettori piuttosto strani: .\3A \`\( { /* seleziona gli elementi con class=":`(" */ } Un elemento può avere più di una classe: <p class="introduzione giallo"> Questo paragrafo riceverà gli stili di .introduzione e .giallo </p> Gli elementi con più classi assumeranno lo stile stabilito da tutte le regole CSS specificate per ognuna delle classi che l'elemento possiede. Si possono combinare anche più classi per selezionare specifici elementi: /* seleziona solo gli elementi con entrambe le classi */ .introduzione.giallo { font-weight: bold; } Il seguente esempio mostra come i selettori a classe singola sono diversi dai selettori combinati: CodePen Embed Fallback È anche possibile limitare un selettore di classe a un solo elemento specifico, che viene chiamato "qualifica del tag": /* seleziona solamente i tag ul con la classe elenco */ ul.elenco { text-color: red; } Livello di Specificità Un selettore di classe è considerabile più potente di un selettore di elementi (Es: a { }) ma meno potente di un selettore di ID (Es: #header { }). La specificità aumenta quando si combinano i selettori di classe o si limita il selettore ad un elemento specifico. Classi CSS con JavaScript Con JavaScript è possibile accedere e manipolare le classi di un determinato elemento utilizzando classList. Ad esempio possiamo aggiungere una classe: document.getElementById('header').classList.add('navbar'); Nel seguente esempio vediamo come aggiungere e rimuovere una classe CSS alla pressione di un bottone utilizzando qualche riga di JavaScript: CodePen Embed Fallback La libreria jQuery mette a disposizione altri metodi per lavorare con le classi, tra cui: .addClass() - aggiunge una classe;.removeClass() - rimuove una classe;.toggleClass() - aggiunge/rimuove una classe;.hasClass() - controlla se ha una classe;
Il selettore Discendente in CSS è un qualsiasi selettore che si compone di spazi bianchi inseriti tra altri due selettori senza un combinatore. Ecco alcuni esempi del selettore di discendenza: ul li { } ul li a { } header .nav { } .article h1 { } content p { } div figure img { } Descriviamo il primo esempio ul li { }. Questo indica a CSS di selezionare ogni elemento li che è discendente di una lista non ordinata. Discendente può voler dire in qualsiasi punto all'interno del documento. Potrebbe essere un discendente diretto oppure essere un discendente dopo 3 livelli, rimane comunque un discendente. Questo selettore agisce diversamente dal Combinatore Child (>), che seleziona solamente i discendenti diretti, ovvero al livello immediatamente successivo rispetto all'elemento specificato. Illustriamo graficamente come agirebbe il nostro esempio: <ul> <li>Questo elemento verrebbe selezionato</li> <ul> <li>Anche questo elemento</li> <ul> <li>Così come questo elemento qui</li> </ul </ul> </ul>
Il combinatore di elementi adiacenti di pari livello, o fratelli adiacenti (adjacent sibiling) non è un selettore CSS da solo, ma un modo per combinare due selettori. Per esempio: h1 + p { color: red; } Il segno più (+) è il combinatore di elementi adiacenti tra loro e sullo stesso livello, posizionato tra due selettori veri e propri (h1 e p). Tradotta, questa istruzione significa "selezionare qualsiasi tag paragrafo che si trovi direttamente dopo un tag h1, senza nulla tra i due tag". Ecco un esempio in cui ciò si verificherebbe: <div class="card"> <h1>Titolo della card</h1> <p>Questo è il testo contenuto all'interno della card.</p> </div> Questo combinatore può tornare utile quando si utilizza un markup Html di tipo semantico e si ha la necessità di adeguare il CSS a determinati scenari in cui gli elementi sono uno direttamente accanto all'altro. CodePen Embed Fallback