Селекторы, часть 3 / Поиск слов внутри строки: [foo~="bar"] [4/18]
×

Поиск слов внутри строки: [foo~="bar"] [4/18]

Следующая запись: [foo~="bar"].

Такой селектор выберет все элементы, у которых значение атрибута foo содержит слово bar.

Входить должно именно слово, а не просто подстрока. То есть вхождение bar должно содержать с обеих сторон разделители: пробелы или начало/конец строки.

Хотите получать макеты для тренировки? Подписывайтесь на полезную рассылку!

Выполнить задание
HTML
<!DOCTYPE html> <html lang="ru"> <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 #10, который стартует 27 февраля.

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

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

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

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