Селекторы атрибутов: частичное совпадение: Тренажер CSS

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

На этой странице собраны упражнения для отработки навыков использования селекторов атрибутов с частичным совпадением значений. Вы будете работать с селекторами, которые позволяют выбирать элементы на основе того, начинается ли (`^=`), заканчивается ли (`$=`) или содержит ли (`*=`) значение их атрибута определенную строку. Задания варьируются от простых до более сложных, помогая закрепить понимание и применение этих мощных CSS-селекторов. Вам нужно будет заполнить пропущенные части CSS-кода, чтобы стилизовать предоставленный HTML.

Список тем

Выбор безопасных ссылок

Сделайте все "безопасные" ссылки (те, что начинаются с 'https://') зеленого цвета. Вам нужно дописать селектор атрибута, который выбирает ссылки, чей атрибут 'href' начинается с указанной строки.

CSS

ainput1 { 
  color: green;
}

                     ainput1 { 
  color: green;
}

HTML

<ul>
  <li><a href="https://example.com">Безопасная ссылка 1</a></li>
  <li><a href="http://example.org">Небезопасная ссылка</a></li>
  <li><a href="https://another.com">Безопасная ссылка 2</a></li>
  <li><a href="ftp://example.net">FTP ссылка</a></li>
</ul>

Используйте селектор атрибута `[href^="https://"]`. Оператор `^=` означает 'начинается с'. Примените этот селектор к тегу 'a'.

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

Результат

Сообщения

Выполнить

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

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

Стилизация элементов списка по префиксу класса

Необходимо стилизовать элементы списка (`li`), чей атрибут `class` начинается с префикса 'item-'. Установите для них жирное начертание шрифта. Заполните пропуск в селекторе.

CSS

liinput1 { 
  font-weight: bold;
}

                     liinput1 { 
  font-weight: bold;
}

HTML

<ul>
  <li class="item-important">Важный пункт</li>
  <li class="item-regular">Обычный пункт</li>
  <li class="regular-item">Не тот пункт</li>
  <li class="item-new">Новый пункт</li>
</ul>

Используйте селектор атрибута `[class^="item-"]`. Этот селектор выберет все элементы, у которых значение атрибута `class` начинается с 'item-'. Не забудьте указать тег `li`.

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

Результат

Сообщения

Выполнить

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

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

Выделение ссылок на PDF-файлы

Добавьте иконку (фоновое изображение) перед ссылками, которые ведут на PDF-файлы (атрибут `href` заканчивается на '.pdf'). Заполните пропуск в селекторе атрибута.

CSS

a[hrefinput1".pdf"] {
  padding-left: 20px;
  background: url('https://naytikurs.ru/img/1.png') no-repeat left center;
  background-size: 16px 16px;
}

                     a[hrefinput1".pdf"] {
  padding-left: 20px;
  background: url('https://naytikurs.ru/img/1.png') no-repeat left center;
  background-size: 16px 16px;
}

HTML

<ul>
  <li><a href="document.pdf">Документ PDF</a></li>
  <li><a href="image.png">Изображение PNG</a></li>
  <li><a href="archive.zip">Архив ZIP</a></li>
  <li><a href="report.pdf">Отчет PDF</a></li>
</ul>

Используйте селектор атрибута `[href$=".pdf"]`. Оператор `$=` означает 'заканчивается на'. Примените его к тегу 'a'. Для добавления иконки используйте свойства `padding-left` и `background`.

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

Результат

Сообщения

Выполнить

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

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

Обводка для PNG изображений

Добавьте сплошную синюю рамку толщиной 2px ко всем изображениям (`img`), у которых путь в атрибуте `src` заканчивается на '.png'. Заполните пропуск в селекторе.

CSS

imginput1 { 
  border: 2px solid blue;
}

                     imginput1 { 
  border: 2px solid blue;
}

HTML

<p>
  <img src="https://naytikurs.ru/img/2.png" alt="Картинка 1">
  <img src="https://naytikurs.ru/img/4.png" alt="Картинка 2">
  <img src="https://naytikurs.ru/img/5.jpg" alt="Картинка 3 JPG">
