⌘K

Praktik Kombinasi Selektor CSS

Задание 1

Tuliskan selektor yang akan memilih paragraf, yang terletak di dalam div div. Uji selektor Anda pada kode berikut: 

html<div>
  <p>
    +++
  </p>
  <p>
    +++
  </p>
</div>
<div>
  <p>
    +++
  </p>
</div>

<p>
  ---
</p>
<p>
  ---
</p>
Задание 2

Tuliskan selektor yang akan memilih semua h2, yang terletak di dalam div div. Uji selektor Anda pada kode berikut: 

html<div>
  <h2>+++</h2>
  <p>
    ---
  </p>
  <p>
    ---
  </p>
</div>
<div>
  <h2>+++</h2>
  <p>
    ---
  </p>
</div>

<h2>---</h2>
<p>
  ---
</p>
Задание 3

Tuliskan selektor yang akan memilih semua paragraf p dari elemen dengan id, sama dengan block. Uji selektor Anda pada kode berikut: 

html<div id="block">
  <h2>---</h2>
  <p>
    +++
  </p>
  <p>
    +++
  </p>
</div>
<div>
  <h2>---</h2>
  <p>
    ---
  </p>
</div>

<h2>---</h2>
<p>
  ---
</p>
Задание 4

Tuliskan selektor yang akan memilih semua h2 dari elemen dengan id, sama dengan block. Uji selektor Anda pada kode berikut: 

html<div id="block">
  <h2>+++</h2>
  <p>
    ---
  </p>
  <p>
    ---
  </p>
  
  <h2>+++</h2>
  <p>
    ---
  </p>
</div>
<div>
  <h2>---</h2>
  <p>
    ---
  </p>
</div>

<h2>---</h2>
<p>
  ---
</p>
Задание 5

Tuliskan selektor yang akan memilih semua elemen dengan kelas bbb. Uji selektor Anda pada kode berikut: 

html<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>
Задание 6

Tuliskan selektor yang akan memilih semua elemen dengan kelas bbb dari elemen dengan id, sama dengan block. Uji selektor Anda pada kode berikut: 

html<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>
Задание 7

Tuliskan selektor yang akan memilih semua paragraf p dengan kelas bbb. Uji selektor Anda pada kode berikut: 

html<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>
Задание 8

Tuliskan selektor yang akan memilih semua h2 dengan kelas bbb. Uji selektor Anda pada kode berikut: 

html<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>
Задание 9

Tuliskan selektor yang akan memilih semua paragraf p dengan kelas bbb dari elemen dengan id, sama dengan block. Uji selektor Anda pada kode berikut: 

html<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>
Задание 10

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: 

html<h2 class="bbb">+++</h2>
<p class="bbb">
  +++
</p>

<h2 class="xxx">+++</h2>
<p>
  ---
</p>

<h2>---</h2>
<p class="xxx">
  +++
</p>

<div class="bbb">
  +++
</div>
Задание 11

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: 

html<h2 class="bbb">---</h2>
<p class="bbb">
  +++
</p>

<h2 class="xxx">+++</h2>
<p>
  ---
</p>

<h2>---</h2>
<p class="xxx">
  ---
</p>

<div class="bbb">
  ---
</div>
Задание 12

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: 

html<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>
Задание 13

Tuliskan selektor yang akan memilih semua elemen dengan kelas fff. Uji selektor Anda pada kode berikut: 

html<div class="fff">
  +++
</div>

<h2 class="fff">+++</h2>
<p class="fff">
  +++
</p>

<h2 class="bbb">---</h2>
<p class="xxx">
  ---
</p>
Задание 14

Tuliskan selektor yang akan memilih semua paragraf p dari elemen dengan kelas fff. Uji selektor Anda pada kode berikut: 

html<div class="fff">
  <h2>---</h2>
  <p>
    +++
  </p>
  <p>
    +++
  </p>
</div>

<h2 class="fff">---</h2>
<p class="fff">
  ---
</p>
Задание 15

Tuliskan selektor yang akan memilih semua paragraf p dengan kelas fff. Uji selektor Anda pada kode berikut: 

html<div id="block">
  <h2>---</h2>
  <p>
    ---
  </p>
  <p>
    ---
  </p>
  <p class="fff">
    +++
  </p>
</div>

<h2 class="fff">---</h2>
<p class="fff">
  +++
</p>
Задание 16

Tuliskan selektor yang akan memilih semua elemen dengan kelas bbb dari elemen dengan kelas fff. Uji selektor Anda pada kode berikut: 

html<div class="fff">
  <h2 class="bbb">+++</h2>
  <p>
    ---
  </p>
  <p>
    ---
  </p>
  <p class="bbb">
    +++
  </p>
</div>

<h2 class="fff">---</h2>
<p class="bbb">
  ---
</p>
Задание 17

Tuliskan selektor yang akan memilih semua h2 dengan kelas bbb dari elemen dengan kelas fff. Uji selektor Anda pada kode berikut: 

html<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>
BackKesalahan dalam Pengelompokkan Selektor CSS yang KompleksNextPrioritas Selektor CSS