Практика на комбинации на CSS селектори
Напишете селектор кој ќе ги избере параграфите,
локација внатре во div елементи div. Проверете
го вашиот селектор на следниот код:
<div>
<p>
+++
</p>
<p>
+++
</p>
</div>
<div>
<p>
+++
</p>
</div>
<p>
---
</p>
<p>
---
</p>
Напишете селектор кој ќе ги избере сите h2,
локација внатре во div елементи div. Проверете
го вашиот селектор на следниот код:
<div>
<h2>+++</h2>
<p>
---
</p>
<p>
---
</p>
</div>
<div>
<h2>+++</h2>
<p>
---
</p>
</div>
<h2>---</h2>
<p>
---
</p>
Напишете селектор кој ќе ги избере сите параграфи
p од елементот со id, еднакво на
block. Проверете го вашиот селектор на следниот
код:
<div id="block">
<h2>---</h2>
<p>
+++
</p>
<p>
+++
</p>
</div>
<div>
<h2>---</h2>
<p>
---
</p>
</div>
<h2>---</h2>
<p>
---
</p>
Напишете селектор кој ќе ги избере сите h2
од елементот со id, еднакво на block.
Проверете го вашиот селектор на следниот код:
<div id="block">
<h2>+++</h2>
<p>
---
</p>
<p>
---
</p>
<h2>+++</h2>
<p>
---
</p>
</div>
<div>
<h2>---</h2>
<p>
---
</p>
</div>
<h2>---</h2>
<p>
---
</p>
Напишете селектор кој ќе ги избере сите елементи
со класа bbb. Проверете го вашиот селектор
на следниот код:
<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>
Напишете селектор кој ќе ги избере сите елементи
со класа bbb од елементот со id,
еднакво на block. Проверете го вашиот селектор
на следниот код:
<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>
Напишете селектор кој ќе ги избере сите параграфи
p со класа bbb. Проверете
го вашиот селектор на следниот код:
<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>
Напишете селектор кој ќе ги избере сите h2
со класа bbb. Проверете го вашиот селектор
на следниот код:
<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>
Напишете селектор кој ќе ги избере сите параграфи
p со класа bbb од елементот
со id, еднакво на block. Проверете
го вашиот селектор на следниот код:
<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>
Напишете селектор кој ќе ги избере сите елементи
со класа bbb и елементи со класа
xxx истовремено (односно треба да ги групирате
селекторите преку запирка). Проверете го вашиот селектор
на следниот код:
<h2 class="bbb">+++</h2>
<p class="bbb">
+++
</p>
<h2 class="xxx">+++</h2>
<p>
---
</p>
<h2>---</h2>
<p class="xxx">
+++
</p>
<div class="bbb">
+++
</div>
Напишете селектор кој ќе ги избере сите параграфи
p со класа bbb и истовремено
сите h2 со класа xxx. Проверете
го вашиот селектор на следниот код:
<h2 class="bbb">---</h2>
<p class="bbb">
+++
</p>
<h2 class="xxx">+++</h2>
<p>
---
</p>
<h2>---</h2>
<p class="xxx">
---
</p>
<div class="bbb">
---
</div>
Напишете селектор кој ќе ги избере сите параграфи
p со класа bbb од елементот
со id, еднакво на block и истовремено
сите параграфи p со класа xxx
од елементот со id, еднакво на block.
Проверете го вашиот селектор на следниот код:
<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>
Напишете селектор кој ќе ги избере сите елементи
со класа fff. Проверете го вашиот селектор
на следниот код:
<div class="fff">
+++
</div>
<h2 class="fff">+++</h2>
<p class="fff">
+++
</p>
<h2 class="bbb">---</h2>
<p class="xxx">
---
</p>
Напишете селектор кој ќе ги избере сите параграфи
p од елементот со класа fff.
Проверете го вашиот селектор на
следниот код:
<div class="fff">
<h2>---</h2>
<p>
+++
</p>
<p>
+++
</p>
</div>
<h2 class="fff">---</h2>
<p class="fff">
---
</p>
Напишете селектор кој ќе ги избере сите параграфи
p со класа fff. Проверете
го вашиот селектор на следниот код:
<div id="block">
<h2>---</h2>
<p>
---
</p>
<p>
---
</p>
<p class="fff">
+++
</p>
</div>
<h2 class="fff">---</h2>
<p class="fff">
+++
</p>
Напишете селектор кој ќе ги избере сите елементи
со класа bbb од елементот со класа
fff. Проверете го вашиот селектор на следниот
код:
<div class="fff">
<h2 class="bbb">+++</h2>
<p>
---
</p>
<p>
---
</p>
<p class="bbb">
+++
</p>
</div>
<h2 class="fff">---</h2>
<p class="bbb">
---
</p>
Напишете селектор кој ќе ги избере сите h2
со класа bbb од елементот со класа
fff. Проверете го вашиот селектор на следниот
код:
<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>
