Praktik Kombinasi Selektor CSS
Tuliskan selektor yang akan memilih paragraf,
yang terletak di dalam div div. Uji
selektor Anda pada kode berikut:
<div>
<p>
+++
</p>
<p>
+++
</p>
</div>
<div>
<p>
+++
</p>
</div>
<p>
---
</p>
<p>
---
</p>
Tuliskan selektor yang akan memilih semua h2,
yang terletak di dalam div div. Uji
selektor Anda pada kode berikut:
<div>
<h2>+++</h2>
<p>
---
</p>
<p>
---
</p>
</div>
<div>
<h2>+++</h2>
<p>
---
</p>
</div>
<h2>---</h2>
<p>
---
</p>
Tuliskan selektor yang akan memilih semua paragraf
p dari elemen dengan id, sama dengan
block. Uji selektor Anda pada kode
berikut:
<div id="block">
<h2>---</h2>
<p>
+++
</p>
<p>
+++
</p>
</div>
<div>
<h2>---</h2>
<p>
---
</p>
</div>
<h2>---</h2>
<p>
---
</p>
Tuliskan selektor yang akan memilih semua h2
dari elemen dengan id, sama dengan block.
Uji selektor Anda pada kode berikut:
<div id="block">
<h2>+++</h2>
<p>
---
</p>
<p>
---
</p>
<h2>+++</h2>
<p>
---
</p>
</div>
<div>
<h2>---</h2>
<p>
---
</p>
</div>
<h2>---</h2>
<p>
---
</p>
Tuliskan selektor yang akan memilih semua elemen
dengan kelas bbb. Uji selektor Anda
pada kode berikut:
<div id="block">
<h2 class="bbb">+++</h2>
<p class="bbb">
+++
</p>
<p>
---
</p>
<h2 class="bbb">+++</h2>
<p>
---
</p>
</div>
<div class="bbb">
+++
</div>
<h2>---</h2>
<p class="bbb">
+++
</p>
Tuliskan selektor yang akan memilih semua elemen
dengan kelas bbb dari elemen dengan id,
sama dengan block. Uji selektor Anda
pada kode berikut:
<div id="block">
<h2 class="bbb">+++</h2>
<p class="bbb">
+++
</p>
<p>
---
</p>
<h2 class="bbb">+++</h2>
<p>
---
</p>
</div>
<div class="bbb">
---
</div>
<h2>---</h2>
<p class="bbb">
---
</p>
Tuliskan selektor yang akan memilih semua paragraf
p dengan kelas bbb. Uji
selektor Anda pada kode berikut:
<div id="block">
<h2 class="bbb">---</h2>
<p class="bbb">
+++
</p>
<p>
---
</p>
<h2 class="bbb">---</h2>
<p class="bbb">
+++
</p>
</div>
<div class="bbb">
---
</div>
<h2>---</h2>
<p class="bbb">
+++
</p>
Tuliskan selektor yang akan memilih semua h2
dengan kelas bbb. Uji selektor Anda
pada kode berikut:
<div id="block">
<h2 class="bbb">+++</h2>
<p class="bbb">
---
</p>
<p>
---
</p>
<h2 class="bbb">+++</h2>
<p class="bbb">
---
</p>
</div>
<h2>---</h2>
<p class="bbb">
---
</p>
<h2 class="bbb">+++</h2>
<p class="bbb">
---
</p>
Tuliskan selektor yang akan memilih semua paragraf
p dengan kelas bbb dari elemen
dengan id, sama dengan block. Uji
selektor Anda pada kode berikut:
<div id="block">
<h2 class="bbb">---</h2>
<p class="bbb">
+++
</p>
<p>
---
</p>
<h2 class="bbb">---</h2>
<p class="bbb">
+++
</p>
</div>
<div class="bbb">
---
</div>
<h2>---</h2>
<p class="bbb">
---
</p>
Tuliskan selektor yang akan memilih semua elemen
dengan kelas bbb dan elemen dengan kelas
xxx secara bersamaan (yaitu, Anda perlu mengelompokkan
selektor dengan koma). Uji selektor Anda
pada kode berikut:
<h2 class="bbb">+++</h2>
<p class="bbb">
+++
</p>
<h2 class="xxx">+++</h2>
<p>
---
</p>
<h2>---</h2>
<p class="xxx">
+++
</p>
<div class="bbb">
+++
</div>
Tuliskan selektor yang akan memilih semua paragraf
p dengan kelas bbb dan secara bersamaan
semua h2 dengan kelas xxx. Uji
selektor Anda pada kode berikut:
<h2 class="bbb">---</h2>
<p class="bbb">
+++
</p>
<h2 class="xxx">+++</h2>
<p>
---
</p>
<h2>---</h2>
<p class="xxx">
---
</p>
<div class="bbb">
---
</div>
Tuliskan selektor yang akan memilih semua paragraf
p dengan kelas bbb dari elemen
dengan id, sama dengan block dan secara bersamaan
semua paragraf p dengan kelas xxx
dari elemen dengan id, sama dengan block.
Uji selektor Anda pada kode berikut:
<div id="block">
<h2 class="bbb">---</h2>
<p class="bbb">
+++
</p>
<h2 class="xxx">---</h2>
<p>
---
</p>
<h2>---</h2>
<p class="xxx">
+++
</p>
<div class="bbb">
---
</div>
<div class="xxx">
---
</div>
</div>
<h2 class="bbb">---</h2>
<p class="xxx">
---
</p>
Tuliskan selektor yang akan memilih semua elemen
dengan kelas fff. Uji selektor Anda
pada kode berikut:
<div class="fff">
+++
</div>
<h2 class="fff">+++</h2>
<p class="fff">
+++
</p>
<h2 class="bbb">---</h2>
<p class="xxx">
---
</p>
Tuliskan selektor yang akan memilih semua paragraf
p dari elemen dengan kelas fff.
Uji selektor Anda pada
kode berikut:
<div class="fff">
<h2>---</h2>
<p>
+++
</p>
<p>
+++
</p>
</div>
<h2 class="fff">---</h2>
<p class="fff">
---
</p>
Tuliskan selektor yang akan memilih semua paragraf
p dengan kelas fff. Uji
selektor Anda pada kode berikut:
<div id="block">
<h2>---</h2>
<p>
---
</p>
<p>
---
</p>
<p class="fff">
+++
</p>
</div>
<h2 class="fff">---</h2>
<p class="fff">
+++
</p>
Tuliskan selektor yang akan memilih semua elemen
dengan kelas bbb dari elemen dengan kelas
fff. Uji selektor Anda pada kode berikut:
<div class="fff">
<h2 class="bbb">+++</h2>
<p>
---
</p>
<p>
---
</p>
<p class="bbb">
+++
</p>
</div>
<h2 class="fff">---</h2>
<p class="bbb">
---
</p>
Tuliskan selektor yang akan memilih semua h2
dengan kelas bbb dari elemen dengan kelas
fff. Uji selektor Anda pada kode berikut:
<div class="fff">
<h2 class="bbb">+++</h2>
<p>
---
</p>
<h2 class="bbb">+++</h2>
<p>
---
</p>
<p class="bbb">
---
</p>
</div>
<h2 class="bbb">---</h2>
<p class="bbb">
---
</p>
<p class="fff">
---
</p>
