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

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