0 0
Read Time43 Second
.mydiv:nth-child(4n+1){
 background:red;
}

* bacanya dari kanan ke kiri. jadi select child pertama lalu akan jalan/tambah 4child (child ke 5 akan terselect)

Contoh lain

.mydiv:nth-child(4n+2){
 background:green;
}

* ini jadi select child dua lalu akan jalan/tambah 4child (child ke 6 akan terselect)

Contoh lain lagi

.mydiv:nth-child(2n+1){
 background:skyblue;
}

* Jadi select child pertama lalu akan jalan/tambah 2child (child ke 3 akan terselect)

untuk mempermudah lihat ilustrasi

TAMBAHAN : SELEKSI LAST CHILD 

  • select HANYA urutan kedua element terakhir
    .header__menu ul li:nth-last-child(-2n+2) {background: magenta; }
  • Select SEMUA urutan ketiga element terakhir
    .header__menu ul li:nth-last-child(-1n+2) {background: magenta; }
  • select HANYA urutan ketiga terakhir
    .header__menu ul li:nth-last-child(-3n+3)
  • Select SEMUA urutan 3 terakhir
    .header__menu ul li:nth-last-child(-1n+3)

About Post Author

TahuBanyak

Happy
Happy
0 %
Sad
Sad
0 %
Excited
Excited
0 %
Sleepy
Sleepy
0 %
Angry
Angry
0 %
Surprise
Surprise
0 %
Previous post GULP Exercise
Next post Copy to Clipboard on Click

Average Rating

5 Star
0%
4 Star
0%
3 Star
0%
2 Star
0%
1 Star
0%

Leave a Reply

Your email address will not be published. Required fields are marked *