Selettore di attributi CSS3 Targeting del tipo di file

Questo articolo è parte del nostro "Serie di tutorial HTML5 / CSS3" - dedicato a farti diventare un designer e / o sviluppatore migliore. Clicca qui per vedere più articoli della stessa serie.

Il selettori di attributi è una funzionalità davvero utile per selezionare un elemento senza aggiungere alcun superfluo id o classi. Finché l'elemento mirato ha un attributo come href, src e genere non dobbiamo farlo.

I selettori dell'attributo in realtà sono stati in giro dai CSS 2.1, e ora con alcuni altri tipi di selettori di attributo aggiunti nelle specifiche CSS3, siamo in grado di indirizzare l'attributo dell'elemento ancora più specificatamente.

E, in questo post, useremo una delle sintassi per selezionare il tipo di file inserito come parte del valore dell'attributo.

La sintassi e il supporto del browser

Il tipo di file è sempre alla fine del nome del file. Quindi, per selezionare quello tipo di file possiamo usare la seguente sintassi [Attr $ = "valore"]. Questa sintassi utilizza il $ = operatore che punterà alla fine del valore dell'attributo, ad esempio:

 a [href $ = ". pdf"]: before background: url ('... /images/document-pdf-text.png') no-repeat;  

Lo snippet precedente selezionerà ogni collegamento a cui termina il valore dell'attributo .PDF e inserire un'icona di word-document in :prima pseudo-elemento.

PDF Icon Source: Icone di fuga

Mentre questo è un utilizzo comune di questo selettore, possiamo sicuramente andare oltre.

Per quanto riguarda la compatibilità del browser; sebbene questa sintassi sia ufficialmente introdotta come specifica CSS3, in realtà è stata supportata da allora Internet Explorer 7, quindi puoi applicarlo in tutta sicurezza attraverso tutti i tuoi progetti.

L'esempio

Non lo saprai mai se non provi. Dobbiamo solo provare qualcosa di nuovo per capire meglio qualcosa che non capiamo ancora. Quindi, qui dimostreremo come questa sintassi può essere molto utile e utile per indirizzare un elemento in una particolare struttura HTML che era un po 'difficile da applicare usando solo i semplici CSS.

Sotto, abbiamo un Struttura HTML5 per elencare tre immagini con la sua didascalia. È solo a scopo dimostrativo, il tuo markup non deve essere esattamente come il seguente frammento (ad esempio potresti avere solo un'immagine o anche altre tre immagini), ma il punto è sapere come questa sintassi può essere applicata una particolare struttura HTML.

Ciascuna delle immagini sopra elencate ha i seguenti formati o estensioni, jpg, png, e gif. Hanno anche una didascalia che rappresenta la sua estensione dell'immagine; questa didascalia fungerà quindi da etichetta immagine.

Quindi, ecco il piano, daremo diversi colori di sfondo per la didascalia per ciascuna estensione di immagine diversa. L'immagine JPG otterrà un verde Colore didascalia, il PNG otterrà blu, e infine la gif otterrà viola.

Per prima cosa, impostiamo la posizione del tag di figura relativamente, perché stiamo andando ad applicare assoluto posizione per la didascalia.

 figura posizione: relativa;  

Aggiungi un po 'di decorazione per le immagini con bordi e ombre.

 img border: 5px solid #ccc; -webkit-box-shadow: 1px 1px 3px 0px rgba (0, 0, 0, .5); box-shadow: 1px 1px 3px 0px rgba (0, 0, 0, .5);  

E quindi, impostiamo lo stile e il posizionamento predefiniti per la didascalia. La didascalia dell'immagine o etichetta avrà 50px quadrati.

 img + figcaption color: #fff; posizione: assoluta; inizio: 0; a destra: 0; larghezza: 50 px; altezza: 50 px; altezza della linea: 50px; allineamento del testo: centro;  

Ora è il momento di aggiungere il colore di sfondo. Per fare ciò, possiamo combinare il selettore degli attributi con il selettore fratello adiacente, +.

 img [src $ = ". jpg"] + figcaption background-color: # a8b700;  

Lo snippet precedente verrà indirizzato a ogni immagine con l'attributo source che termina con .jpg, quindi il selettore adiacente troverà l'elemento accanto ad esso. In questo caso il figcaption sarà aggiunto con il # a8b700 colore di sfondo.

E qui ci sono tutti i codici per il resto dei formati immagine, .png e .gif.

 img [src $ = ". png"] + figcaption background-color: # 389abe;  img [src $ = ". gif"] + figcaption background-color: # 8960a7;  

Ora, vediamo come viene pubblicato dal link di dimostrazione in basso, oppure puoi scaricare il codice sorgente per esaminarlo offline.

• dimostrazione
• Scarica fonte

Le fonti di immagini sono le seguenti: MacPro 1, MacPro 2 e MacPro 3

Conclusione

Speriamo che tu possa vedere il lato elegante dello stile usando un selettore speciale, come quello che abbiamo provato a dimostrare sopra usando il selettore degli attributi. Quindi, la prossima volta che imposterai il tuo HTML, ti raccomandiamo caldamente di fare qualche ricerca sul fatto che il tuo stile possa essere applicato usando un selettore speciale, piuttosto che rovinare il tuo markup adeguatamente strutturato con extra classi o id.

Ci sono in realtà altri due nuovi selettori di questo tipo che copriremo nei prossimi post, quindi rimanete sintonizzati.