Halo sobat, selamat datang kembali di website tips dan trik Dumet School. Pada kesempatan kali ini kita akan belajar tentang Eksperimen nth-child, first-child dan last-child Dengan CSS dimana beberapa fungsi ini sering sekali di gunakan pada saat kita membuat layout menggunakan html dan css. Dengan kita bereksperimen akan menemukan suatu cara yang lebih simple untuk membuat layout website. Pada latihan kali ini kita akan menggunakan firt-child dan last-child dan kita pakai untuk menentukan suatu value dan merubah layout selama tag html nya sama posisi atau urutannya.
Kali ini sebagai contoh saya akan buat sebuat layout sebanyak 3 dan saya berikan class box, atau teman – teman buat terlebih dahulu seperti gambar di bawan ini
Kemudian save dengan nama index.html, lalu masukkan css nya
<style type="text/css">
*{padding: 0; margin: 0}
.container{width: 900px; margin: auto; background-color: lightgreen; padding: 30px 15px}
ul{overflow: hidden;}
ul li{list-style:none; width:250px; float: left; padding: 5px}
.box{width: 250px; background-color: orange;}
</style>
Jika sudah save dan jalankan pada browsernya
Bisa kalian lihat pada gambar di atas ini masih ada space banyak sekali, kita berikan margin-right
kemudian teman – teman save dan refresh pada browsernya
Bisa teman – teman lihat box yang terakhir bergeser kebawah, mengapa..??
Karena masih ada margin-right:60px yang artinya, ketiga box melebihi width container makanya bergeser kebawah, oke lanjut Eksperimen nth-child, first-child dan last-child Dengan CSS berikutnya kita berikan fungsi last-child untuk menghilangkan margin-right pada box terakhir
Maka hasilnya adalah
Karena kita sudah memberikan margin-right:0 dengan menggunakan last-child, selanjutnya kita tambahkan first-child dan nth-child nya
Maka akan menghasilkan
Bisa kalian lihat pada gambar di atas ini, text pada box pertama berubah menjadi warna merah karena kita memberikan perinta first-child yang terjadi adalah color akan berubah pada box pertama.
Yang terakhir kita berikan nth-child nya, saya akan menambahkan border pada setiap box dengan warna yang berbeda
Maka hasilnya seperti gambar di bawah ini
Box bergeser kebawah lagi, kita kurangi margin-right menjadi 55px pada ul li nya
Maka hasilnya sudah sejajar
Mudah sekali bukan..??
Baik, saya rasa sekian dulu pada artikel kali ini tentang Eksperimen nth-child, first-child dan last-child Dengan CSS kita berjumpa kembali pada tips dan trik yang akan datang. Semoga bermanfaat, terimakasih dan sampai jumpa.