Cara Membuat Background Warna Selang-Seling hanya dengan CSS

Code tersebut merupakan contoh implementasi CSS untuk memberikan warna background selang-seling pada setiap baris di dalam elemen div dengan id "ur".

Dengan cara kerja tersebut, setiap elemen paragraf pada urutan ganjil akan diberikan warna latar belakang #f2f2f2, sedangkan untuk urutan genap akan diberikan warna latar belakang #ddd. Hasilnya adalah sebuah tampilan dengan warna latar belakang yang selang-seling pada setiap barisnya. Contoh hasilnya adalah sebagai berikut:

Contoh CSS Background Warna Selang-seling

25: Assalamualaikum..

ma: Wa'alaikum salam warahmatullahi

25: Pak bisa minta info rincian harga ahsana madani sooko

ma: Ini dengan siapa

ma: Dimana

25: An-- pak
Saya di brawijaya
Kpn lalu ke kantor pemasaran di meri msh tutup

ma: Besok dihubungi rekan saya ya
Saya Afandi Kusuma

25: Inggih. Trimakasih

Kode yang dipasang adalah sebagai berikut:

1

<h2>Contoh CSS Background Warna Selang-seling</h2>
  <style>
    #ur p:nth-child(odd) {
      background-color: #f2f2f2;
    }
    #ur p:nth-child(even) {
      background-color: #ddd;
    }
    p{margin:0;padding:3px 12px}
  </style>

  <div id="ur">
    <p>25: Assalamualaikum..</p>
    <p>ma: Wa'alaikum salam warahmatullahi</p>
    <p>25: Pak bisa minta info rincian harga ahsana madani sooko</p>
    <p>ma: Ini dengan siapa</p>
    <p>ma: Dimana</p>
    <p>25: An-- pak<br />Saya di brawijaya<br />Kpn lalu ke kantor pemasaran di meri msh tutup</p>
    <p>ma: Besok dihubungi rekan saya ya <br />Saya Afandi Kusuma</p>
    <p>25: Inggih. Trimakasih</p>
  </div>

Pada bagian CSS, "#ur p:nth-child(odd)" digunakan untuk memilih setiap elemen paragraf pada urutan ganjil di dalam elemen div "ur", sedangkan "#ur p:nth-child(even)" digunakan untuk memilih setiap elemen paragraf pada urutan genap di dalam elemen div "ur".

Selanjutnya, "background-color" digunakan untuk memberikan warna latar belakang pada elemen yang dipilih. Pada kode tersebut, warna latar belakang untuk urutan ganjil adalah "#f2f2f2", sedangkan untuk urutan genap adalah "#ddd".

Terakhir, untuk mengatur margin dan padding pada elemen paragraf, ditambahkan CSS "p{margin:0;padding:3px 12px}".