Селекторы потомков (descendant selectors) [Модуль 3: Селекторы CSS продвинутый уровень]: Тренажер CSS

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

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

Список тем

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

id: 37326_descendant-selectors-1

Сделайте так, чтобы весь текст внутри параграфов (<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

id: 37326_descendant-selectors-2

Необходимо сделать текст во всех элементах <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).

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

Результат

Сообщения

Выполнить

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

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

id: 37326_descendant-selectors-3

Измените маркеры для всех элементов списка (<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).

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

Результат

Сообщения

Выполнить

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

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

id: 37326_descendant-selectors-4

Уберите подчеркивание у всех ссылок (<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

id: 37326_descendant-selectors-5

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

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

Результат

Сообщения

Выполнить

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

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

id: 37326_descendant-selectors-6

Сделайте текст ссылок (<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').

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

Результат

Сообщения

Выполнить

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

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

id: 37326_descendant-selectors-7

Стилизуйте подписи (<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>).

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

Результат

Сообщения

Выполнить

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

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

id: 37326_descendant-selectors-8

Добавьте нижний отступ (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'.

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

Результат

Сообщения

Выполнить

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

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

id: 37326_descendant-selectors-9

Сделайте текст ссылки (<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'.

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

Результат

Сообщения

Выполнить

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

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

id: 37326_descendant-selectors-10

Добавьте рамку синего цвета ко всем элементам <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"]'.

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

Результат

Сообщения

Выполнить

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

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

id: 37326_descendant-selectors-11

Сделайте текст элементов <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'.

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

Результат

Сообщения

Выполнить

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

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

id: 37326_descendant-selectors-12

Задайте жирное начертание для текста во всех ячейках (<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').

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

Результат

Сообщения

Выполнить

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