Практика на комбинације CSS селектора
Напишите селектор који ће изабрати параграфе
смештене унутар дивова div. Проверите
ваш селектор на следећем коду:
<div>
<p>
+++
</p>
<p>
+++
</p>
</div>
<div>
<p>
+++
</p>
</div>
<p>
---
</p>
<p>
---
</p>
Напишите селектор који ће изабрати све h2
смештене унутар дивова 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>
