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

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

В этой серии упражнений вы попрактикуетесь в использовании селекторов атрибутов для выбора HTML-элементов на основе точного совпадения значения их атрибутов. Вам будут предложены задачи, где нужно будет дополнить CSS-код, вписывая недостающие части селекторов или их компонентов. Задания построены от простого к сложному и помогут закрепить навык точного выбора элементов по их атрибутам, таким как `href`, `type`, `lang`, `title`, `data-*` и другим.

Список тем

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

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

CSS

ainput1 {
  color: green;
}

                     ainput1 {
  color: green;
}

HTML

<nav>
  <a href="#home">Домой</a>
  <a href="https://example.com">Пример сайта</a>
  <a href="/about">О нас</a>
</nav>

Используйте селектор атрибута `[href="https://example.com"]` для выбора нужной ссылки. Добавьте его перед фигурными скобками.

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

Результат

Сообщения

Выполнить

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

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

Стилизация поля ввода определенного типа

Найдите поле ввода (input) с типом 'email' и задайте ему рамку толщиной 2px сплошного синего цвета. Заполните пропуск в CSS-селекторе.

CSS

input[input1] {
  border: 2px solid blue;
}

                     input[input1] {
  border: 2px solid blue;
}

HTML

<form>
  <input type="text" placeholder="Имя">
  <input type="email" placeholder="Email">
  <input type="submit" value="Отправить">
</form>

Чтобы выбрать элемент input с атрибутом type, равным 'email', используйте селектор `input[type="email"]`. Вставьте `type="email"` в квадратные скобки.

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

Результат

Сообщения

Выполнить

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

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

Выбор изображения по атрибуту alt

Необходимо выбрать изображение с атрибутом `alt`, точно равным "Логотип 2", и добавить ему тень.

CSS

img[input1="Логотип 2"] {
  box-shadow: 3px 3px 5px grey;
}

                     img[input1="Логотип 2"] {
  box-shadow: 3px 3px 5px grey;
}

HTML

<img src="https://naytikurs.ru/img/1.png" alt="Логотип 1">
<img src="https://naytikurs.ru/img/2.png" alt="Логотип 2">
<img src="https://naytikurs.ru/img/4.png" alt="Логотип 3">

Используйте селектор атрибута для точного совпадения значения `alt`. Селектор будет выглядеть как `img[alt="Логотип 2"]`.

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

Результат

Сообщения

Выполнить

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

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

Стилизация абзацев на определенном языке

Выберите все абзацы (`<p>`), у которых атрибут `lang` точно равен "fr" (французский язык), и установите для них курсивный шрифт.

CSS

p[input1] {
  font-style: italic;
}

                     p[input1] {
  font-style: italic;
}

HTML

<p lang="en">Hello world!</p>
<p lang="fr">Bonjour le monde!</p>
<p>Просто текст.</p>
<p lang="fr">Comment ça va?</p>

Для выбора абзацев с атрибутом `lang`, равным 'fr', используйте селектор `p[lang="fr"]`. Допишите недостающую часть.

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

Результат

Сообщения

Выполнить

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

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

Выбор элемента по атрибуту title

Найдите элемент `<span>` с атрибутом `title`, точно равным "Важная подсказка", и сделайте его текст жирным.

CSS

spaninput1 {
  font-weight: bold;
}

                     spaninput1 {
  font-weight: bold;
}

HTML

<p>Текст с <span title="Обычная подсказка">подсказкой</span> и еще текст.</p>
<p>Другой текст с <span title="Важная подсказка">другой подсказкой</span>.</p>

Используйте селектор атрибута `[title="Важная подсказка"]`, чтобы выбрать нужный `<span>`. Добавьте его к тегу `span`.

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

Результат

Сообщения

Выполнить

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

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

Стилизация неактивной кнопки

Сделайте неактивную кнопку (атрибут `disabled`) полупрозрачной. Допишите селектор, чтобы выбрать кнопку с атрибутом `disabled`.

CSS

buttoninput1 {
  opacity: 0.5;
}

                     buttoninput1 {
  opacity: 0.5;
}

HTML

<button>Активная кнопка</button>
<button disabled>Неактивная кнопка</button>

