CSS3: Verschillende stijlen op basis van bestand

Nederlandse smartphonegebruikers betalen vaker met creditcard dan via iDeal
november 11, 2014
CSS3: Tekst goed weergeven in tabellen
december 3, 2014

Het kan voorkomen dat je op basis van verschillende linken in je pagina een andere stijl wil. Bijvoorbeeld alle e-mail linken moeten een plaatje hebben van een envelop en een PDF link zou een PDF logotje krijgen. De snippet hieronder geeft aan de hand van een bestand extensie een andere stijl weer.

 

a[href^="http://"]{
padding-right: 20px;
background: url(external.gif) no-repeat center right;
}
/* emails */
a[href^="mailto:"]{
padding-right: 20px;
background: url(email.png) no-repeat center right;
}

/* pdfs */
a[href$=".pdf"]{
padding-right: 20px;
background: url(pdf.png) no-repeat center right;
}

 

Comments are closed.