Задачи на работу с продвинутыми селекторами CSS

Перед решением задач изучите теорию к данному уроку.

Задачи для решения

Контекстный селектор

Сделайте селектор, который выберет все абзацы <p>.

Сделайте селектор, который выберет все абзацы <p> внутри дивов <div>.

Сделайте селектор, который выберет все <h2> внутри дивов <div>.

Группировка селекторов

Сделайте селектор, который выберет абзацы <p> и <h2> одновременно.

Сделайте селектор, который выберет все <h2> внутри дивов <div> и одновременно все абзацы <p>.

Сделайте селектор, который выберет все <h2> внутри дивов <div> и одновременно все абзацы <p> внутри дивов <div>.

На id

Сделайте селектор, который выберет все элементы из id=test.

Сделайте селектор, который выберет все абзацы <p> из id=test.

Сделайте селектор, который выберет все абзацы <p> из id=test и одновременно все <h2> (любые!).

На классы

Сделайте селектор, который выберет все элементы с классом test.

Сделайте селектор, который выберет все абзацы <p> с классом test.

Сделайте селектор, который выберет все элементы с классом test и одновременно все элементы с классом hello.

Сделайте селектор, который выберет все абзацы <p> с классом test и одновременно все <h2> с классом hello.

Сделайте селектор, который выберет все абзацы <p> с классом test и одновременно все элементы с классом hello.

На id и классы вместе

Сделайте селектор, который выберет все абзацы <p> с классом test из дива <div> с id=hello.

Сделайте селектор, который выберет все абзацы <p> с классом test из элементов с классом hello.

Сделайте селектор, который выберет все абзацы <p> с классом test из дивов <div> с классом hello.

Сделайте селектор, который выберет все <h2> из класса test.

На мультиклассы

Сделайте селектор, который выберет все элементы, которые имеют одновременно 2 класса: test и hello.

Сделайте селектор, который выберет все абзацы <p>, которые имеют одновременно 2 класса: test и hello.

Сделайте селектор, который выберет все <h2>, которые имеют одновременно 3 класса: test, hello и eee.

Дочерний селектор >

Сделайте селектор, который выберет все <i>, которые лежат непосредственно внутри <p>.

Пример HTML для проверки:

<p> test <i>это выберет</i> test <b><i>это не выберет</i></b></p>

Сделайте селектор, который выберет все <li>, которые лежат непосредственно внутри <ul>.

Сделайте селектор, который выберет все <a>, которые лежат непосредственно внутри <p> и одновременно все <a> с классом test.

Соседний селектор +

Сделайте селектор, который выберет все <i>, которые лежат непосредственно после <b>.

Пример HTML для проверки:

<p> <b>test</b> test <i> это выберет </i> test <b> это не выберет </b></p>

Сделайте селектор, который выберет все <i>, которые лежат непосредственно после <b> из элемента с id=test.

Пример HTML для проверки:

<p id="test">
	<b>test</b> test <i>это выберет</i> test <b>это не выберет</b>
</p>

Сделайте каждый абзац, следующий сразу после элемента <ul>, красного цвета.

Родственный селектор ~

Сделайте селектор, который выберет все абзацы <p> идущие после <h1>.

Сделайте селектор, который выберет все абзацы <p> идущие после <h2> из элемента с id=test.

Универсальный селектор *

Сделайте селектор, который выберет все элементы на странице.

Сделайте селектор, который выберет все <i>, лежащие внутри любых элементов, лежащих внутри абзаца <p>.

Пример HTML для проверки:

<p><span><i> выберет </i></span></p>
<p><b><i> выберет </i></b></p>
<p><i> не выберет </i></p>

Селекторы атрибутов

Сделайте селектор, который выберет все элементы с атрибутом title.

Сделайте селектор, который выберет все абзацы <p> с атрибутом title.

Сделайте селектор, который выберет все абзацы <p> с атрибутом title, который равен 'привет'.

Сделайте селектор, который выберет все ссылки <a> с атрибутом href, значение которого начинается на 'http://'.

Сделайте селектор, который выберет все ссылки <a> с атрибутом href, значение которого заканчивается на '.html'.

Сделайте селектор, который выберет все абзацы <p> с атрибутом title, в значении которого есть слово 'привет'.

Сделайте селектор, который выберет все абзацы <p> с классом, который начинается на 'top-'.