</p>

Используйте селектор атрибута `[src$=".png"]`. Оператор `$=` выбирает элементы, у которых значение указанного атрибута (`src`) заканчивается на заданную строку ('.png'). Примените его к тегу `img`.

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

Результат

Сообщения

Выполнить

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

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

Подсветка ссылок, содержащих 'example'

Установите желтый фон для всех ссылок (`a`), чей атрибут `href` содержит подстроку 'example'. Заполните пропуск в селекторе.

CSS

ainput1 { 
  background-color: yellow;
}

                     ainput1 { 
  background-color: yellow;
}

HTML

<ul>
  <li><a href="https://example.com">Ссылка 1 (example)</a></li>
  <li><a href="https://test.org">Ссылка 2 (test)</a></li>
  <li><a href="http://another-example.net">Ссылка 3 (example)</a></li>
  <li><a href="https://sample.com">Ссылка 4 (sample)</a></li>
</ul>

Используйте селектор атрибута `[href*="example"]`. Оператор `*=` означает 'содержит'. Примените этот селектор к тегу 'a'.

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

Результат

Сообщения

Выполнить

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

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

Выделение важных подсказок

Сделайте текст элементов (`span`), у которых атрибут `data-tooltip` содержит слово 'important', красного цвета и курсивным. Заполните пропуски в селекторе.

CSS

