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:

<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.


Jangan Lupa Share !!!

75
11 shares, 75 points

Apa Reaksimu ?

Bingung Bingung
9
Bingung
Kesal Kesal
7
Kesal
OMG OMG
9
OMG
Takut Takut
8
Takut
Keren Keren
7
Keren
Sedih Sedih
1
Sedih
Posciety Tech

Advanced Competent

Official Channel Posciety.Com yang menyuguhkan informasi dan updates seputar dunia teknologi. Dikelola oleh tim Posciety Tech.

0 Komentar

Pilih Format
Artikel
Default, Membuat Artikel/Cerita
List
Listicle, Misalnya: 3 Hal yang Wajib Dilakukan Saat...
Kuis Kepribadian
Membuat kuis Tentang Kepribadian
Poll
Vote untuk Membuat Keputusan atau Mencari Saran
Meme
Membuat Meme dari Gambar Normal yang Kamu Miliki