Belajar & Memahami :nth-child HTML & CSS – Gaya Unik Berbeda Setiap Baris

Buat kalian yang punya rencana untuk kasih desain di web HTML CSS dengan tema ganjil genap, misalnya kalian mempunyai beberapa baris pada halaman web dan setiap barisnya ingin diberi desain silang-silang (ganjil genap).

Nah, pada desain ganjil sama semua dan setiap desain genap sama semua tapi setiap desain ganjil dan genap berbeda.

Bagaimana cara menggunakannya ? Apakah harus memberi class pada masing-masing element / tag HTML nya ? Ribet dong kalo seperti itu, cara gampang nya seperti ini nih. Misalnya kalian punya file HTML seperti ini:

ads by posciety

<p>Web Master</p>
<p>Web Designer</p>
<p>Web Developer</p>
<p>Animation</p>
<p>Adobe Dreamweaver</p>
<p>Sublime Text</p>

Biasanya kalian menggunakan class di masing2 tag p agar dapat dipanggil classnya dan diberikan gaya berbeda-beda ? Gak jadi masalah, tapi disini ada cara mudahnya yaitu menggunakan nth-child.

Disini saya mencontohkan untuk ganjil genap terlebih dahulu walaupun sebetulnya ada banyak desain yang lainnya misalnya baris pertama dan kedua saja yang sama sisanya berbeda atau baris nomor 5 dan 9 yang sama sedangkan yang lainnya berbeda. Bisa juga seperti itu, tapi pada artikel ini saya bagikan yang ganjil genap dulu ya.

Silahkan buat di CSS kalian tag p diatas tambahkan :nth-child sesudahnya, seperti ini:

p:nth-child(odd) {
      background-color: #c41617;
      padding: 5px;
      color: white;
   }
p:nth-child(even) {
      background-color: #333;
      padding: 5px;
      color: white;
      font-weight: bold;
   }

Kalian lihat perbedaan nth-child pertama dan yang kedua ? Ya, (odd) dan (even). Odd adalah ganjil dan Even adalah genap. Artinya yang ganjil akan mengikuti gaya yang ditentukan nth-child(odd) dan yang genap akan ditentukan oleh nth-child(even) dan sekarang kita lihat hasilnya. (lihat gambar)

Masih bingung ? Lihat : Video tutorial cara beri desain ganjil genap HTML CSS.

See ? Begitulah cara penggunaannya untuk ganjil dan genap. Tidak hanya tag p saja, kalian bisa explore ke elemen-elemen lainnya dan silahkan dicoba mulai mendesain yang keren dengan nth-child ini.

Selamat mencoba !

:nth-child ini digunakan juga di tutorial tentang membuat website responsive menggunakan framework Bootstrap part 7 / 10.