Практика на комбінації селекторів

Напишіть селектор, який вибере абзаци, розташовані всередині дивів 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>