Contoh Sederhana Pseudo Class Target CSS3

05/11/2016    Ekky Ridyanto    976     Website

Halo teman teman hari ini kita akan memberikan contoh lagi agar teman teman semuanya dapat memahami dasar dari penggunaan pseudo class target tentunya pada CSS3 tapi contohnya kita gunakan elemen yang berbeda. Jadi dengan pseudo class :target ini ada banyak hal yang dapat teman teman lakukan. Salah satunya kita akan buat struktur HTMLnya dengan membuat tiga elemen <div> dengan menentukan id yang berbeda beda seperti berikut

pada kasus ini kita akan memberikan warna yang berbeda beda pada elemen boxnya tapi berdasarkan id yang ditargetkan dengan menulis CSS seperti ini

jadi maksud kode diatas ketika ada elemen yang id-nya box1 lalu ditargetkan di URInya maka berikan warna backgroundnya menjadi salmon. Tapi Ketika teman teman menargetkan box2 di URI

maka tidak akan terjadi apa apa. Kenapa? karena yang saya aktifkan targetnya hanya untuk box1 saja jadi penulisan targetnya lebih spesifik dari penulisan sebelumnya. Untuk itu kalau ingin aktif disemua elemen boxnya maka kita harus buat yang baru untuk box2 dan box3 lalu tentukan warna background pada boxnya mau seperti apa. Tapi kita jarang sekali mengubah langsung URInya biasanya kita aktifkan menggunakan link atau elemen <a> misalkan kita menuliskan seperti ini

tapi pada bagian attributenya kita isi #box1 agar attribute href tersebut dapat terhubung dengan elemen <div> yang idnya box1. Lakukan hal yang sama untuk elemen box yang lainnya. Maka hasilnya ketika saya klik linknya maka boxnya akan berganti ganti warnanya berdasakan target yang dipilih. Selamat mencoba.

No data.

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More