span[data-tooltipinput1"important"input2 {
  color: red;
  font-style: italic;
}

                     span[data-tooltipinput1"important"input2 {
  color: red;
  font-style: italic;
}

HTML

<p>
  Это обычный текст.
  <span data-tooltip="info">Это информационная подсказка.</span>
  А это 
  <span data-tooltip="very important note">очень важная заметка</span>.
  И еще одна 
  <span data-tooltip="just a note">просто заметка</span>.
</p>

Используйте селектор атрибута `[data-tooltip*="important"]`. Оператор `*=` выбирает элементы, у которых значение атрибута `data-tooltip` содержит указанную подстроку. Не забудьте указать тег `span`.

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

Результат

Сообщения

Выполнить

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

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

Стилизация секций по префиксу класса

Добавьте верхний и нижний отступ в 10px ко всем элементам `div`, чей атрибут `class` начинается с 'section-'. Заполните пропуск в селекторе.

CSS

divinput1 { 
  margin-top: 10px;
  margin-bottom: 10px;
  border: 1px dashed #ccc;
  padding: 5px;
}

                     divinput1 { 
  margin-top: 10px;
  margin-bottom: 10px;
  border: 1px dashed #ccc;
  padding: 5px;
}

HTML

<div class="section-main">
  Главная секция
</div>
<div class="content">
  Просто контент
</div>
<div class="section-secondary">
  Второстепенная секция
</div>
<div class="section-footer">
  Секция подвала
</div>

Используйте селектор `div[class^="section-"]`. Он выберет все `div`, у которых класс начинается с 'section-'.

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

Результат

Сообщения

Выполнить

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

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

Выделение полей ввода ID

Установите светло-серый фон для всех полей ввода (`input`), чей атрибут `name` заканчивается на '_id'. Заполните пропуск в селекторе.

CSS

inputinput1 { 
  background-color: #f0f0f0;
}

                     inputinput1 { 
  background-color: #f0f0f0;
}

HTML

<form>
  <label>Имя пользователя:
    <input type="text" name="username">
  </label><br>
  <label>ID пользователя:
    <input type="text" name="user_id">
  </label><br>
  <label>ID заказа:
    <input type="text" name="order_id">
  </label><br>
  <label>Комментарий:
    <input type="text" name="comment">
  </label>
</form>

Используйте селектор `input[name$="_id"]`. Оператор `$=` выбирает элементы, чей атрибут `name` заканчивается на '_id'.

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

Результат

Сообщения

Выполнить

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

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

Поиск 'highlight' в классе

Примените подчеркивание ко всем элементам `span`, в атрибуте `class` которых содержится подстрока 'highlight'. Заполните пропуски: оператор и значение.

CSS

span[classinput1input2] {
  text-decoration: underline;
}

                     span[classinput1input2] {
  text-decoration: underline;
}

HTML

<p>
  Это <span class="text-normal">обычный</span> текст.
  Это <span class="text-highlight-important">важный выделенный</span> текст.
  А это <span class="highlight">просто выделенный</span> текст.
  <span class="text-bold">Полужирный</span> текст.
</p>

Используйте селектор `span[class*="highlight"]`. Оператор `*=` ищет подстроку 'highlight' в значении атрибута `class`.

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

Результат

Сообщения

Выполнить

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

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

Выбор элементов по началу ID

Добавьте левое поле в 20px для всех элементов (`div`), чей `id` начинается с 'msg-'. Заполните пропуски в селекторе: атрибут и оператор.

CSS

div[input1input2"msg-"] {
  margin-left: 20px;
  border: 1px solid lightblue;
  padding: 5px;
  margin-bottom: 5px;
}

                     div[input1input2"msg-"] {
  margin-left: 20px;
  border: 1px solid lightblue;
  padding: 5px;
  margin-bottom: 5px;
}

HTML

<div id="msg-error">Ошибка!</div>
<div id="msg-warning">Предупреждение.</div>
<div id="info">Информация.</div>
<div id="msg-success">Успех!</div>

Используйте селектор `div[id^="msg-"]`. Атрибут - `id`, оператор `^=` означает 'начинается с'.

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

Результат

Сообщения

Выполнить

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

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

Выделение новых элементов по title

Добавьте зеленую рамку вокруг элементов (`span`), чей атрибут `title` заканчивается на '(new)'. Заполните пропуски в селекторе: атрибут и оператор.

CSS

span[input1input2"(new)"] {
  border: 1px solid green;
  padding: 2px;
}

                     span[input1input2"(new)"] {
  border: 1px solid green;
  padding: 2px;
}

HTML

<p>
  Элемент 1 <span title="Старый элемент">Старый</span>.
  Элемент 2 <span title="Новый элемент (new)">Новый</span>.
  Элемент 3 <span title="Обновленный элемент (new)">Обновленный</span>.
  Элемент 4 <span title="Просто элемент">Простой</span>.
</p>

Используйте селектор `span[title$="(new)"]`. Атрибут - `title`, оператор `$=` означает 'заканчивается на'.

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

Результат

Сообщения

Выполнить

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

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

Стилизация кнопок по части класса

Сделайте все кнопки (`button`), в классе которых есть подстрока 'btn-', немного больше и добавьте им внутренние отступы. Заполните пропуски в селекторе.

CSS

button[class input1 input2] {
  padding: 8px 15px;
  font-size: 1.1em;
}

                     button[class input1 input2] {
  padding: 8px 15px;
  font-size: 1.1em;
}

HTML

<p>
  <button class="btn-primary">Главная кнопка</button>
  <button class="btn-secondary">Вторая кнопка</button>
  <button class="simple-button">Простая кнопка</button>
  <button class="btn-danger action">Опасная кнопка</button>
</p>

Используйте селектор `button[class*="btn-"]`. Он выберет все кнопки, у которых атрибут `class` содержит 'btn-'.

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

Результат

Сообщения

Выполнить

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

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

Выделение логотипов

Добавьте тень ко всем изображениям (`img`), в атрибуте `alt` которых содержится слово 'logo'. Заполните пропуски в селекторе.

CSS

img[input1 input2 input3] {
  box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
}

                     img[input1 input2 input3] {
  box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
}

HTML

<p>
  <img src="https://naytikurs.ru/img/7.png" alt="Company logo">
  <img src="https://naytikurs.ru/img/8.png" alt="Product picture">
  <img src="https://naytikurs.ru/img/9.png" alt="Website logo small">
</p>

Используйте селектор `img[alt*="logo"]`. Атрибут - `alt`, оператор `*=` ищет подстроку 'logo'.

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

Результат

Сообщения

Выполнить

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

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