Pseudo element merupakan bagian dari sebuah elemen, seperti after, before, first-child, dan lain sebagainya.

Pseudo element ini bisa digunakan untuk memanipulasi tampilan dari website.

Dalam artikel kali ini akan dibahas trik yang bisa manfaatkan untuk melakukan styling pada elemen html.

first-child & last-child

First-child digunakan untuk melakukan styling elemen pertama dari struktur html. Sedangkan last-child digunakan untuk melakukan styling pada elemen terakhir dari struktur html.

<ul>
<li>First Child of List</li>
<li>Second Child of List</li>
<li>Last Child of List</li>
</li>

Maka pada css bisa diimplementasikan code sebagai berikut

li:first-child{
// Style untuk first element
}

li:last-child{
// Style untuk last element
}

Odd & Even

Odd & Even biasa digunakan untuk styling elemen table row (<tr>). Odd digunakan untuk styling elemen ganjil, sedangkan even untuk elemen genap.

tr:nth-child(odd){
//your styles go here
}

tr:nth-child(even){
//your styles go here
}

N Child

N Child biasa digunakan untuk melakukan styling elemen ke N. Khusus pada kasus ini bisa menggunakan operasi matematis seperti 2n+1, yang berarti elemen ke 2 * n + 1.

li:nth-child(2n){
//styling element 2,4,6,...
}

li:nth-child(3n+3){
//styling element 3,6,9,12,...
}

Leave a comment

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