Modifikasi Style Elemen HTML Dengan CSS Kecuali Elemen Awal atau Terakhir

CSS

Terkadang kita ingin membuat style untuk elemen HTML tapi gak semua elemen memiliki style yang sama, terutama bagian awal atau akhir elemen.

Misalkan kita membuat list untuk artikel,

<ul>
	<li>Ini list pertama</li>
	<li>Ini list kedua</li>
	<li>Ini list ketiga</li>
	<li>Ini list keempat</li>
	<li>Ini list kelima</li>
</ul>

kita ingin memberikan style dengan menambahkan padding, margin dan border diantara list. 

Border hanya ada diantara list, tidak ada di paling atas maupun paling bawah. Kita bisa tambahkan CSS seperti berikut:

li:not(:last-child) {
  border-bottom: solid thin #e0dede;
  margin-bottom: 7px;
  padding-bottom: 7px
}

CSS diatas menggunakan tambahan :not(:last-child) di element yang kita inginkan. Artinya style tersebut dilakukan kecuali di elemen terakhir (disini "Ini list kelima").

Di contoh kita buat border-bottom, jadi bisa menggunakan :not(:last-child), tapi kalau kita menggunakan border-top kita bisa menggunakan :not(:first-child).

Mudah banget kan? Semoga bermanfaat.

Artikel Terkait

Populer