Практика върху комбинации от 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>
