Каталог
Веб-разработка с нуля: четыре курса по порядку.
HTML, затем CSS, JavaScript и SQL. Каждый курс говорит, что нужно знать до него и что вы будете уметь после.
Загружаем курсы…
Каталог
HTML, затем CSS, JavaScript и SQL. Каждый курс говорит, что нужно знать до него и что вы будете уметь после.
Загружаем курсы…
Урок 20 из 53 · 9 мин
Выбор по атрибуту и его значению: [href], [type="email"], ^=, $=, *=.
У ссылок на PDF — значок документа, у внешних — стрелочка. Классы руками не расставлять!
Я умею выбирать по атрибутам: где ссылка начинается, чем заканчивается, что содержит.
[attr][disabled], [title] — элементы с этим атрибутом.<style>
[title] { border-bottom: 1px dotted; }
</style>
<abbr title="Без лактозы">БЛ</abbr>[attr="v"]input[type="email"].<style>
input[type="email"] { border: 2px solid #c8763a; }
</style>
<input type="email" placeholder="email"> <input placeholder="имя">[attr^="v"]a[href^="https"] — внешние ссылки.<style>
a[href^="http"]::after { content: " ↗"; }
</style>
<a href="https://partner.ru">Партнёр</a> <a href="/menu">Меню</a>[attr$="v"]a[href$=".pdf"] — ссылки на PDF.<style>
a[href$=".pdf"]::before { content: "📄 "; }
</style>
<a href="menu.pdf">Меню в PDF</a>[attr*="v"]a[href*="site"] — в адресе есть «site».<style>
a[href*="site"] { font-weight: 700; }
</style>
<a href="https://example.com/menu">наш сайт</a> <a href="https://other.ru">чужой</a>Селектор атрибута весит как класс. Им удобно размечать то, что уже есть в HTML.
Ссылкам, у которых href заканчивается на .pdf, задай font-weight: 700; ссылкам, начинающимся с https, — color: #c8763a.
Выберите один ответ.
Какой селектор выберет ссылки на PDF?
Введите короткий ответ без лишних пробелов.
Каким оператором записать «атрибут начинается с»? Введи два символа.
Проверяем состояние обучения…