Eksperimen nth-child, first-child dan last-child Dengan CSS

Halo sobat, selamat datang kembali di laman tips dan trik Source Code Aplikasi. Di kesempatan kali ini kita akan belajar mengenai Eksperimen nth-child, first-child dan last-child Dengan CSS dimana beberapa guna ini sering sekali di gunakan di ketika kita membangun layout menggunakan html dan css. Dengan kita bereksperimen akan menemukan suatu cara yang lebih simple bagi membangun layout laman. Di latihan kali ini kita akan menggunakan firt-child dan last-child dan kita  gunakan bagi menentukan suatu value dan merubah layout dalam kurun waktu tag html nya sama posisi atau urutannya.

Kali ini selaku contoh saya akan bikin sebuat layout sebanyak 3 dan saya berikan class box, atau teman – teman bikin 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>

Seandainya telah save dan jalankan di browsernya

Dapat kalian lihat di gambar di atas ini masih ada space banyak sekali, kita berikan margin-right

kemudian teman – teman save dan refresh di browsernya

Dapat teman – teman lihat box yang terakhir bergeser kebawah, kenapa..??

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 guna last-child bagi menghilangkan margin-right di box terakhir

Karenanya hasilnya yakni

Karena kita telah memberikan margin-right:0 dengan menggunakan last-child, berikutnya kita tambahkan first-child dan nth-child nya

Karenanya akan menghasilkan

Dapat kalian lihat di gambar di atas ini, text di box pertama-tama berubah menjadi warna merah karena kita memberikan perinta first-child yang terjadi yakni color akan berubah di box pertama-tama.

Yang terakhir kita berikan nth-child nya, saya akan menambahkan border di setiap box dengan warna yang berbeda

Karenanya hasilnya seperti gambar di bawah ini

Box bergeser kebawah lagi, kita kurangi margin-right menjadi 55px di ul li nya

Karenanya hasilnya telah sejajar

Gampang sekali bukan..??

Bagus, saya rasa sekianlah dulu di artikel kali ini mengenai Eksperimen nth-child, first-child dan last-child Dengan CSS kita berjumpa kembali di tips dan trik yang akan datang. Semoga bermanfaat, terimakasih dan hingga jumpa.

Sumber https://kursuswebsite.org