HIRARKI pada CSS

Dalam HTML, kita akan berhadapan dengan css yang memiliki semacam hirarki. Di contoh dibawah, kita membuat murid (kotak) yang memiliki warna berbeda.Untuk mencoba tuliskan ini dalam 1 tempat seperti yang tertulis pada artikel pelajaran css dan html pada artikel sebelumnya

HTML

<h1>HIRARKI</h1>

<div class='kotak'>

<div class='murid'>&nbsp;</div>

</div>

<div class='kotak merah'>

<div class='murid'>&nbsp;</div>

</div>

<div class='kotak biru'>

<div class='murid'>&nbsp;</div>

</div>

<div class='kotak kuning'>

<div class='murid'>&nbsp;</div>

</div>

CSS

.kotak {

border:1px solid blue;

width:100px;

margin:10px 0;

}

.murid {

background:green;

margin:10px 3px;

}

.merah > .murid {

background:red;

}

pada contoh di atas, kita membuat hirarki bagaimana kotak murid dapat berubah.

Sesuai dengan posisi dimana murid berada. Metode ini sangat bermanfaat apabila kita ingin memakai class sama berulang-ulang kali. Perhatikan juga bagaimana style dibawah menutup style berikutnya (background). Untuk seterusnya baik html dan css akan digabung dalam 1 tempat (tidak dipisah untuk belajar)

TUGAS

Buatlah div lebih banyak dengan konsep seragam murid. Bila murid pada

1. hari senin : warnanya merah
2. hari selasa - kamis : warna abu-abu?
3. hari jum'at : warna hijau
4. hari sabtu : warna kuning

gunakan nama hari untuk css nya.

Contoh:

Senin

murid

Selasa

murid

Rabu

murid

Kamis

murid

Jum'at

murid

Sabtu

murid