Селекторы потомков (descendant selectors): Тренажер CSS

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

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

Список тем

Выбор всех параграфов внутри div

Сделайте так, чтобы весь текст внутри параграфов (<p>), которые находятся внутри основного контейнера (<div>), стал синего цвета. Другие элементы внутри div не должны измениться.

CSS

/* Стиль для основного контейнера */
div {
  border: 1px solid #ccc;
  padding: 15px;
  margin-bottom: 10px;
}

/* Ваша задача: выбрать все <p> внутри <div> */
input1 {
  color: blue;
}

                     /* Стиль для основного контейнера */
div {
  border: 1px solid #ccc;
  padding: 15px;
  margin-bottom: 10px;
}

/* Ваша задача: выбрать все <p> внутри <div> */
input1 {
  color: blue;
}

HTML

<div>
  <h2>Заголовок внутри div</h2>
  <p>Это первый параграф внутри div.</p>
  <span>Это текст в span внутри div.</span>
  <p>Это второй параграф внутри div.</p>
</div>
<p>Этот параграф находится вне div.</p>

Используйте селектор потомков. Укажите родительский тег (div), затем пробел, а затем тег потомка (p).

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

Результат

Сообщения

Выполнить

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

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

Выбор элементов span внутри элемента с ID

Необходимо сделать текст во всех элементах <span>, находящихся внутри элемента с идентификатором 'intro', жирным (bold). Текст вне этого блока или в других тегах внутри него не должен измениться.

CSS

#intro {
  background-color: #f0f0f0;
  padding: 10px;
}

/* Ваша задача: выбрать все <span> внутри #intro */
input1 span {
  font-weight: bold;
}

                     #intro {
  background-color: #f0f0f0;
  padding: 10px;
}

/* Ваша задача: выбрать все <span> внутри #intro */
input1 span {
  font-weight: bold;
}

HTML

<div id="intro">
  <h1>Введение</h1>
  <p>Это вводный текст, содержащий <span>важную</span> информацию.</p>
  <ul>
    <li>Пункт <span>списка</span> 1</li>
    <li>Пункт <span>списка</span> 2</li>
  </ul>
</div>
<div>
  <span>Этот span вне блока intro.</span>
</div>

Сначала выберите элемент по его ID (используя '#'), затем через пробел укажите тег потомка (span).

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

Результат

Сообщения

Выполнить

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

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

Выбор элементов списка внутри контейнера с классом

Измените маркеры для всех элементов списка (<li>), которые находятся внутри элемента с классом 'list-container', на квадраты. Маркеры других списков на странице не должны измениться.

CSS

.list-container {
  border: 1px dashed green;
  padding: 10px 10px 10px 30px; /* Добавлен отступ слева для маркеров */
}

/* Ваша задача: выбрать все <li> внутри .list-container */
.list-container input1 {
  list-style-type: square;
}

                     .list-container {
  border: 1px dashed green;
  padding: 10px 10px 10px 30px; /* Добавлен отступ слева для маркеров */
}

/* Ваша задача: выбрать все <li> внутри .list-container */
.list-container input1 {
  list-style-type: square;
}

HTML

<div class="list-container">
  <h3>Список покупок</h3>
  <ul>
    <li>Молоко</li>
    <li>Хлеб</li>
    <li>Яйца</li>
  </ul>
</div>

<ul>
  <li>Обычный пункт 1</li>
  <li>Обычный пункт 2</li>
</ul>

Выберите элемент по его классу (используя '.'), затем через пробел укажите тег потомка (li).

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

Результат

Сообщения

Выполнить

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

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

Выбор ссылок внутри элементов списка

Уберите подчеркивание у всех ссылок (<a>), которые находятся внутри элементов списка (<li>), а те, в свою очередь, внутри неупорядоченного списка (<ul>).

CSS

ul {
  padding-left: 20px;
}

li {
  margin-bottom: 5px;
}

