Селекторы, часть 1 / Селекторы атрибутов [16/18]
×

Селекторы атрибутов [16/18]

Ранее мы познакомились с атрибутом class и специальными селекторами по классу. Существуют селекторы, которые позволяют выбирать элементы по любым атрибутам.

Чаще всего такие селекторы используются при работе с формами, так как поля форм имеют атрибут type с разными значениями.

Селекторы атрибутов записываются с использованием квадратных скобок: элемент[атрибут]. Примеры селекторов:

1. input[checked] { ... }
2. input[type="text"] { ... }

Первый селектор выберет поля формы, у которых есть атрибут checked, второй селектор выберет поля формы, у которых атрибут type имеет значение text.

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

Выполнить задание
HTML
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Селекторы атрибутов</title> <link rel="stylesheet" href="/assets/course7/course-5.css"> </head> <body> <form class="login" action="https://echo.htmlacademy.ru" method="post"> <label for="login">Логин</label> <input type="text" id="login" name="login" required> <label for="password">Пароль</label> <input type="password" id="password" name="password"> <input type="submit" value="Войти"> </form> </body> </html>
CSS
HTML Academy
  1. Задайте фон полю с атрибутом required: background-color: #fcf8e3;.
  2. Задайте фон полю для ввода пароля: background-color: #f2dede;.
  3. Задайте цвет рамок для кнопки: border-color: green;.
Теория Проверить Следующее задание
Идёт запись на курс Базовый HTML и CSS #16, который стартует 16 января.

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

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

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

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