Bosen bikin baris belang menggunakan fungsi dengan php? Jika ganjil misalkan berwarna biru dan jika genap berwarna putih… Caranya ternyata lebih simpel yaitu dengan selector nth-child pada css level 3.
Scriptnya kayak gini:

1
2
3

.belang li:nth-child(2n+1){
color:#00CCFF;
}

sedangkan jika diterapkan pada baris tabel seperti ini:

1
2
3

.belang tr:nth-child(2n+1){
background:#00CCFF;
}

Penjelasan untuk script diatas adalah terletak pada rumus 2n+1. Baris teratas menggunakan n=0 dan selanjutnya jadi perlakuan color:#00CCFF adalah untuk baris-baris sebagai beikut:

  1. (2×0) + 1 = 1 = baris pertama
  2. (2×1) + 1 = 3 = baris ketiga
  3. (2×2) + 1 = 5 = baris kelima
  4. (2×3) + 1 = 7 = baris ketujuh
  5. (2×4) + 1 = 9 = baris kesembilan
  6. dst….

Nah.. jika anda membutuhkan belang dengan loncatan yang berbeda silahkanmembuat rumus anda sendiri misalkan (3n+1), atau (2n) dll.
Untuk melihat demonya ada disini. Oke selamat mecoba ya…

Incoming search terms for the article: