kombinasi

Anda tidak perlu mengulang beberapa selector dengan atribut yang sama, cukup pisahkan selector tersebut dengan koma (,).

Misalnya, Anda memiliki kode berikut:

h2 { warna: merah }

.thisOtherClass { warna: merah }

.yetAnotherClass { warna: merah }

Kemudian Anda dapat menulis:

h2, .thisOtherClass, .yetAnotherClass { warna: merah;

Dengan menggunakan komposisi, Anda dapat menentukan beberapa CSS sekaligus, sehingga menghemat banyak byte dan waktu.

Bersarang

Jika CSS terstruktur dengan baik, tidak perlu menggunakan terlalu banyak kelas atau penyeleksi pengenal. Ini karena Anda dapat menentukan penyeleksi di dalam penyeleksi. (Atau lebih baik dikatakan, pemilih konteks - oleh penerjemah)

Misalnya:

#top { warna latar: #ccc; bantalan: 1em }

#atas h1 { warna: #ff0 }

#top p { warna: merah; berat font: tebal;

Ini menghilangkan pemilih kelas atau pengidentifikasi yang tidak diperlukan jika diterapkan pada HTML seperti ini:

Hal ini karena, dengan menggunakan penyeleksi spasi setengah lebar bahasa Inggris, kami menentukan bahwa h1 di ID ID memiliki warna "#ff0", sedangkan p berwarna merah dan tebal.

Ini juga bisa sedikit rumit (karena mungkin ada lebih dari dua level, seperti di dalam, di dalam, di dalam, dll.). Anda perlu berlatih lebih banyak.

Menggunakan nesting dapat membuat kode CSS Anda terbaca lebih jelas dan dapat menyesuaikan CSS untuk elemen yang Anda tentukan.