Атрибут `disabled` является булевым. Для его выбора в CSS достаточно указать его имя в квадратных скобках: `[disabled]`. Добавьте этот селектор к тегу `button`.

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

Результат

Сообщения

Выполнить

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

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

Выбор ссылки, открывающейся в новой вкладке

Выберите все ссылки, которые должны открываться в новой вкладке (атрибут `target` равен "_blank"), и добавьте им иконку после текста.

CSS

a[target=input1]::after {
  content: " ↗";
  font-size: 10px;
}

                     a[target=input1]::after {
  content: " ↗";
  font-size: 10px;
}

HTML

<a href="#">Обычная ссылка</a>
<a href="https://example.com" target="_blank">Ссылка в новой вкладке</a>
<a href="/page" target="_self">Ссылка в той же вкладке</a>

Используйте селектор `a[target="_blank"]`. Допишите недостающее значение атрибута `target`.

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

Результат

Сообщения

Выполнить

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

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

Стилизация элементов по data-атрибуту

Выберите все элементы `<div>` с атрибутом `data-type`, равным "warning", и задайте им желтый фон.

CSS

divinput1 {
  background-color: yellow;
  padding: 5px;
  margin-bottom: 5px;
}

                     divinput1 {
  background-color: yellow;
  padding: 5px;
  margin-bottom: 5px;
}

HTML

<div data-type="info">Информационное сообщение.</div>
<div data-type="warning">Предупреждение!</div>
<div>Обычный блок.</div>
<div data-type="warning">Еще одно предупреждение.</div>

Для выбора элементов по data-атрибуту используйте селектор `[data-type="warning"]`. Добавьте его к тегу `div`.

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

Результат

Сообщения

Выполнить

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

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

Выбор поля только для чтения

Найдите поле ввода `textarea`, которое предназначено только для чтения (атрибут `readonly`), и задайте ему серый фон.

CSS

textareainput1 {
  background-color: #eee;
}

                     textareainput1 {
  background-color: #eee;
}

HTML

<textarea>Можно редактировать</textarea>
<textarea readonly>Только для чтения</textarea>

Атрибут `readonly` является булевым. Для выбора элемента с этим атрибутом используйте селектор `[readonly]`. Добавьте его к тегу `textarea`.

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

Результат

Сообщения

Выполнить

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

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

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

Хотя для выбора по ID обычно используется `#id`, можно использовать и селектор атрибута. Выберите элемент с `id`, точно равным "main-section", и добавьте ему красную рамку.

CSS

input1 {
  border: 1px solid red;
}

                     input1 {
  border: 1px solid red;
}

HTML

<div id="header">Шапка</div>
<div id="main-section">Основной контент</div>
<div id="footer">Подвал</div>

Используйте селектор атрибута `[id="main-section"]`. Вставьте его перед фигурными скобками.

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

Результат

Сообщения

Выполнить

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

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

Выбор элемента по точному значению class

Выберите элемент `<span>`, у которого атрибут `class` точно равен "icon info", и измените его цвет на синий. Обратите внимание, порядок и наличие других классов имеют значение при точном совпадении.

CSS

spaninput1 {
  color: blue;
}

                     spaninput1 {
  color: blue;
}

HTML

<span class="icon info">Инфо</span>
<span class="icon error">Ошибка</span>
<span class="info icon">Другой порядок</span>
<span class="icon">Просто иконка</span>

Используйте селектор атрибута `[class="icon info"]`. Важно, чтобы значение атрибута `class` точно совпадало, включая порядок слов. Допишите селектор.

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

Результат

Сообщения

Выполнить

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

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

Комбинация тега и атрибута

Стилизуйте только те изображения (`img`), у которых атрибут `title` равен "Картинка 1". Задайте им отступ снизу 10px.

CSS

img[title=input1] {
  margin-bottom: 10px;
}

                     img[title=input1] {
  margin-bottom: 10px;
}

HTML

<img src="https://naytikurs.ru/img/5.png" title="Картинка 1" alt="img5">
<p title="Картинка 1">Это не картинка</p>
<img src="https://naytikurs.ru/img/6.png" title="Картинка 2" alt="img6">

Необходимо скомбинировать селектор тега `img` и селектор атрибута `[title="Картинка 1"]`. Впишите недостающую часть селектора атрибута.

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

Результат

Сообщения

Выполнить

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

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