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

Ищем в начале строки: [foo^="bar"] [1/18]

В первом курсе про селекторы мы разбирали селектор по атрибутам, когда запись input[type="text"] выберет все элементы input, у которых атрибут type равен text.

У этого механизма есть дополнительные возможности: можно выбирать элементы по вхождению подстроки в значение атрибута.

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

Представьте, что у вас есть три класса для задания колонок разной ширины, например: column-1, column-2 и column-3.

У этих классов часть свойств повторяется, а разной является только ширина. Чтобы не дублировать CSS-код, вы можете вынести общие свойства колонок в правило с селектором [class^="column-"], а в остальных правилах задать только ширину:

[class^="column-"] {
    /* общие свойства: отступы, рамки, фон и т.д. */
}
.column-1 { width: 100px; }
.column-2 { width: 200px; }
.column-3 { width: 300px; }

То есть, первый селектор выберет все дивы с классами, начинающимися на column-:

<div class="column-1"></div>
<div class="column-2"></div>
<div class="column-3"></div>

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

Селекторы этого курса относятся к спецификации CSS3 и работают во всех распространённых современных браузерах.

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

Выполнить задание
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="cat-name" value="Кексик"> </div> <div class="half-width"> <label>Котопаспорт</label> <input type="text" name="cat-passport" value="KEKS-66893"> </div> <div class="half-width"> <label>Дата рождения</label> <input type="datetime" name="cat-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> <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="cat-sign" value=""> </div> </fieldset> <div class="buttons"> <input type="submit" value="Оформить"> </div> </form> </main> <footer class="page-footer"></footer> </body> </html>
CSS
HTML Academy

Всем элементам input, у которых значение атрибута name начинается с cat:

  1. Установите цвет рамки #000000 и цвет текста #3498db.
  2. Установите фоновое изображение /assets/course58/cat-leg.png без повторения в позиции 100% 50%.
Теория Проверить Следующее задание
Идёт запись на курс Базовый HTML и CSS #16, который стартует 16 января.

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

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

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

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