7 days of unlimited WordPress themes, plugins & graphics - for free!* Unlimited asset downloads! Start 7-Day Free Trial
Advertisement
  1. Web Design
  2. CSS

Selettori CSS di livello 4 da tenere d’occhio

Scroll to top
Read Time: 6 mins

Italian (Italiano) translation by Francesco Turlon (you can also view the original English article)

È ormai tempo di imparare qualcosa di nuovo in CSS, non è vero?

Siamo abituati a nuove caratteristiche introdotte nei frameworks a destra e a manca, ma spesso dimentichiamo che nuove funzionalità vengono costantemente sviluppate nei principali linguaggi web usati quotidianamente.

Bozza editoriale del W3C

La bozza dei selettori CSS Livello 4 del 15 Gennaio delinea un bel salto qualitativo nelle funzionalità per CSS.

Prima di cominciare dovreste sapere che le regole CSS che trovate in questo articolo, oggi, non funzioneranno nei vostri browsers. Anche l'ultimo e più aggiornato dei browsers. La ragione è dovuta al fatto che una bozza è proprio questo - una bozza. Questa è la quarta versione della bozza dei selettori di livello 4, cominciata nel 2011. I selettori proposti nella bozza sono una serie di specifiche per nuovi selettori proposti dagli editori del documento stesso, attraverso un bel po' di consultazione e collaborazione tra le persone della community che partecipano alla mailing list del W3C.

Quindi cosa significa? Significa che nell'immediato futuro, vedremo probabilmente implementate molte di queste funzionalità, e alcune verranno rilasciate in versioni di sviluppo di browsers come Chrome e Firefox.

Guardiamo alcuni di questi nuovi selettori!

1. :not(.warning, .alert)

Abbiamo già visto il selettore :not tra quelli di livello 3. Comunque, la bozza corrente dell'attuale selettore :not di livello 4 consente più argomenti con un accoppiamento più complesso.

Precedentemente, :not poteva essere usato solamente con un singolo selettore e non poteva essere combinato. Per esempio, il :not di livello 3 poteva somigliare a:

Questa regola sceglie tutti gli anchor tags che non hanno un href che includa la stringa "somesite.com". Ma con la nuova bozza, possiamo fare cose più interessanti.

A breve vedremo il selettore :has, ma per ora di seguito abbiamo un selettore che sceglie tutti i links che non sono discendenti diretti di elementi con classe col o una classe che inizia con col (come le classi della grid di Bootstrap col-md-4). Ignorerà anche anchor tags che hanno elementi img come discendenti.

Questo selettore ci permette di fare cose come:

Sceglie quindi tutti i divs che non sono fratelli diretti di tutti gli altri divs.

Andando più nel dettaglio

Con l'aggiunta della pseudo-classe :nth-last-child potremmo fare anche cose come:

Sceglierebbe tutti i divs tranne quelli che sono discendenti diretti degli elementi .container e sono gli ultimi due fratelli.

Come potete vedere, queste regole possono diventare molto potenti e complesse; ma aggiungiamo ancora più flessibilità al miscuglio introducendo lo pseudo-selettore :has.

2. :has(div, p, > a)

Lo pseudo-selettore :has vi permetterà di scegliere elementi che hanno argomenti come figli. Per esempio, per scegliere tutti gli anchor tags che hanno elementi immagine come figli, userete la seguente sintassi:

In ogni caso :has non è limitato a semplici selettori. Potrete combinare :has con i selettori :not e :nth-* per crearne altri piuttosto complessi.

Per esempio, scegliamo elementi table che hanno più di dieci righe:

Combinazioni di :has() e :not()

E scegliere un elemento body il cui ultimo figlio non è un footer?

3. :any-link

Attualmente possiamo puntare agli hyperlinks usando :link e :visited. Questo va oltre l'usare semplicemente il selettore a, dal momento che verificherà la presenza di href e controllerà la cronologia utente per determinare se un dato link è stato visitato.

Con i selettori di livello 4 proposti potremmo modificare lo stile di tutti i link, visitati o meno, usando :any-link. Lo stile sopra è equivalente a:

4. :scoped

Fino ai selettori di livello 4, CSS aveva uno scope globale. In altre parole, se aggiungete il seguente CSS:

tutti i divs ricevono la regola di stile color: #444. (Questo presuppone che nessun altro stile venga applicato.) I selettori di livello 4 permettono a stylesheets e style tags di diventare scope di un elemento:

In questo esempio abbiamo applicato uno scope ad un tag style dentro l'elemento aside. Le regole all'interno di questo tag style si applicheranno solamente ai discendenti dell'elemento parente di style.

5. :matches(selector1, selector2)

Lo pseudo-selettore :matches ci permette di controllare se un elemento si trova all'interno di una lista di elementi. Per esempio se voleste selezionare tutti i tags anchor, paragraph e h2 all'interno di un tag article, potreste farlo nel seguente modo:

Questo sostituisce la precedente e più verbosa sintassi:

Nota: Per questa versione della bozza, :matches() potrebbe non essere utilizzato con :not, :has, o qualche altro :matches annidato.

6. Selettore discendente esplicito >>

Avrete sicuramente familiarità con il carattere spazio che ci permette di scrivere regole discendenti, come ad esempio tutti gli anchor tags all'interno di un div:

Ma finora non abbiamo visto un selettore discendente esplicito. Con i selettori di livello 4 ne abbiamo uno: >>.

Notate che ciò porta all'utilizzo di un carattere extra non necessario nel vostro CSS, dal momento che potete giungere al medesimo risultato con un singolo carattere di spazio, quindi state attenti a come lo utilizzate. Presumibilmente agirà come ponte tra il selettore figlio immediato, >, e il selettore d'accesso shadow-dom, >>>.

7. Selettore Tabella In Colonna ||

Questo selettore è una gradita aggiunta per lo stile delle tabelle. Guardiamo il markup di una semplice tabella:

Modificare lo stile di elementi raggruppati orizzontalmente (ad esempio all'interno della stessa riga) è sempre stato lineare da realizzare. Modificare lo stile di elementi raggruppati verticalmente è tutto un altro tipo di gioco.

Per modificare lo stile di tutti gli elementi che sono una parte della colonna con classe personnel-info, potremmo aggiungere più classi al markup e cambiare direttamente il loro stile, oppure, guardando ai selettori di livello 4, potremmo utilizzare il selettore ||. Il selettore || vi permetterà di selezionare gli elementi td come segue:

Conclusioni

Con questo si conclude la nostra panoramica di alcune delle funzionalità che vedremo nei selettori di livello 4! Questi nuovi set di strumenti, potenti e salva-byte, non sono ancora completamente definiti, ma i browsers stanno cominciando a implementarli nelle loro forme più sperimentali, così continuate a controllare gli aggiornamenti alle specifiche. Naturalmente quando verranno formalizzati li analizzeremo qui su Tuts+!

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Web Design tutorials. Never miss out on learning about the next big thing.
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.