Pandangan ke Selektor Struktural Struktural Tipe CSS-CSS3
Satu hal yang saya sukai tentang CSS3 adalah penambahan pemilih baru yang memungkinkan kita untuk menargetkan elemen secara khusus tanpa bergantung pada kelas, id atau atribut elemen lainnya, dan yang akan kita bahas di sini adalah pemilih berikut, : tipe pertama.
Itu : tipe pertama pemilih akan menargetkan anak pertama dari elemen yang ditentukan, misalnya, potongan di bawah ini akan menargetkan yang pertama h2 di halaman web.
h2: deklarasi tipe pertama / * style * /
Itu : tipe pertama juga sama dengan : n-of-type (1), jadi daripada hanya memilih pertama dari jenisnya, kita bisa lebih jauh memilih yang kedua, yang ketiga dan seterusnya. Cuplikan berikut akan menargetkan yang kedua h2 elemen pada halaman web.
h2: nth-of-type (2) / * style declaration * /
: tipe pertama” vs.. “:anak pertama”
Sepertinya dua penyeleksi ini melakukan hal yang sama, tetapi bukan itu masalahnya. Mari kita lihat demonstrasi berikut:
Katakanlah kita memiliki lima elemen paragraf yang dibungkus dalam a div, seperti ini:
Pragraf 1
Pragraf 2
Pragraf 3
Ayat 4
Pragraf 5
Sekarang, kami ingin memilih paragraf pertama menggunakan :anak pertama pemilih.
p: anak pertama padding: 5px 10px; border-radius: 2px; latar belakang: # 8960a7; warna: #fff; perbatasan: 1px solid # 5b456a;
Dan seperti yang sudah kami antisipasi, paragraf pertama berhasil dipilih.
- : Demo anak pertama
Namun, ketika kita tambahkan elemen yang berbeda sebelumnya paragraf pertama, katakanlah sebuah h1, seperti cuplikan di bawah ini:
Tajuk 1
Pragraf 1
Pragraf 2
Pragraf 3
Ayat 4
Pragraf 5
paragraf pertama tidak akan dipilih, sebagai anak pertama di dalam div aku s tidak lagi paragraf, tapi sekarang menjadi h1.
Jadi, ini adalah situasi di mana : tipe pertama pemilih datang untuk menyelesaikan masalah.
p: first-of-type padding: 5px 10px; border-radius: 2px; latar belakang: # a8b700; warna: #fff; perbatasan: 1px solid # 597500;
- : Demo tipe pertama
Itu “Terakhir” Pemilih
Dimana ada “pertama”, maka akan ada juga “terakhir”.
Kebalikan dari dua penyeleksi yang telah kita diskusikan di atas adalah dua penyeleksi berikut; itu :anak terakhir dan : tipe terakhir. Mereka pada dasarnya sama dengan dua di atas, kecuali mereka memang menargetkan anak terakhir dari elemen yang ditentukan.
Misalnya, cuplikan di bawah ini akan menargetkan paragraf terakhir di dalam div.
p: anak terakhir padding: 5px 10px; border-radius: 2px; latar belakang: # 8960a7; warna: #fff; perbatasan: 1px solid # 5b456a;
- : Demo anak terakhir
Dan cuplikan ini juga akan menargetkan paragraf terakhir dalam situasi yang sama seperti yang telah kita bahas di atas; kali ini diikuti langsung oleh elemen yang berbeda.
p: jenis terakhir padding: 5px 10px; border-radius: 2px; latar belakang: # a8b700; warna: #fff; perbatasan: 1px solid # 597500;
- : Demo tipe terakhir
Selectivizr
Seperti fitur baru lainnya di CSS3, penyeleksi ini tidak didukung di browser lama, terutama Internet Explorer 6 hingga 8, dengan pengecualian untuk :anak pertama pemilih, seperti yang telah ditambahkan sejak CSS2.1. Ini relatif :anak terakhir hanya ditambahkan dalam CSS3.
Jadi, jika semua penyeleksi yang kami sebutkan di sini benar-benar diperlukan untuk webite Anda, Anda dapat menggunakan Perpustakaan JavaScript yang disebut Selectivizr untuk meniru fungsi pemilih CSS3 itu.
Selectivizr bergantung pada perpustakaan JavaScript lain agar berfungsi, seperti jQuery, Dojo, Prototype, dan Mootools; dan melihat dari tabel perbandingan di situs web resmi, Mootools tampaknya mampu menangani semua pemilih.
Jadi, mari kita sertakan bersama dengan Selectivizr, sebagai berikut:
Komentar bersyarat di atas akan memastikan bahwa perpustakaan ini hanya akan dimuat di Internet Explorer 8 dan di bawah.
Terakhir, Anda dapat melihat demo dari tautan berikut dan sekarang seharusnya berfungsi di browser modern dan lama (IE8 dan di bawah). Anda juga dapat mengunduh file sumber untuk pemeriksaan lebih lanjut. Nikmati.
- Demo
- Sumber Unduhan
