# Практика на комбинации 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>`
← →
↑