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