บางครั้งบล็อกของเรามักจะมีแหล่งข้อมูลให้ผู้อื่นดาวน์โหลด แต่ใน PJBlog ลิงก์ดาวน์โหลดทั้งหมดจะแสดงด้วยไอคอนเพียงไอคอนเดียว ด้วยตัวเลือกแอตทริบิวต์ CSS3 ใหม่ เทคโนโลยีใหม่นี้สามารถแสดงไอคอนที่แตกต่างกันตามประเภทไฟล์ที่ดาวน์โหลด
สิ่งที่เราจะใช้ที่นี่คือ
E [att$=value]{…}
หมายถึงการเลือกองค์ประกอบ E ทั้งหมดที่ลงท้ายด้วยค่า จากนั้นเราสามารถเขียนได้ดังนี้:
a[href$='.torrent'] {
การขยาย: 5px 20px 5px 0;
พื้นหลัง: url โปร่งใส (icons/icon_torrent.gif) ไม่ซ้ำตรงกลางด้านขวา;
-
a[href$='.vcard'] {
การขยาย: 5px 20px 5px 0;
พื้นหลัง: url โปร่งใส (icons/icon_vcard.gif) ไม่ซ้ำตรงกลางขวา;
-
a[href$='.exe'] {
การขยาย: 5px 20px 5px 0;
พื้นหลัง: url โปร่งใส (icons/icon_exe.gif) ไม่ซ้ำตรงกลางขวา;
-
a[href$='.dmg'], a[href$='.app'] {
การขยาย: 5px 20px 5px 0;
พื้นหลัง: url โปร่งใส (icons/icon_dmg.gif) ไม่ซ้ำตรงกลางขวา;
-