Mengelompokkan CSS Selector

Oleh Unknown

Monday, May 25, 2015

Sekedar tambahan dari pembahasan sebelumnya tentang Belajar CSS Selector. Pada postingan sebelumnya sinahu coding mengulas tentang apa itu CSS Selector beserta contoh-contoh CSS Selector nya. Namun di sana hanya membahas bagaimana mendesain masing-masing elemen HTML dengan style CSS. Nah, sekarang bagaimana jika pada beberapa elemen HTML ingin kita samakan semua style CSS nya? Apa masih dengan format penulisan coding yang sama seperti CSS Selector sebelumnya?

Jawabannya tentu tidak. Karena beberapa elemen HTML jika ingin diberi style CSS yang sama, maka ada cara yang lebih sederhana. Ini disebut dengan Grouping Selectors, Mengelompokkan beberapa selector dengan satu style CSS.

Cara Grouping Selectors

Misalnya saya akan mendesain tampilan elemen HTML H1, H2, dan P dengan satu style. Saya ingin ketiganya dengan posisi tulisan di tengah dan berwarna hijau. Maka tidak perlu penulisannya seperti ini :

<style>
h1 {
    text-align: center;
    color: green;
}

h2 {
    text-align: center;
    color: green;
}

p {
    text-align: center;
    color: green;
}
</style>

<h1>Hai.. Aku Heading Pertama</h1>
<h2>Perkenalkan.. Aku Heading 2</h2>
<p>Kalau Aku ini si Paragraf.</p>

Meskipun format penulisan seperti itu tidak salah, tetapi ada cara yang lebih sederhana. Yaitu dengan mengelompokkan ketiga elemen tersebut menjadi satu, masing-masing nama elemen dipisahkan dengan tanda koma. Kenapa? Karena ketiganya memiliki style CSS yang sama. Sehingga bisa disederhanakan seperti ini :

<style>
h1, h2, p {
    text-align: center;
    color: green;
}
</style>

<h1>Hai.. Aku Heading Pertama</h1>
<h2>Perkenalkan.. Aku Heading 2</h2>
<p>Kalau Aku ini si Paragraf.</p>

Lebih simpel kan? Hasilnya akan sama dengan kode yang pertama. Oke, ini saja untuk kali ini tentang Cara Mengelompokkan CSS Selector. Semoga bermanfaat.

---