Cara Mendefinisikan Selector Lebih Dari Satu

Cara Mendefinisikan Selector Lebih Dari Satu adalah sebuah cara bagaimana cara kita untuk mendefiniskan beberapa selector atau tag HTML yang mempunyai property yang sama. Hal ini sebenarnya hampir sama dengan cara mendefinisikan property lebih dari satu.

Kita menggunakan koma (,) untuk melakukan grouping terhadap beberapa selector yang akan kita tulis kode CSS-nya. Sebagai contoh adalah kode CSS berikut:

h1, h2, h3, h4, h5, h6 {font-family:arial; color:blue}

Nah mudahkan! jadi setiap judul posting (h1 ... h6) akan mempunyai jenis huruf arial dan berwarna biru.

Class Selector

Nah kali ini kita akan berkenalan dengan yang namanya class, yaitu sebuah metode yang dapat kita gunakan untuk membuat beberapa tag HTML yang sama tetapi mempunyai property yang berbeda. Misalnya adalah tag <p> dapat mempunyai warna huruf merah dan biru.

Cara penulisan kode CSS adalah sebagai berikut:

p.merah{text-align:left; color:red}
p.biru{text-align:center; color:blue}

 Jadi, jika kita ingin mempunyai sebuah paragraph yang berwarna merah atau biru maka kita cukup menuliskan sebuah kode seperti berikut <p class="merah">...</p> atau  <p class="biru">...</p>

Kode HTML:

<p class="merah"> Ini adalah sebuah paragraph dengan warna tulisan merah dan rata kiri</p>
<p class="biru"> Ini adalah sebuah paragraph dengan warna tulisan biru dan rata tengah</p>

penulisan kode class diatas hanya berlaku untuk tag <p> dan tidak berlaku untuk tag HTML yang lainnya. Sehingga jika kita ingin memberlakukan kode class diatas untuk semua tag HTML maka penulisan kode class adalah sebagai berikut:

.merah{text-align:left; color:red}
.biru{text-align:center; color:blue}

Jadi, setiap tag HTML yang mempunyai class merah akan mempunyai property yang sama. Contohnya adalah kode HTML berikut.

Kode HTML

<p class="merah"> Ini adalah sebuah paragraph dengan warna tulisan merah dan rata kiri</p>
<H4 class="merah"> Ini adalah sebuah judul dengan warna tulisan merah dan rata kiri</H4>