CSS3 Atribut Selector Menargetkan Jenis File

Artikel ini adalah bagian dari kami "Seri Tutorial HTML5 / CSS3" - didedikasikan untuk membantu Anda menjadi desainer dan / atau pengembang yang lebih baik. Klik disini untuk melihat lebih banyak artikel dari seri yang sama.

Itu penyeleksi atribut adalah fitur yang sangat berguna untuk memilih elemen tanpa menambahkan berlebihan id atau kelas. Selama elemen yang ditargetkan memiliki atribut seperti href, src dan mengetik kita tidak harus melakukannya.

Penyeleksi atribut sebenarnya sudah ada sejak CSS 2.1, dan sekarang dengan beberapa jenis pemilih atribut ditambahkan dalam spesifikasi CSS3, kami dapat menargetkan atribut elemen lebih khusus.

Dan, dalam posting ini, kita akan menggunakan salah satu sintaks untuk memilih jenis file yang dimasukkan sebagai bagian dari nilai atribut.

Sintaks dan Dukungan Browser

Itu jenis file selalu di akhir nama file. Jadi, untuk memilih itu jenis file kita bisa menggunakan sintaks berikut [attr $ = "value"]. Sintaks ini menggunakan $ = operator yang akan menargetkan akhir nilai atribut, misalnya:

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

Cuplikan di atas akan memilih setiap tautan yang diakhiri dengan nilai atribut .pdf dan masukkan ikon word-document-icon di menu :sebelum elemen semu.

Sumber Ikon PDF: Ikon Fugue

Meskipun ini adalah pemanfaatan umum pemilih ini, kita pasti bisa melampaui itu.

Mengenai kompatibilitas browser; walaupun sintaks ini secara resmi diperkenalkan sebagai spesifikasi CSS3, sebenarnya sudah didukung sejak itu Internet Explorer 7, sehingga Anda dapat menerapkannya dengan aman melalui semua desain Anda.

Contoh

Anda tidak akan pernah tahu, jika Anda tidak pernah mencoba. Kita hanya perlu mencoba sesuatu yang baru untuk mendapatkan pemahaman yang lebih baik tentang sesuatu yang belum kita pahami. Jadi di sini, kita akan menunjukkan bagaimana sintaks ini dapat sangat membantu dan berguna untuk menargetkan elemen dalam struktur HTML tertentu yang dulu agak sulit diterapkan hanya dengan menggunakan CSS biasa.

Di bawah ini, kami memiliki Struktur HTML5 untuk daftar tiga gambar dengan judulnya. Ini hanya untuk tujuan demonstrasi, markup Anda tidak harus persis seperti cuplikan berikut (mis. Anda mungkin hanya memiliki satu gambar atau bahkan tiga gambar lainnya), tetapi intinya adalah Anda harus tahu bagaimana sintaks ini dapat diterapkan di struktur HTML tertentu.

Setiap gambar yang tercantum di atas memiliki format atau ekstensi berikut, jpg, png, dan gif. Mereka juga memiliki keterangan yang mewakili ekstensi gambarnya; keterangan ini kemudian akan bertindak sebagai label gambar.

Jadi, inilah rencananya, kami akan memberikan warna latar belakang yang berbeda untuk keterangan untuk setiap ekstensi gambar yang berbeda. Gambar JPG akan mendapatkan hijau warna keterangan, PNG akan mendapatkan biru, dan terakhir gif akan mendapatkannya ungu.

Pertama, mari kita tentukan posisi tag figur secara relatif, karena kita akan berlaku mutlak posisi untuk keterangan.

 gambar posisi: relatif;  

Tambahkan sedikit hiasan untuk gambar dengan garis tepi dan bayangan.

 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);  

Dan kemudian, kami mengatur gaya dan posisi default untuk teks. Keterangan gambar atau label akan memiliki 50px persegi.

 img + figcaption color: #fff; posisi: absolut; atas: 0; kanan: 0; lebar: 50px; tinggi: 50px; garis-tinggi: 50px; perataan teks: tengah;  

Sekarang saatnya untuk menambahkan warna latar belakang. Untuk melakukannya, kita bisa menggabungkan pemilih atribut dengan pemilih saudara yang berdekatan, +.

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

Cuplikan di atas akan menargetkan setiap gambar dengan atribut sumber berakhir dengan .jpg, maka pemilih yang berdekatan akan menemukan elemen di sebelahnya. Dalam hal ini figcaption akan ditambahkan dengan # a8b700 warna latar belakang.

Dan di sini adalah semua kode untuk sisa format gambar, .png dan .gif.

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

Sekarang, mari kita lihat bagaimana hasilnya langsung dari tautan demo di bawah ini, atau Anda dapat mengunduh sumber untuk memeriksanya secara offline.

• Demo
• Sumber Unduhan

Sumber gambar adalah sebagai berikut: MacPro 1, MacPro 2 dan MacPro 3

Kesimpulan

Kami harap Anda dapat melihat sisi elegan gaya menggunakan pemilih khusus, seperti yang telah kami coba perlihatkan di atas menggunakan pemilih atribut. Jadi, lain kali Anda mendesain HTML Anda, kami sangat menyarankan Anda melakukan riset tentang apakah styling Anda dapat diterapkan menggunakan pemilih khusus, daripada merusak markup terstruktur dengan benar dengan tambahan kelas atau id.

Sebenarnya ada dua penyeleksi baru dari jenis ini yang akan kita bahas di posting berikutnya, jadi tetap disini.