/* Ваша задача: выбрать все <a> внутри <li> внутри <ul> */
ul input1 {
  text-decoration: none;
  color: purple;
}

                     ul {
  padding-left: 20px;
}

li {
  margin-bottom: 5px;
}

/* Ваша задача: выбрать все <a> внутри <li> внутри <ul> */
ul input1 {
  text-decoration: none;
  color: purple;
}

HTML

<ul>
  <li><a href="#">Ссылка 1</a></li>
  <li><a href="#">Ссылка 2</a></li>
  <li>Просто текст</li>
</ul>
<a href="#">Отдельная ссылка</a>

Используйте цепочку селекторов потомков: укажите родительский тег (ul), затем через пробел промежуточный тег (li), и снова через пробел целевой тег (a).

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

Результат

Сообщения

Выполнить

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

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

Выбор элемента с классом внутри любого div

Задайте желтый фон для всех элементов с классом 'highlight', которые находятся внутри любого элемента <div>.

CSS

div {
  margin-bottom: 10px;
  padding: 5px;
  border: 1px solid lightgray;
}

/* Ваша задача: выбрать все .highlight внутри <div> */
div input1 {
  background-color: yellow;
  padding: 2px 4px;
}

                     div {
  margin-bottom: 10px;
  padding: 5px;
  border: 1px solid lightgray;
}

/* Ваша задача: выбрать все .highlight внутри <div> */
div input1 {
  background-color: yellow;
  padding: 2px 4px;
}

HTML

<div>
  <p>Обычный текст. <span class="highlight">Выделенный текст</span> внутри div.</p>
</div>
<div>
  <span class="highlight">Еще один выделенный текст</span>.
</div>
<span class="highlight">Этот текст не внутри div.</span>

Сначала укажите тег родителя (div), затем через пробел селектор класса потомка (используя точку '.' перед именем класса).

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

Результат

Сообщения

Выполнить

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

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

Выбор потомков с определенным тегом и классом

Сделайте текст ссылок (<a>) с классом 'external-link', находящихся внутри элемента с ID 'main-content', курсивным.

CSS

#main-content {
  padding: 15px;
  background: #eee;
}

/* Ваша задача: выбрать все a.external-link внутри #main-content */
input1 input2 {
  font-style: italic;
  color: green;
}

                     #main-content {
  padding: 15px;
  background: #eee;
}

/* Ваша задача: выбрать все a.external-link внутри #main-content */
input1 input2 {
  font-style: italic;
  color: green;
}

HTML

<div id="main-content">
  <p>Основной контент страницы. <a href="#">Обычная ссылка</a>.</p>
  <p>Перейти на <a href="#" class="external-link">внешний ресурс</a>.</p>
  <ul>
    <li><a href="#" class="external-link">Еще одна внешняя ссылка</a></li>
  </ul>
</div>
<a href="#" class="external-link">Внешняя ссылка вне блока</a>

Сначала выберите родительский элемент по ID ('#main-content'), затем через пробел укажите тег потомка ('a') и сразу после него (без пробела) селектор класса ('.external-link').

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

Результат

Сообщения

Выполнить

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

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

Стилизация подписей к изображениям в карточках

Стилизуйте подписи (<figcaption>) к изображениям, но только те, которые находятся внутри элемента <figure> с классом 'image-card'. Сделайте текст подписи курсивным и выровненным по центру.

CSS

figure {
  margin: 10px 0;
  border: 1px solid #ddd;
  padding: 5px;
  display: inline-block; /* Чтобы карточки были рядом, если поместятся */
  max-width: 90%; /* Ограничение ширины для iframe */
}

figure img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Ваша задача: выбрать figcaption внутри figure.image-card */
input1 figcaption {
  font-style: italic;
  text-align: center;
  margin-top: 5px;
  font-size: 0.9em;
}

                     figure {
  margin: 10px 0;
  border: 1px solid #ddd;
  padding: 5px;
  display: inline-block; /* Чтобы карточки были рядом, если поместятся */
  max-width: 90%; /* Ограничение ширины для iframe */
}

