Задачи для решения
Контекстный селектор
Сделайте селектор, который выберет все абзацы <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-'.
Практика по селекторам
Повторите страницу по данному по образцу (наведите мышкой на список):
Вы можете открыть этот пример в отдельной вкладке браузера.
Повторите страницу по данному по образцу (наведите мышкой на список):
Вы можете открыть этот пример в отдельной вкладке браузера.
Повторите страницу по данному по образцу (наведите мышкой на список):
Вы можете открыть этот пример в отдельной вкладке браузера.
Повторите страницу по данному по образцу (наведите мышкой на список):
Вы можете открыть этот пример в отдельной вкладке браузера.
Повторите страницу по данному по образцу (наведите мышкой на список):
Вы можете открыть этот пример в отдельной вкладке браузера.