Селекторы, часть 3 / Ищем в конце строки: [foo$="bar"] [2/18]
×

Ищем в конце строки: [foo$="bar"] [2/18]

Селектор вида [foo$="bar"] выбирает все элементы, значение атрибута foo которых оканчивается строкой bar.

Представьте, что у вас на сайте есть раздел с файлами для скачивания в разных форматах и вам нужно для каждого типа файлов добавить свою иконку. Пример разметки:

<a href="batman.pdf">Скачать</a>
<a href="superman.doc">Скачать</a>

В этом случае вы можете назначать иконки в CSS по расширениям файлов:

a[href$=".pdf"] {
    /* иконка для PDF */
}
a[href$=".doc"] {
    /* иконка для DOC */
}

И снова, селектор чувствителен к регистру.

Хотите верстать адаптивно, использовать БЭМ и LESS? Тогда записывайтесь на наш продвинутый интенсив.

Выполнить задание
HTML
<!DOCTYPE html> <html> <head> <title>Ищем в конце строки: [foo$="bar"]</title> <meta charset="utf-8"> <link rel="stylesheet" href="/assets/course58/style.css"> </head> <body> <header class="page-header">Форма личных данных</header> <main> <form action="/echo" method="post"> <fieldset> <legend>Заявление на получение визы на кухню</legend> <div class="half-width"> <label>Имя кота</label> <input type="text" name="name" value="Кексик"> </div> <div class="half-width"> <label>Котопаспорт</label> <input type="text" name="passport" value="KEKS-66893"> </div> <div class="half-width"> <label>Дата рождения</label> <input type="datetime" name="birthday" readonly value="18-07-2012"> </div> <div class="half-width"> <label>Посещения</label> <select name="type"> <option value="Каждый час">Каждый час</option> <option value="Каждые 3 часа">Каждые 3 часа</option> <option value="2 раза в день" selected>2 раза в день</option> <option value="1 раз в день">1 раз в день</option> </select> </div> <label>Любимые сладости</label> <input type="text" name="sweets" value="Люблю ванильные кексы и с изюмом"> <div class="half-width"> <label>Дата заявления</label> <input type="datetime" name="date" value="02-06-2014"> </div> <div class="half-width"> <label>Подпись</label> <input type="datetime" name="sign" value="Просто Кекс"> </div> <label>Слоган</label> <input type="text" name="slogan" value="Если ты Кекс - ешь кекс"> </fieldset> <div class="buttons"> <input type="submit" value="Оформить"> </div> </form> </main> <footer class="page-footer"></footer> </body> </html>
CSS
HTML Academy
  1. Всем элементам input, у которых значение атрибута value заканчивается подстрокой кекс установите цвет текста #3498db.
  2. А если подстрока равна Кекс, то цвет текста должен быть #e74c3c.
Теория Проверить Следующее задание
Идёт запись на курс Базовый HTML и CSS #16, который стартует 16 января.

Обсуждение и комментарии

Если у вас возникли сложности при прохождении задания, то вы можете обратиться за помощью на наш форум. Мы отслеживаем сообщения и постараемся ответить максимально быстро.

Пожалуйста, не пишите решение задач. Такие сообщения будут удаляться.

Перейти на форум или открыть комментарии.