figure img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Ваша задача: выбрать figcaption внутри figure.image-card */
input1 figcaption {
  font-style: italic;
  text-align: center;
  margin-top: 5px;
  font-size: 0.9em;
}

HTML

<figure class="image-card">
  <img src="https://naytikurs.ru/img/1.png" alt="Image 1">
  <figcaption>Подпись к картинке 1</figcaption>
</figure>

<figure>
  <img src="https://naytikurs.ru/img/2.png" alt="Image 2">
  <figcaption>Обычная подпись</figcaption>
</figure>

<figure class="image-card">
  <img src="https://naytikurs.ru/img/4.png" alt="Image 4">
  <figcaption>Подпись к картинке 4</figcaption>
</figure>

Выберите родительский элемент <figure> по тегу и классу ('figure.image-card'), затем через пробел укажите тег потомка (<figcaption>).

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

Результат

Сообщения

Выполнить

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

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

Выбор заголовков и параграфов в секции

Добавьте нижний отступ (margin-bottom) ко всем заголовкам <h2> и параграфам <p>, которые являются потомками элемента <section> с классом 'article-content'.

CSS

section.article-content {
  border-left: 3px solid orange;
  padding-left: 15px;
}

/* Ваша задача: выбрать h2 и p внутри section.article-content */
input1, 
input2 {
  margin-bottom: 15px;
}

                     section.article-content {
  border-left: 3px solid orange;
  padding-left: 15px;
}

/* Ваша задача: выбрать h2 и p внутри section.article-content */
input1, 
input2 {
  margin-bottom: 15px;
}

HTML

<section class="article-content">
  <h2>Заголовок статьи</h2>
  <p>Первый параграф статьи с некоторым текстом.</p>
  <h3>Подзаголовок (не должен измениться)</h3>
  <p>Второй параграф статьи, который тоже должен получить отступ.</p>
</section>
<div>
  <h2>Заголовок вне секции</h2>
  <p>Параграф вне секции.</p>
</div>

Нужно создать два селектора потомков, разделенных запятой. Первый: 'section.article-content h2'. Второй: 'section.article-content p'.

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

Результат

Сообщения

Выполнить

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

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

Стилизация активного элемента навигации

Сделайте текст ссылки (<a>) внутри пункта списка (<li>) с классом 'active', который находится в навигации (<nav>), жирным и красного цвета.

CSS

nav ul {
  list-style: none;
  padding: 0;
}

nav li {
  display: inline-block; /* Расположим пункты в ряд */
  margin-right: 10px;
}

nav a {
  text-decoration: none;
  color: blue;
}

/* Ваша задача: выбрать <a> внутри <li class="active"> внутри <nav> */
input1 {
  font-weight: bold;
  color: red;
}

                     nav ul {
  list-style: none;
  padding: 0;
}

nav li {
  display: inline-block; /* Расположим пункты в ряд */
  margin-right: 10px;
}

nav a {
  text-decoration: none;
  color: blue;
}

/* Ваша задача: выбрать <a> внутри <li class="active"> внутри <nav> */
input1 {
  font-weight: bold;
  color: red;
}

HTML

<nav>
  <ul>
    <li><a href="#">Главная</a></li>
    <li class="active"><a href="#">Каталог</a></li>
    <li><a href="#">Контакты</a></li>
  </ul>
</nav>

Используйте цепочку селекторов: начните с тега 'nav', затем через пробел укажите 'li' с классом 'active' ('li.active'), и снова через пробел укажите целевой тег 'a'.

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

Результат

Сообщения

Выполнить

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

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

Выбор элементов с атрибутом внутри блока

Добавьте рамку синего цвета ко всем элементам <input>, у которых атрибут 'type' равен 'text', и которые находятся внутри формы (<form>) с ID 'search-form'.

CSS

#search-form {
  padding: 10px;
  background-color: #f9f9f9;
}

#search-form label {
  margin-right: 5px;
}

