Селекторы элементов: Тренажер CSS

Тренажер по CSS для пользователей с начальным уровнем подготовки.

В этом тренажере вы попрактикуетесь в использовании селекторов элементов CSS. Селекторы позволяют выбирать HTML-элементы, к которым вы хотите применить стили. Вам будет предоставлен HTML-код и частично заполненный CSS-код. Ваша задача — заполнить пропуски в CSS-коде, чтобы добиться желаемого результата. Упражнения охватывают различные типы селекторов, от простых (по тегу, классу, идентификатору) до более сложных (потомки, дочерние, соседние, атрибуты). Внимательно читайте описание каждого задания и используйте свои знания CSS для выбора правильных элементов.

Список тем

Выбор по тегу

Измените цвет текста всех параграфов (`<p>`) на странице на синий.

CSS

input1 {
  color: input2;
}

                     input1 {
  color: input2;
}

HTML

<p>Это первый параграф.</p>
<p>Это второй параграф.</p>
<div>Это не параграф.</div>

Используйте селектор тега `p` для выбора всех элементов `<p>` и свойство `color` для изменения цвета текста.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Выбор по классу

Сделайте текст всех элементов с классом "highlight" жирным.

CSS

input1 {
  font-weight: input2;
}

                     input1 {
  font-weight: input2;
}

HTML

<p class="highlight">Этот текст должен быть жирным.</p>
<p>Этот текст обычный.</p>
<div class="highlight">Этот текст тоже должен быть жирным.</div>

Используйте селектор класса `.highlight` для выбора элементов с соответствующим классом и свойство `font-weight` для изменения начертания шрифта.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Выбор по ID

Установите фоновый цвет элемента с идентификатором "special" на желтый.

CSS

input1 {
  background-color: input2;
}

                     input1 {
  background-color: input2;
}

HTML

<p>Обычный параграф.</p>
<div id="special">Этот элемент должен иметь желтый фон.</div>
<p>Еще один обычный параграф.</p>

Используйте селектор идентификатора `#special` и свойство `background-color`.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Комбинированный селектор (тег и класс)

Сделайте все параграфы с классом "intro" курсивом.

CSS

input1input2 {
  font-style: input3;
}

                     input1input2 {
  font-style: input3;
}

HTML

<p class="intro">Этот параграф должен быть курсивом.</p>
<p>Этот параграф обычный.</p>
<div class="intro">Это не параграф.</div>

Объедините селектор тега `p` и селектор класса `.intro`, чтобы выбрать только те параграфы, которые имеют класс "intro". Используйте свойство `font-style`.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Селектор потомков

Измените цвет текста всех ссылок (`<a>`), находящихся внутри элемента с классом "navigation", на красный.

CSS

.navigation input1 {
  color: input2;
}

                     .navigation input1 {
  color: input2;
}

HTML

<div class="navigation">
  <a href="#">Ссылка 1</a>
  <a href="#">Ссылка 2</a>
</div>
<a href="#">Ссылка вне навигации</a>

Используйте селектор потомков: `.navigation a` (пробел между селекторами).

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

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

Сделайте все элементы `<li>`, которые являются прямыми потомками элемента `<ul>` с классом "menu", подчеркнутыми.

CSS

ul.menu input1 li {
  text-decoration: input2;
}

                     ul.menu input1 li {
  text-decoration: input2;
}

HTML

<ul class="menu">
  <li>Пункт 1</li>
  <li>Пункт 2</li>
  <li>
    <ul>
      <li>Вложенный пункт</li>
    </ul>
  </li>
</ul>

Используйте дочерний селектор: `ul.menu > li`. Свойство для подчеркивания текста: `text-decoration`.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

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

Измените цвет фона параграфа, который следует *сразу* за заголовком `<h2>`, на светло-серый.

CSS

h2 input1 p {
  background-color: input2;
}

                     h2 input1 p {
  background-color: input2;
}

HTML

<h2>Заголовок</h2>
<p>Этот параграф должен быть с фоном.</p>
<p>Этот параграф обычный.</p>

Используйте соседний селектор `+`: `h2 + p`. Свойство `background-color`.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Соседний селектор (~)

Сделайте все параграфы, которые являются *соседними* с элементом с классом `.important` (но не обязательно следуют *сразу* за ним), курсивом.

CSS

.important input1 p {
  font-style: input2;
}

                     .important input1 p {
  font-style: input2;
}

HTML

<p>Обычный параграф.</p>
<div class="important">Важный элемент</div>
<p>Этот параграф должен быть курсивом.</p>
<div>Какой-то div</div>
<p>Этот параграф тоже должен быть курсивом.</p>

Используйте селектор `~`: `.important ~ p`. Свойство `font-style`.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Селектор атрибута [attr]

Измените цвет всех ссылок, у которых есть атрибут `target`, на зеленый.

CSS

a[input1] {
 color: input2;
}

                     a[input1] {
 color: input2;
}

HTML

<a href="#">Обычная ссылка</a>
<a href="#" target="_blank">Ссылка с атрибутом target</a>

Используйте селектор атрибута: `a[target]`. Свойство `color`.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Селектор атрибута [attr=value]

Установите фоновое изображение для всех изображений, у которых атрибут `alt` имеет значение "Логотип".

CSS

img[alt=input1] {
  background-image: url("https://naytikurs.ru/img/1.png");
}

                     img[alt=input1] {
  background-image: url("https://naytikurs.ru/img/1.png");
}

HTML

<img src="https://naytikurs.ru/img/2.png" alt="Другое изображение">
<img src="https://naytikurs.ru/img/3.png" alt="Логотип">

Используйте селектор атрибута `img[alt="Логотип"]`. Свойство `background-image`.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Селектор атрибута [attr*=value]

Сделайте текст всех ссылок, у которых атрибут `href` *содержит* строку "example.com", подчеркнутым.

CSS

a[hrefinput1="example.com"] {
  text-decoration: input2;
}

                     a[hrefinput1="example.com"] {
  text-decoration: input2;
}

HTML

<a href="https://example.com/page1">Ссылка 1</a>
<a href="https://google.com">Ссылка 2</a>
<a href="http://sub.example.com">Ссылка 3</a>

Используйте селектор атрибута `a[href*="example.com"]`. Свойство `text-decoration`.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку

Селектор атрибута [attr^=value]

Измените цвет текста всех ссылок, у которых атрибут `href` *начинается с* "https", на оранжевый.

CSS

a[hrefinput1="https"] {
  color: input2;
}

                     a[hrefinput1="https"] {
  color: input2;
}

HTML

<a href="https://example.com">Ссылка 1</a>
<a href="http://example.com">Ссылка 2</a>

Используйте селектор атрибута `a[href^="https"]`. Свойство `color`.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Отметить решенным

Показать подсказку