Grouping dan Nesting Selector CSS

Grouping Selector CSS

Grouping selector CSS ialah teknik menuliskan perintah CSS dimana elemen yang memiliki style CSS yang sama akan dikelompokkan/digroupkan dengan elemen lainnya. Tujuannya ialah untuk meminimalisir penulisan perintah CSS yang sama secara berulang-ulang.

Untuk mengelompokkan elemen, Anda hanya perlu menambahkan tanda koma pada perintah CSS.

Contoh : Perintah dibawah, elemen h1, h2, dan p memiliki warna yang sama yaitu green(sebelum dikelompokkan).

h1
{
color:green;
}
h2
{
color:green;
}
p
{
color:green;
}

Tentunya kode diatas sangat tidak efisien. Untuk itu kita perlu mengelompokkan perintah diatas agar lebih efisien.

h1,h2,p
{
color:green;
}

Nesting Selector CSS

Nesting selector CSS ialah memberikan style CSS pada elemen tertentu yang sudah ditandai, baik menggunakan class ataupun id.

Contoh dibawah, satu style ditentukan untuk semua elemen p. Kemudian style kedua diberikan untuk semua elemen yang memiliki class konten. Dan style ketiga hanya untuk elemen p didalam class konten.

p
{
color:blue;
text-align:center;
}
.konten
{
background-color:red;
}
.konten p
{
color:white;
}