/* Ваша задача: выбрать input[type="text"] внутри #search-form */
#search-form input1 {
  border: 2px solid blue;
  padding: 3px;
}

                     #search-form {
  padding: 10px;
  background-color: #f9f9f9;
}

#search-form label {
  margin-right: 5px;
}

/* Ваша задача: выбрать input[type="text"] внутри #search-form */
#search-form input1 {
  border: 2px solid blue;
  padding: 3px;
}

HTML

<form id="search-form">
  <label for="query">Поиск:</label>
  <input type="text" id="query" name="q">
  <input type="submit" value="Найти">
</form>

<form>
  <label for="email">Email:</label>
  <input type="text" id="email" name="email"> <!-- Этот input не должен измениться -->
</form>

Сначала выберите форму по ID ('#search-form'). Затем через пробел используйте селектор атрибута для выбора нужных input: 'input[type="text"]'.

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

Результат

Сообщения

Выполнить

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

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

Глубоко вложенные потомки

Сделайте текст элементов <em>, которые находятся внутри ссылок <a>, которые в свою очередь находятся внутри параграфов <p> внутри блока <div> с классом 'nested-content', зеленого цвета.

CSS

.nested-content {
  border: 1px solid black;
  padding: 10px;
}

.nested-content p {
  margin: 5px 0;
}

/* Ваша задача: выбрать em внутри a внутри p внутри div.nested-content */
input1 {
  color: green;
  font-style: normal; /* Уберем курсив по умолчанию для em */
}

                     .nested-content {
  border: 1px solid black;
  padding: 10px;
}

.nested-content p {
  margin: 5px 0;
}

/* Ваша задача: выбрать em внутри a внутри p внутри div.nested-content */
input1 {
  color: green;
  font-style: normal; /* Уберем курсив по умолчанию для em */
}

HTML

<div class="nested-content">
  <p>Текст с <a href="#">ссылкой, содержащей <em>выделение</em></a>.</p>
  <div>
    <p>Еще один параграф с <a href="#">другой <em>важной</em> ссылкой</a>.</p>
  </div>
  <p>Параграф без ссылки.</p>
</div>
<p><em>Это выделение вне целевого блока.</em></p>

Постройте длинную цепочку селекторов потомков: 'div.nested-content p a em'.

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

Результат

Сообщения

Выполнить

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

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

Стилизация элементов в таблице

Задайте жирное начертание для текста во всех ячейках (<td>) с классом 'important-data', которые находятся внутри строк (<tr>) в теле таблицы (<tbody>).

CSS

table {
  border-collapse: collapse;
  width: 100%;
  max-width: 350px; /* Ограничение для iframe */
}

td, th {
  border: 1px solid #ccc;
  padding: 8px;
  text-align: left;
}

thead {
  background-color: #f2f2f2;
}

/* Ваша задача: выбрать td.important-data внутри tr внутри tbody */
input1 input2 {
  font-weight: bold;
}

                     table {
  border-collapse: collapse;
  width: 100%;
  max-width: 350px; /* Ограничение для iframe */
}

td, th {
  border: 1px solid #ccc;
  padding: 8px;
  text-align: left;
}

thead {
  background-color: #f2f2f2;
}

/* Ваша задача: выбрать td.important-data внутри tr внутри tbody */
input1 input2 {
  font-weight: bold;
}

HTML

<table>
  <thead>
    <tr>
      <th>Название</th>
      <th>Значение</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Параметр 1</td>
      <td class="important-data">100</td>
    </tr>
    <tr>
      <td>Параметр 2</td>
      <td>Обычное значение</td>
    </tr>
    <tr>
      <td>Параметр 3</td>
      <td class="important-data">Высокий</td>
    </tr>
  </tbody>
</table>

Используйте селектор потомков: начните с 'tbody', затем через пробел 'tr', и затем через пробел 'td' с классом 'important-data' ('td.important-data').

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

Результат

Сообщения

Выполнить

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

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