Belajar Pseudo Element CSS :nth-child

Konichiwa-minna~!! (~'-')~ Sudah lama saya tidak posting,walaupun blog ini sepi pengunjung tapi bodo amat suka suka ana,saya mau posting tentang trik css Pseudo Element,buat lengkapnya akan saya bahas di postingan berikutnya (mungkin 1 tahun lagi baru saya posting .__.v)

Yap sebenarnya CSS Pseudo Element itu ada beberapa,contohnya seperti di bawah ini:
:first-child
:last-child
:nth-child(n)
:nth-of-type
:first-of-type
:last-of-type
:nth-last-of-type
:only-of-type

tapi pada kali ini saya hanya ingin membahas :nth-child saja,kenapa? karena saya mulai males liat bocah bocah yang plagiatin style warna warni seperti di blog saya -_-.

Jadi begini css pseudo element selectors yang ingin saya bahas yaitu nth-child adalah selektor yang berperan untuk menDESIGN suatu objek dengan design yang berbeda-beda, "Lho Kenapa ga di design satu per satu?" , RIBET vroh :v. Saya kasih contoh deh misalnya kalian ingin membuat suatu menu

• Cupuw LUW!
• Pecundang LUW!
• Tjoepoew LOEW!
• Tjoepoew LOEW!

CSS MENU

.menu_cupuw {
margin:auto;
width:200px;
background:#222;
}
.menu_cupuw ul {
width:200px;
margin-left:-40px;
}
.menu_cupuw li {
padding:5px;
list-style:none;
width:190px;
color:#fff;
}
.menu_cupuw li a:hover {
color:#fff;
}

Nah misal kalian ingin membuat suatu menu,trus kalian ingin mendesignnya setiap 1 menu itu berbeda warna,daripada kalian susah-susah membuat html background sendiri,lebih mudah kalian menggunakan CSS :nth-child, ini dia contoh menu yg sudah di beri css pseudo element

• Cupuw LUW!
• Pecundang LUW!
• Tjoepoew LOEW!
• Tjoepoew LOEW!

CSS MENU YANG DI UBAH

.menu_cupuw2 {
margin:auto;
width:200px;
background:#222;
}
.menu_cupuw2 ul {
width:160px;
background:#222;
}
.menu_cupuw2 li {
padding:5px;
list-style:none;
width:190px;
background:#222;
color:#fff;
margin-left: -40px;
}
.menu_cupuw2 li a:hover {
color:#fff;
}
.menu_cupuw2 li:nth-child(2){
background:#e74c3c;
}
.menu_cupuw2 li:nth-child(3){
background:#53acff;
}
.menu_cupuw2 li:nth-child(4){
background:#fea100;
}

gimana? sudah dapet pengertiannya? kalo masih kurang ngerti bisa liat di halaman awal blog saya yang ini,coba arahkan kursor ke setiap post yang ada,muncul kotak kan? warnanya berbeda-beda kan? Nah itu dia

jadi rumusnya begini
:nth-child(X) itu berarti : objek ke X
jika kita masukan angka
:nth-child(2) itu berarti  : objek ke 2
Nah untuk mendesignnya kita perlu INDUK dari rangka html tersebut
seperti yang di menu tadi,

.menu_cupuw2 li:nth-child(2){
background:#e74c3c;
}

warna kuning = INDUK
warna merah = PSEUDO ELEMENT
warna biru    = OBJEK KE-2

nah sudah mengerti? kalau belum paham coba di pahami,dibaca sedikit-sedikit,dan jangan lupa di praktekan!

eits,yang bisa kita design bukan MENU SAJA! semuanya bisa kita edit asalkan dengan penempatan CSS yang benar dan tepat!

Sekian artikel ini,mudah-mudahan membantu
Jya Mata~~!!