Селекторы. Часть 3: атрибуты и логические псевдоклассы

Чтение — около 9 минут· без учёта практики

Ссылка на Википедию открывается в новой вкладке, а никто об этом не знает. Нельзя ли её пометить без новых классов?

В этом уроке вы узнаете

как выбирать элементы по атрибутам и их значениям: началу, концу и части адреса ссылки;
как исключить элементы псевдоклассом :not() и сократить длинные списки селекторов через :is() и :where();
как выбрать элемент по его содержимому псевдоклассом :has();
сколько весят эти псевдоклассы и почему :where() не весит ничего.

В уроках «Селекторы. Часть 1» и «Селекторы. Часть 2» мы выбирали элементы по тегу, классу, id и положению в дереве документа. Но часто нужный признак уже записан в HTML — в атрибутах: адрес ссылки, тип поля, подсказка. А иногда элемент проще выбрать по тому, чего в нём нет или что лежит у него внутри. В предыдущем уроке мы закончили с раскладкой; теперь возвращаемся к селекторам и применим их к компонентам сайта Тони.

Селекторы атрибутов

Селекторы атрибутов выбирают элементы, у которых есть определённый HTML-атрибут или атрибут с определённым значением. Имя атрибута записывают в квадратных скобках:

CSS

img[title] { /* все элементы <img> с атрибутом title */
  …
}

img здесь — обычный селектор типа, он выбирает все элементы <img>, а квадратные скобки оставляют из них только те, у которых есть атрибут — в примере глобальный атрибут title с текстовой подсказкой. Значение атрибута при этом не важно. Селектор атрибута можно соединять и с другими селекторами, например с классом или id, а без селектора перед скобками ([title]) он выбирает элементы любого типа:

CSS

.main[title] { … } /* элементы с классом main и атрибутом title */
#main[title] { … } /* элемент с id="main" и атрибутом title */

В следующем примере рамку получают изображения с атрибутом alt, который задаёт альтернативный текст. Обратный селектор img:not([alt]) подсвечивает изображение без alt: это ошибка в HTML, и такой селектор помогает её найти. Псевдокласс :not() разберём ниже.

Наличие атрибута: попробуйте сами

У первого и третьего фото есть alt — зелёная рамка. У второго alt забыт, и красная пунктирная обводка сразу показывает ошибку. Добавьте второму фото alt — обводка исчезнет.

index.html

HTML

<!doctype html>
<html lang="ru">
  <head>
    <meta charset="utf-8">
    <title>Селектор наличия атрибута</title>
    <style>
      body { font-family: system-ui, sans-serif; background-color: linen; color: #2b211b; }
      img {
        width: 100px;
        height: 100px;
        object-fit: cover;
      }
      img[alt] {
        /* все изображения с атрибутом alt */
        border: 3px solid seagreen;
      }
      img:not([alt]) {
        /* изображение без alt — ошибка в HTML: подсвечиваем, чтобы найти её */
        outline: 3px dashed red;
      }
    </style>
  </head>
  <body>
    <img src="assets/album-puppy.png" alt="Тони-щенок">
    <img src="assets/album-squirrel.png">
    <img src="assets/album-sleep.png" alt="Тони спит">
  </body>
</html>

Атрибут с указанным значением

Селектор [атрибут="значение"] выбирает элементы, у которых значение атрибута в точности совпадает с указанным. Так можно по-особенному оформить поле для ввода пароля:

Значение атрибута: попробуйте сами

Поле пароля выбрано по type="password" и обведено красным пунктиром; в фокусе рамка становится сплошной зелёной. Поле логина с type="text" не изменилось.

index.html

HTML

<!doctype html>
<html lang="ru">
  <head>
    <meta charset="utf-8">
    <title>Селектор атрибута с указанным значением</title>
    <style>
      body { font-family: system-ui, sans-serif; background-color: linen; color: #2b211b; }
      input[type="password"] {
        /* поля, у которых атрибут type равен password */
        border: 1px dotted red;
      }
      input[type="password"]:focus {
        /* то же поле в фокусе */
        border: 1px solid green;
      }
    </style>
  </head>
  <body>
    <form>
      <p><label>Логин: <input type="text" name="login" placeholder="Введите ваш логин"></label></p>
      <p><label>Пароль: <input type="password" name="password" placeholder="Введите ваш пароль"></label></p>
      <p><input type="submit" value="Далее"></p>
    </form>
  </body>
</html>

Во втором правиле селектор атрибута соединён с псевдоклассом :focus: стили действуют, когда поле находится в фокусе — посетитель нажал на него или перешёл к нему клавишей Tab. Псевдокласс :focus мы рассматривали в уроке «Псевдоклассы и псевдоэлементы».

Начало, конец и часть значения

Иногда нужно выбрать элементы, у которых значение атрибута только начинается, заканчивается или содержит определённые символы. Для этого перед знаком = ставят оператор:

Селектор	Что выбирает
`[attr]`	Элементы, у которых есть атрибут, с любым значением.
`[attr="value"]`	Значение в точности равно `value`.
`[attr^="value"]`	Значение начинается с `value`.
`[attr$="value"]`	Значение заканчивается на `value`.
`[attr*="value"]`	Значение содержит `value` в любом месте.
`[attr~="value"]`	Значение — список слов через пробел, и одно из слов равно `value`.
`[attr\|="value"]`	Значение равно `value` или начинается с `value-` (через дефис).

Операторы атрибутов: попробуйте сами

Внешние ссылки с https:// — оранжевые, ссылка на .mp3 — на жёлтом фоне, ссылка на Википедию — жирная. Абзац с title="go home" выбран по слову home, а "homes" — нет. Курсивом — тексты с lang="en" и "en-GB", но не "de". Флаг i выбрал и rules.pdf, и PLAN.PDF.

index.html

HTML

<!doctype html>
<html lang="ru">
  <head>
    <meta charset="utf-8">
    <title>Операторы селекторов атрибутов</title>
    <style>
      body { font-family: system-ui, sans-serif; background-color: linen; color: #2b211b; }
      li { margin-bottom: 0.25rem; }
      a[href^="https://"] {
        /* адрес начинается с https:// — внешняя ссылка */
        color: darkorange;
      }
      a[href$=".mp3"] {
        /* адрес заканчивается на .mp3 — звуковой файл */
        background-color: khaki;
      }
      a[href*="wikipedia"] {
        /* адрес содержит wikipedia в любом месте */
        font-weight: bold;
      }
      p[title~="home"] {
        /* в значении есть отдельное слово home */
        background-color: lightblue;
      }
      [lang|="en"] {
        /* значение равно en или начинается с en- */
        font-style: italic;
      }
      a[href$=".PDF" i] {
        /* флаг i: регистр букв не важен — подходят .pdf и .PDF */
        border-bottom: 2px solid seagreen;
      }
    </style>
  </head>
  <body>
    <ul>
      <li><a href="https://ru.wikipedia.org/wiki/Карликовый_пинчер">Статья о породе</a></li>
      <li><a href="https://www.youtube.com/watch?v=ojULkWEUsPs">Песня для прогулок</a></li>
      <li><a href="assets/bark.mp3">Мой лай</a></li>
      <li><a href="docs/rules.pdf">Правила прогулки</a> и <a href="docs/PLAN.PDF">план дня</a></li>
    </ul>
    <p title="go home">title="go home" — содержит слово home</p>
    <p title="homes">title="homes" — не содержит отдельного слова home</p>
    <p lang="en">Good boy! — lang="en"</p>
    <p lang="en-GB">Sit! — lang="en-GB"</p>
    <p lang="de">Platz! — lang="de"</p>
  </body>
</html>

Разберём операторы подробнее.

a[href^="https://"] выбирает ссылки, адрес которых начинается с https://, — абсолютные адреса с этим протоколом, в том числе адреса текущего сайта. Этот селектор сам по себе не отличает внешнюю ссылку от внутренней. Раньше сайты работали и по протоколу http://, поэтому в старом коде встречается пара a[href^="http://"], a[href^="https://"].
a[href$=".mp3"] выбирает ссылки на файлы с определённым расширением: звук, документы, архивы.
img[src*="IMG_"] выбирает изображения, в адресе которых есть IMG_ в любом месте: подойдут xxxIMG_, IMG_xxxx и xxxIMG_xxxx. Так называют файлы многие фотоаппараты, например Canon. Иногда такой селектор позволяет оформить нужные элементы быстрее, чем назначать класс каждому.
p[title~="home"] ищет отдельное слово в списке через пробел. Подойдут title="go home" и title="home home", но не "home-1", "homes" и "shome". По тому же принципу устроен атрибут class: селектор .main равносилен [class~="main"].
[title|="home"] выбирает значение, которое состоит только из этого слова или продолжается после него через дефис: подойдут "home" и "home-1", но не "home home", "not home", "homes" и "shome". Оператор придуман для кодов языка: [lang|="en"] выбирает и lang="en", и lang="en-GB".

У адресов в href значение сравнивается с учётом регистра букв: [href$=".pdf"] не выберет файл PLAN.PDF. Чтобы регистр не учитывался, перед закрывающей скобкой ставят флаг i: [href$=".pdf" i].

Для некоторых атрибутов HTML, например type у input, регистр значений по умолчанию не учитывается. Флаг i задаёт сравнение без учёта регистра букв ASCII; это не общее преобразование регистра для всех языков. Селектор [href$=".mp3"] проверяет конец записанного атрибута: адрес sound.mp3?download=1 ему уже не подходит.

Псевдокласс отрицания :not()

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

:not(): попробуйте сами

Два фото с классом photo — в оранжевой рамке, остальные три выбраны селектором img:not(.photo) и получили зелёную пунктирную. Добавьте класс photo третьему фото — пунктир с него исчезнет.

index.html

HTML

<!doctype html>
<html lang="ru">
  <head>
    <meta charset="utf-8">
    <title>Псевдокласс отрицания :not()</title>
    <style>
      body { font-family: system-ui, sans-serif; background-color: linen; color: #2b211b; }
      img {
        width: 100px;
        height: 100px;
        object-fit: cover;
      }
      .photo {
        /* фото с классом photo */
        border: 3px solid orange;
      }
      img:not(.photo) {
        /* все изображения без класса photo */
        border: 3px dashed seagreen;
      }
    </style>
  </head>
  <body>
    <img src="assets/album-puppy.png" alt="Тони-щенок" class="photo">
    <img src="assets/album-squirrel.png" alt="Тони с белкой" class="photo">
    <img src="assets/album-hoodie.png" alt="Тони в толстовке">
    <img src="assets/album-harness.png" alt="Тони в шлейке">
    <img src="assets/album-laugh.png" alt="Тони смеётся">
  </body>
</html>

В скобках :not() можно перечислить несколько селекторов через запятую и использовать сложные селекторы с комбинаторами. Например, input:not([type="radio"], [type="checkbox"]) выбирает все поля, кроме переключателей и флажков, а a:not(nav a) — ссылки вне меню. Внутри :not() нельзя указывать только псевдоэлементы: ::before, ::first-line и подобные.

Псевдоклассы :is() и :where()

Псевдокласс :is() выбирает элемент, если он подходит под любой селектор из списка в скобках. Он сокращает повторяющиеся группы: вместо header a, footer a можно написать :is(header, footer) a, а вместо четырёх селекторов для заголовков в статье и разделе — :is(article, section) :is(h2, h3).

Псевдокласс :where() записывается и выбирает элементы точно так же. Разница — в весе: о ней ниже. Ещё одно отличие от обычного группового селектора: если один из селекторов в списке :is() или :where() браузер не понимает, он просто пропускает его, а не всё правило целиком.

:is() и :where(): попробуйте сами

Ссылки шапки и подвала выбраны одним правилом :is(header, footer) a. Ссылка в main зелёная, но не жирная: вес :where(main) a такой же, как у a, и побеждает правило ниже. Замените :where на :is — ссылка станет жирной.

index.html

HTML

<!doctype html>
<html lang="ru">
  <head>
    <meta charset="utf-8">
    <title>Псевдоклассы :is() и :where()</title>
    <style>
      body { font-family: system-ui, sans-serif; background-color: linen; color: #2b211b; }
      header, footer { padding: 0.5rem; background-color: #fffaf3; }
      /* вместо header a, footer a — одно правило */
      :is(header, footer) a {
        color: saddlebrown;
      }
      /* :where() записывается так же, но не добавляет веса */
      :where(main) a {
        color: seagreen;
        font-weight: bold;
      }
      /* вес :where(main) a — (0, 0, 1), как у a: побеждает правило, записанное ниже */
      a {
        font-weight: normal;
      }
    </style>
  </head>
  <body>
    <header><a href="#">Главная</a> · <a href="#">Мои игрушки</a></header>
    <main><p>Подробнее — на <a href="#">странице игрушек</a>.</p></main>
    <footer><a href="mailto:tony@example.com">Написать хозяину</a></footer>
  </body>
</html>

Псевдокласс :has()

Все селекторы до сих пор смотрели «вниз» и «вправо»: выбирали потомков и следующих соседей. Псевдокласс :has() позволяет выбрать элемент по тому, что лежит внутри него или идёт после него. Селектор li:has(.badge) выбирает пункт списка, в котором есть значок, а h2:has(+ p) — заголовок, сразу за которым стоит абзац. Поэтому :has() иногда называют «родительским селектором».

:has(): попробуйте сами

Карточка со значком «Любимая» обведена рамкой — без отдельного класса. Фото без подписи выбрано через figure:not(:has(figcaption)) и стало бледнее. Перенесите значок в первую карточку — рамка переедет за ним.

index.html

HTML

<!doctype html>
<html lang="ru">
  <head>
    <meta charset="utf-8">
    <title>Псевдокласс :has()</title>
    <style>
      body { font-family: system-ui, sans-serif; background-color: linen; color: #2b211b; }
      ul { display: flex; flex-wrap: wrap; gap: 1rem; list-style: none; padding: 0; }
      li { position: relative; padding: 0.5rem; border-radius: 8px; background-color: #fffaf3; }
      figure { margin: 0; }
      img { display: block; width: 120px; height: 160px; object-fit: cover; }
      .badge { position: absolute; top: 0.75rem; right: 0.75rem; padding: 0 0.5rem; border-radius: 999px; background-color: saddlebrown; color: white; }
      /* карточка, внутри которой есть значок */
      li:has(.badge) {
        outline: 3px solid tan;
      }
      /* фото без подписи — напоминание добавить её */
      figure:not(:has(figcaption)) {
        opacity: 0.6;
      }
    </style>
  </head>
  <body>
    <ul>
      <li><figure><img src="assets/album-puppy.png" alt="Тони-щенок"><figcaption>Я в детстве</figcaption></figure></li>
      <li>
        <figure><img src="assets/album-squirrel.png" alt="Тони с белкой"><figcaption>С белкой</figcaption></figure>
        <span class="badge">Любимая</span>
      </li>
      <li><figure><img src="assets/album-sleep.png" alt="Тони спит"></figure></li>
    </ul>
  </body>
</html>

:has() поддерживается всеми современными браузерами с конца 2023 года. Его удобно сочетать с другими псевдоклассами: form:has(:invalid) выбирает форму с неверно заполненным полем, а label:has(input:checked) — подпись отмеченного флажка. Не стоит строить на :has() всё оформление страницы: если признак можно задать классом в HTML, класс проще читать и поддерживать.

Вес логических псевдоклассов

В уроке «Каскадность» мы считали специфичность по трём числам. Селекторы атрибутов весят как класс: a[target] — (0, 1, 1). У псевдоклассов из этого урока свои правила:

Селектор	Вес
`:not()`, `:is()`, `:has()`	Вес самого «тяжёлого» селектора в скобках; сам псевдокласс ничего не добавляет. `:is(#toy, p)` весит как `#toy` — (1, 0, 0) — даже для абзаца без `id`.
`:where()`	Сам `:where()` вместе с аргументами даёт (0, 0, 0). Части селектора вне него считаются как обычно; перед специфичностью каскад сравнивает происхождение, важность и слои.

Нулевой вес :where() полезен для базовых стилей, которые легко переопределить: например, :where(ul[class], ol[class]) { list-style: none; } убирает маркеры у списков с классом и имеет нулевую специфичность. Правило для конкретного списка легко его переопределит при одинаковых источнике, важности и слое.

Выберите ссылки, фото и поля фрагмента сайта Тони по атрибутам, исключите флажок через :not() и найдите карточку со значком через :has(). Тренажёр подсвечивает найденные элементы и сравнивает их с нужными.

Продвинутые

Наличие атрибута

Выберите ссылки, у которых есть атрибут target.

<p>Подробнее — в <a href="https://ru.wikipedia.org/wiki/Карликовый_пинчер" target="_blank">Википедии</a>
  и на <a href="pages/toys.html">странице игрушек</a>.</p>
<p><a href="assets/bark.mp3">Мой лай</a> · <a href="mailto:tony@example.com">Написать хозяину</a></p>
<ul class="gallery">
  <li><figure><img src="/_astro/album-puppy.C-gj2d6L.png" alt="Тони-щенок"><figcaption>Я в детстве</figcaption></figure></li>
  <li><figure><img src="/_astro/album-squirrel.0Nm67Inm.png" alt="Тони с белкой"><figcaption>С плюшевой белкой</figcaption></figure>
    <span class="badge">Любимая</span></li>
  <li><figure><img src="/_astro/album-sleep.BhrygS43.png" alt=""></figure></li>
</ul>
<form>
  <p><label>Имя <input type="text" name="name"></label></p>
  <p><label>Почта <input type="email" name="email"></label></p>
  <p><label><input type="checkbox" name="rules"> С правилами согласен</label></p>
</form>

Продвинутые

Начало значения

Выберите ссылку на электронную почту: её адрес начинается с mailto:.

<p>Подробнее — в <a href="https://ru.wikipedia.org/wiki/Карликовый_пинчер" target="_blank">Википедии</a>
  и на <a href="pages/toys.html">странице игрушек</a>.</p>
<p><a href="assets/bark.mp3">Мой лай</a> · <a href="mailto:tony@example.com">Написать хозяину</a></p>
<ul class="gallery">
  <li><figure><img src="/_astro/album-puppy.C-gj2d6L.png" alt="Тони-щенок"><figcaption>Я в детстве</figcaption></figure></li>
  <li><figure><img src="/_astro/album-squirrel.0Nm67Inm.png" alt="Тони с белкой"><figcaption>С плюшевой белкой</figcaption></figure>
    <span class="badge">Любимая</span></li>
  <li><figure><img src="/_astro/album-sleep.BhrygS43.png" alt=""></figure></li>
</ul>
<form>
  <p><label>Имя <input type="text" name="name"></label></p>
  <p><label>Почта <input type="email" name="email"></label></p>
  <p><label><input type="checkbox" name="rules"> С правилами согласен</label></p>
</form>

Продвинутые

Конец значения

Выберите ссылку на звуковой файл с расширением .mp3.

<p>Подробнее — в <a href="https://ru.wikipedia.org/wiki/Карликовый_пинчер" target="_blank">Википедии</a>
  и на <a href="pages/toys.html">странице игрушек</a>.</p>
<p><a href="assets/bark.mp3">Мой лай</a> · <a href="mailto:tony@example.com">Написать хозяину</a></p>
<ul class="gallery">
  <li><figure><img src="/_astro/album-puppy.C-gj2d6L.png" alt="Тони-щенок"><figcaption>Я в детстве</figcaption></figure></li>
  <li><figure><img src="/_astro/album-squirrel.0Nm67Inm.png" alt="Тони с белкой"><figcaption>С плюшевой белкой</figcaption></figure>
    <span class="badge">Любимая</span></li>
  <li><figure><img src="/_astro/album-sleep.BhrygS43.png" alt=""></figure></li>
</ul>
<form>
  <p><label>Имя <input type="text" name="name"></label></p>
  <p><label>Почта <input type="email" name="email"></label></p>
  <p><label><input type="checkbox" name="rules"> С правилами согласен</label></p>
</form>

Продвинутые

Точное значение

Выберите декоративное фото — с пустым атрибутом alt.

<p>Подробнее — в <a href="https://ru.wikipedia.org/wiki/Карликовый_пинчер" target="_blank">Википедии</a>
  и на <a href="pages/toys.html">странице игрушек</a>.</p>
<p><a href="assets/bark.mp3">Мой лай</a> · <a href="mailto:tony@example.com">Написать хозяину</a></p>
<ul class="gallery">
  <li><figure><img src="/_astro/album-puppy.C-gj2d6L.png" alt="Тони-щенок"><figcaption>Я в детстве</figcaption></figure></li>
  <li><figure><img src="/_astro/album-squirrel.0Nm67Inm.png" alt="Тони с белкой"><figcaption>С плюшевой белкой</figcaption></figure>
    <span class="badge">Любимая</span></li>
  <li><figure><img src="/_astro/album-sleep.BhrygS43.png" alt=""></figure></li>
</ul>
<form>
  <p><label>Имя <input type="text" name="name"></label></p>
  <p><label>Почта <input type="email" name="email"></label></p>
  <p><label><input type="checkbox" name="rules"> С правилами согласен</label></p>
</form>

Продвинутые

Все поля, кроме флажка

Выберите все поля <input>, кроме флажка.

<p>Подробнее — в <a href="https://ru.wikipedia.org/wiki/Карликовый_пинчер" target="_blank">Википедии</a>
  и на <a href="pages/toys.html">странице игрушек</a>.</p>
<p><a href="assets/bark.mp3">Мой лай</a> · <a href="mailto:tony@example.com">Написать хозяину</a></p>
<ul class="gallery">
  <li><figure><img src="/_astro/album-puppy.C-gj2d6L.png" alt="Тони-щенок"><figcaption>Я в детстве</figcaption></figure></li>
  <li><figure><img src="/_astro/album-squirrel.0Nm67Inm.png" alt="Тони с белкой"><figcaption>С плюшевой белкой</figcaption></figure>
    <span class="badge">Любимая</span></li>
  <li><figure><img src="/_astro/album-sleep.BhrygS43.png" alt=""></figure></li>
</ul>
<form>
  <p><label>Имя <input type="text" name="name"></label></p>
  <p><label>Почта <input type="email" name="email"></label></p>
  <p><label><input type="checkbox" name="rules"> С правилами согласен</label></p>
</form>

Продвинутые

Карточка со значком

Выберите пункт альбома <li>, внутри которого есть значок .badge.

<p>Подробнее — в <a href="https://ru.wikipedia.org/wiki/Карликовый_пинчер" target="_blank">Википедии</a>
  и на <a href="pages/toys.html">странице игрушек</a>.</p>
<p><a href="assets/bark.mp3">Мой лай</a> · <a href="mailto:tony@example.com">Написать хозяину</a></p>
<ul class="gallery">
  <li><figure><img src="/_astro/album-puppy.C-gj2d6L.png" alt="Тони-щенок"><figcaption>Я в детстве</figcaption></figure></li>
  <li><figure><img src="/_astro/album-squirrel.0Nm67Inm.png" alt="Тони с белкой"><figcaption>С плюшевой белкой</figcaption></figure>
    <span class="badge">Любимая</span></li>
  <li><figure><img src="/_astro/album-sleep.BhrygS43.png" alt=""></figure></li>
</ul>
<form>
  <p><label>Имя <input type="text" name="name"></label></p>
  <p><label>Почта <input type="email" name="email"></label></p>
  <p><label><input type="checkbox" name="rules"> С правилами согласен</label></p>
</form>

Продвинутые

Фото без подписи

Выберите <figure>, в которых нет подписи <figcaption>.

<p>Подробнее — в <a href="https://ru.wikipedia.org/wiki/Карликовый_пинчер" target="_blank">Википедии</a>
  и на <a href="pages/toys.html">странице игрушек</a>.</p>
<p><a href="assets/bark.mp3">Мой лай</a> · <a href="mailto:tony@example.com">Написать хозяину</a></p>
<ul class="gallery">
  <li><figure><img src="/_astro/album-puppy.C-gj2d6L.png" alt="Тони-щенок"><figcaption>Я в детстве</figcaption></figure></li>
  <li><figure><img src="/_astro/album-squirrel.0Nm67Inm.png" alt="Тони с белкой"><figcaption>С плюшевой белкой</figcaption></figure>
    <span class="badge">Любимая</span></li>
  <li><figure><img src="/_astro/album-sleep.BhrygS43.png" alt=""></figure></li>
</ul>
<form>
  <p><label>Имя <input type="text" name="name"></label></p>
  <p><label>Почта <input type="email" name="email"></label></p>
  <p><label><input type="checkbox" name="rules"> С правилами согласен</label></p>
</form>

Больше заданий — в тренажёре CSS-селекторов

Проверьте себя

Задание

Теперь видно, какая ссылка уводит на другой сайт, а моя любимая белка — в рамочке!

Значки ссылок и любимая карточка

В редакторе — сайт Тони после урока о позиционировании. Измените css/style.css, не меняя HTML:

Ссылкам, которые открываются в новой вкладке (атрибут target="_blank"), добавьте после текста стрелку: псевдоэлемент ::after с content: " ↗".
Ссылкам на электронную почту (адрес начинается с mailto:) добавьте перед текстом конверт: ::before с content: "✉ ".
Карточку альбома, в которой есть значок .badge, обведите: outline: 3px solid tan, outline-offset: 4px и border-radius: 8px.

Ожидаемый результат: на главной после ссылки на Википедию стоит стрелка ↗, а у адреса почты в подвале всех страниц — конверт. На странице «Мои игрушки» карточка с белкой и значком «Любимая» обведена рамкой, остальные карточки без изменений.

Выполните задание

css/style.css

CSS

/* Общие стили сайта Тони */

/* Ширина и высота включают внутренние отступы и рамку — у всех элементов и псевдоэлементов */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Шрифт заголовков Nunito (лицензия SIL Open Font License): кириллица и латиница в разных файлах */
@font-face {
  font-family: "Nunito";
  src: url("../assets/nunito-cyrillic-800-normal.woff2") format("woff2");
  font-weight: 800;
  font-display: swap; /* пока шрифт загружается, текст виден запасным шрифтом */
  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: "Nunito";
  src: url("../assets/nunito-latin-800-normal.woff2") format("woff2");
  font-weight: 800;
  font-display: swap;
  unicode-range: U+0000-00FF, U+2000-206F, U+20AC, U+2122;
}

body {
  background-color: linen;
  color: #2b211b; /* цвет для потомков без собственного значения */
  font-size: 1.0625rem; /* 17px при настройке браузера по умолчанию */
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; /* системный шрифт устройства */
  line-height: 1.6; /* множитель: у каждого элемента интервал от его собственного размера шрифта */
  margin: 0; /* убираем отступ браузера: шапка и подвал во всю ширину окна */
}

/* Поля основного содержимого: текст не прижимается к краям окна */
main {
  padding: 1.5rem 1rem;
  max-width: 68rem; /* на широком экране строки не растягиваются на всё окно */
  margin: 0 auto; /* колонка по центру */
}

/* Изображения и видео не шире колонки, пропорции сохраняются */
img,
video {
  max-width: 100%;
  height: auto;
}

/* Фреймы, аудиоплеер, индикаторы и поля формы не выходят за колонку */
progress,
meter,
iframe,
audio,
input,
select,
textarea,
button {
  max-width: 100%;
}

/* Разрешаем группе полей сужаться вместе с колонкой. */
fieldset {
  min-width: 0;
}

/* Общий цвет заголовков — групповой селектор */
h1,
h2 {
  color: saddlebrown;
  font-family: "Nunito", "Trebuchet MS", system-ui, sans-serif;
  font-weight: 800;
  line-height: 1.2; /* крупному тексту хватает меньшего интервала */
}

/* Размеры заголовков в rem — от размера шрифта корня, а не родителя */
h1 {
  text-align: center;
  font-size: 2.5rem;
}

h2 {
  font-size: 1.75rem;
}

/* Вводный блок главной страницы */
.intro {
  background-color: hsl(30, 80%, 95%);
  padding: 1.5rem; /* фон вокруг текста; заодно не выпускает margin заголовка за пределы блока */
  border-radius: 16px; /* скругляется и фон, хотя рамки нет */
  /* Лапка в правом нижнем углу; цвет фона выше остаётся запасным, если картинка не загрузится */
  background-image: url("../assets/paw.svg");
  background-repeat: no-repeat;
  background-position: right 1rem bottom 1rem;
  background-size: 4rem;
}

/* Разделы главной — светлые карточки на фоне страницы */
main > section {
  background-color: #fffaf3;
  border: 1px solid hsl(28, 30%, 82%);
  border-radius: 16px;
  padding: 1.5rem;
  margin-top: 1.5rem;
}

/* Ширина вводных абзацев ограничена 60ch; количество букв в строке зависит от шрифта и текста */
.intro p {
  max-width: 60ch;
}

/* Важное предупреждение во вводном блоке — темнее основного акцента */
.intro strong {
  color: #6e3510;
}

/* Оглавление главной страницы — переносимый ряд «таблеток» на Flexbox */
.toc {
  background-color: white;
  border: 1px solid tan;
  display: flex;
  flex-wrap: wrap; /* «таблетки», которым не хватает места, переходят на новую строку */
  gap: 0.5rem; /* промежутки между «таблетками» и между строками */
  list-style: none;
  padding: 0.75rem;
}

/* Подчёркивание ссылок чуть ниже букв: не задевает выносные элементы */
a {
  text-underline-offset: 3px;
}

/* Тонкая линия отделяет шапку от страницы */
header {
  border-bottom: 1px solid tan;
}

/* Меню на Flexbox: пункты могут переноситься, промежутки задаёт gap */
nav ul {
  margin: 0;
  padding: 0.5rem 1rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  list-style: none;
}

/* Ссылка на запись стоит отдельно у правого края: автоматический отступ забирает свободное место */
nav li:last-child {
  margin-left: auto;
}

/* Ссылки меню в шапке — селектор потомков */
nav a {
  color: saddlebrown;
  text-decoration: none;
  display: inline-block; /* у строчной ссылки вертикальный padding не раздвигает строку */
  padding: 0.4rem 0.9rem;
  border-radius: 999px; /* «таблетка»: радиус больше половины высоты */
}

/* Ссылки оглавления главной страницы */
.toc a {
  color: #6b5d52; /* тёплый серый: контраст 6.34:1 на белом фоне оглавления */
  display: block; /* ссылка заполняет «таблетку» целиком */
  padding: 0.25rem 0.75rem;
  border: 1px solid tan;
  border-radius: 999px;
  text-decoration: none;
}

/* Фотографии со скруглёнными углами */
figure img {
  border-radius: 8px;
}

figcaption {
  color: #6b5d52; /* тёплый серый: контраст 5.64:1 на фоне linen */
  font-size: 0.95rem;
}

footer {
  background-color: hsl(30, 50%, 90%);
  text-align: center;
  padding: 1rem;
}

/* Ссылка в подвале берёт цвет текста подвала */
footer a {
  color: inherit;
}

/* Поля формы получают шрифт страницы вместо шрифта браузера */
input,
select,
textarea,
button {
  font: inherit;
}

/* Ссылки темнеют при наведении указателя */
a:hover {
  color: #5c2d0c;
}

/* Ссылки меню подчёркиваются при наведении и фокусе с клавиатуры */
nav a:hover,
nav a:focus-visible {
  text-decoration: underline;
}

/* Заметная рамка фокуса у ссылок, полей и кнопок при работе с клавиатуры */
:focus-visible {
  outline: 3px solid #1f6feb;
  outline-offset: 3px;
}

/* Цитата из книги — шрифтом с засечками и курсивом */
blockquote {
  font-family: Georgia, "Times New Roman", serif;
  font-style: italic;
  border-left: 4px solid tan; /* черта слева выделяет цитату */
  padding-left: 1rem;
}

/* Подпись под цитатой — у правого края */
blockquote + figcaption {
  text-align: right;
}

/* Строки формы на Flexbox: подпись — колонка постоянной ширины, поле занимает остаток строки,
   а на узком экране переносится под подпись */
fieldset p {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1rem;
}

fieldset p label {
  flex: 0 1 12rem; /* не растёт, но может сжаться в узкой строке */
  min-width: 0;
}

fieldset p input,
fieldset p select,
fieldset p textarea {
  flex: 1 1 12rem; /* растёт и сжимается от исходной ширины 12rem */
  min-width: 0; /* поле может стать уже своего автоматического минимума */
}

/* Фотоальбом на Grid: столько колонок, сколько помещается карточек шириной не меньше 15rem */
.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: 1rem;
  list-style: none;
  padding: 0;
}

.gallery figure {
  margin: 0;
}

.gallery img {
  width: 100%; /* фото заполняет ширину своей ячейки */
}

/* Список команд: первая колонка подстраивается под текст, оставляя место для перевода. */
dl {
  display: grid;
  grid-template-columns: fit-content(calc(50% - 0.5rem)) minmax(0, 1fr);
  gap: 0.5rem 1rem;
}

dt {
  overflow-wrap: anywhere;
  grid-column: 1;
  font-weight: bold;
}

dd {
  grid-column: 2;
  overflow-wrap: anywhere; /* длинный перевод переносится внутри своей колонки */
  margin: 0; /* браузерный отступ слева больше не нужен: колонку задаёт сетка */
}

/* Длинные слова и адреса переносятся, а не выходят за край узкого экрана */
body {
  overflow-wrap: break-word;
}

/* Таблица режима дня на узком экране прокручивается в своей рамке, а не сжимается до нечитаемых колонок */
.table-wrap {
  overflow-x: auto;
}

table {
  width: 100%;
  min-width: 28rem;
}

/* Подпись таблицы прокручивается вместе с ней: прижимаем её к началу, чтобы она была видна сразу */
caption {
  text-align: left;
}

/* Широкий экран: в разделе «Моя любимая игрушка» фото справа, текст слева.
   На узком экране правило не действует, и раздел остаётся одной колонкой. */
@media (width >= 48rem) {
  .toy {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    column-gap: 1.5rem;
  }

  .toy figure {
    grid-column: 2;
    grid-row: 1 / span 6; /* фото рядом со всеми абзацами раздела */
    margin: 0;
  }

  .toy hr {
    width: 100%;
  }
}

/* Карточка альбома — точка отсчёта для значка: position: relative не сдвигает её и не меняет поток */
.gallery li {
  position: relative;
}

/* Значок «Любимая» в правом верхнем углу карточки; из потока исключён, поэтому фото не сдвигается */
.badge {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  padding: 0.2rem 0.7rem;
  border-radius: 999px;
  background-color: saddlebrown;
  color: white;
  font-size: 0.85rem;
  font-weight: bold;
}

/* Шапка прилипает к верхнему краю окна. Фон нужен, чтобы под шапкой не просвечивал текст страницы */
header {
  position: sticky;
  top: 0;
  z-index: 10; /* выше карточек альбома: они тоже позиционированы и записаны в HTML позже шапки */
  background-color: linen;
}

/* Липкая шапка должна быть низкой: пункты меню не сжимаются и не переносятся на вторую строку,
   а если им не хватает места, меню прокручивается внутри шапки */
nav ul {
  flex-wrap: nowrap;
  overflow-x: auto;
}

nav li {
  flex-shrink: 0;
}

/* Заголовок, к которому ведёт ссылка-якорь, не прячется под липкой шапкой.
   В rem: при увеличении текста растут и шапка, и отступ */
[id] {
  scroll-margin-top: 4.5rem;
}

index.html

HTML

<!doctype html>
<html lang="ru">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="Сайт карликового пинчера Тони: игрушки, режим дня и запись на прогулку.">
    <title>Сайт Тони</title>
    <link rel="stylesheet" href="css/style.css">
  </head>
  <body>
    <header>
      <!-- Меню сайта -->
      <nav>
        <ul>
          <li><a href="index.html">Главная</a></li>
          <li><a href="pages/toys.html">Мои игрушки</a></li>
          <li><a href="pages/signup.html">Запись на прогулку</a></li>
        </ul>
      </nav>
    </header>
    <main>
      <div class="intro">
        <h1 id="top">Привет! Меня зовут Тони</h1>
        <p>Я карликовый пинчер. Мне три года, я вешу 8&nbsp;кг и люблю гулять в любую погоду. Хозяин говорит: <q>Тони — лучший сторож в доме</q>.</p>
        <p>Мой день рождения — <time datetime="2023-09-22">22 сентября</time>. <strong>Пожалуйста, не кормите меня со стола!</strong></p>
        <p>Моя родословная записана в Российской кинологической федерации (<abbr title="Российская кинологическая федерация">РКФ</abbr>).</p>
      </div>
      <ul class="toc">
        <li><a href="#toy">Моя любимая игрушка</a></li>
        <li><a href="#commands">Команды, которые я знаю</a></li>
        <li><a href="#schedule">Мой режим дня</a></li>
        <li><a href="#walks">Где я гуляю</a></li>
        <li><a href="#song">Песня для прогулок</a></li>
      </ul>
      <section class="toy">
        <h2 id="toy">Моя любимая игрушка</h2>
        <p data-toy-id="17">Это канат с мячиком. Хозяин бросает его, а я приношу обратно — <em>почти</em> всегда. <a href="pages/toys.html">Посмотреть все игрушки Тони</a>.</p>
        <figure>
          <img src="assets/tony-toy.png" alt="Тони сидит и держит в зубах канат с красным мячиком" width="300" height="400" title="Мой канат &quot;Удав&quot;">
          <figcaption>Я и мой канат «Удав»</figcaption>
        </figure>
        <p><a href="assets/tony-toy.png" download>Скачать фотографию</a></p>
        <p>Подробнее о моей породе — в статье <a href="https://ru.wikipedia.org/wiki/Карликовый_пинчер" target="_blank">«Карликовый пинчер» в Википедии</a>.</p>
        <hr>
        <p>Вечером игра закончилась. Канат остался на полу, а я свернулся калачиком в кресле.</p>
      </section>
      <section>
        <h2>Мой стишок</h2>
        <p>
          Я маленький, но смелый,<br>
          Гуляю целый день,<br>
          А вечером на кресле<br>
          Сплю — и мне не лень.
        </p>
      </section>
      <section>
        <h2 id="commands">Команды, которые я знаю</h2>
        <p>Хозяин научил меня командам на немецком:</p>
        <dl>
          <dt lang="de">Sitz!</dt>
          <dd>сидеть</dd>
          <dt lang="de">Platz!</dt>
          <dd>лежать</dd>
          <dt lang="de">Fuß!</dt>
          <dd>рядом</dd>
        </dl>
        <details>
          <summary>Почему команды на немецком?</summary>
          <p>Карликовый пинчер — немецкая порода, и хозяину понравилась эта традиция.</p>
        </details>
      </section>
      <section>
        <h2 id="schedule">Мой режим дня</h2>
        <div class="table-wrap" tabindex="0" role="region" aria-label="Режим дня Тони">
          <table>
            <caption>Режим дня Тони</caption>
            <thead>
              <tr>
                <th scope="col">Время</th>
                <th scope="col">Будни</th>
                <th scope="col">Выходные</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <th scope="row">07:00</th>
                <td>Прогулка, 20 минут</td>
                <td>Сплю</td>
              </tr>
              <tr>
                <th scope="row">08:00</th>
                <td colspan="2">Завтрак</td>
              </tr>
              <tr>
                <th scope="row">13:00</th>
                <td>Жду хозяина и сплю</td>
                <td>Прогулка в парке, 1 час</td>
              </tr>
              <tr>
                <th scope="row">19:00</th>
                <td colspan="2">Ужин</td>
              </tr>
              <tr>
                <th scope="row">21:00</th>
                <td colspan="2">Вечерняя прогулка</td>
              </tr>
            </tbody>
          </table>
        </div>
      </section>
      <section>
        <h2 id="progress">Мои успехи</h2>
        <p>Учу команду «Апорт»: пройдено 3 занятия из 5. <progress value="3" max="5">3 из 5</progress></p>
        <p>Прогулка сегодня: 40 минут. <meter value="40" min="0" max="90" low="30" high="60" optimum="75">40 из 90 минут</meter></p>
      </section>
      <section>
        <h2 id="walks">Где я гуляю</h2>
        <p>Я люблю гулять в сквере у дома.</p>
        <p>
          <a href="pages/walks.html" target="walk">Маршрут</a> |
          <a href="assets/tony.png" target="walk">Фото с прогулки</a>
        </p>
        <iframe src="pages/walks.html" name="walk" title="Маршрут и фото прогулки Тони" width="320" height="420"></iframe>
        <h3>Видео с прогулки</h3>
        <p>Субтитры помогут, если вы смотрите видео без звука.</p>
        <video width="180" height="320" poster="assets/walk.jpg" controls>
          <source src="assets/walk.mp4" type="video/mp4">
          <track src="assets/ru.vtt" kind="subtitles" srclang="ru" label="Русский" default>
          <p><a href="assets/walk.mp4">Скачать видео</a></p>
        </video>
        <h3>Как я лаю</h3>
        <p>Так я разговариваю с хозяином — у нас целый диалог!</p>
        <audio controls>
          <source src="assets/bark.mp3" type="audio/mpeg">
          <p><a href="assets/bark.mp3">Скачать запись</a></p>
        </audio>
      </section>
      <section>
        <h2 id="song">Песня для прогулок</h2>
        <p>Хозяин включает эту песню, когда мы выходим гулять.</p>
        <iframe width="480" height="270" src="https://www.youtube.com/embed/ojULkWEUsPs?start=17" title="Baha Men — Who Let the Dogs Out" loading="lazy" allow="fullscreen"></iframe>
        <p><a href="https://www.youtube.com/watch?v=ojULkWEUsPs">Baha Men — Who Let the Dogs Out на YouTube</a></p>
      </section>
      <section>
        <h2>Моя любимая книга</h2>
        <p>Хозяин читал мне вслух рассказ <cite>«Каштанка»</cite> Антона Чехова. Он начинается так:</p>
        <figure>
          <blockquote>
            <p>Молодая рыжая собака — помесь таксы с дворняжкой — очень похожая мордой на лисицу, бегала взад и вперёд по тротуару и беспокойно оглядывалась по сторонам.</p>
          </blockquote>
          <figcaption>— Антон Чехов, <cite>«Каштанка»</cite></figcaption>
        </figure>
      </section>
      <p><a href="#top">Наверх</a></p>
    </main>
    <footer>
      <p><small>&copy; 2026 Тони и его хозяин</small></p>
      <address>Написать хозяину Тони: <a href="mailto:tony@example.com">tony@example.com</a></address>
    </footer>
  </body>
</html>

pages/signup.html

HTML

<!doctype html>
<html lang="ru">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="Запишитесь на совместную прогулку с карликовым пинчером Тони.">
    <title>Запись на прогулку с Тони</title>
    <link rel="stylesheet" href="../css/style.css">
  </head>
  <body>
    <header>
      <nav>
        <ul>
          <li><a href="../index.html">Главная</a></li>
          <li><a href="toys.html">Мои игрушки</a></li>
          <li><a href="signup.html">Запись на прогулку</a></li>
        </ul>
      </nav>
    </header>
    <main>
      <h1>Запись на прогулку</h1>
      <p>Гуляйте вместе с Тони! Оставьте заявку, и хозяин Тони напишет вам, чтобы договориться о встрече.</p>
      <p><a href="../index.html#walks">Где мы гуляем</a></p>
      <form>
        <fieldset>
          <legend>О вас</legend>
          <p>
            <label for="owner">Ваше имя</label>
            <input type="text" id="owner" name="owner" autocomplete="name" required>
          </p>
          <p>
            <label for="email">Электронная почта</label>
            <input type="email" id="email" name="email" autocomplete="email" placeholder="anna@example.com" required>
          </p>
        </fieldset>
        <fieldset>
          <legend>Ваша собака</legend>
          <p>
            <label for="breed">Порода</label>
            <input type="text" id="breed" name="breed" list="breeds">
            <datalist id="breeds">
              <option value="Карликовый пинчер"></option>
              <option value="Такса"></option>
              <option value="Йоркширский терьер"></option>
              <option value="Беспородная"></option>
            </datalist>
          </p>
          <p>
            <label for="dogs">Сколько собак придёт</label>
            <input type="number" id="dogs" name="dogs" min="1" max="3" value="1">
          </p>
        </fieldset>
        <fieldset>
          <legend>Когда гулять</legend>
          <p>
            <label for="date">Дата</label>
            <input type="date" id="date" name="date" required>
          </p>
          <label><input type="radio" name="time" value="morning" checked> Утром</label>
          <label><input type="radio" name="time" value="evening"> Вечером</label>
        </fieldset>
        <fieldset>
          <legend>Прогулка</legend>
          <p>
            <label for="leader">Ведёт прогулку</label>
            <input type="text" id="leader" name="leader" value="Тони" readonly>
          </p>
          <p>
            <label for="route">Маршрут</label>
            <select id="route" name="route">
              <optgroup label="В городе">
                <option value="square">Сквер у дома</option>
                <option value="pond" selected>Пруд с утками</option>
              </optgroup>
              <optgroup label="За городом">
                <option value="forest">Лес</option>
                <option value="river" disabled>Берег реки — закрыт до весны</option>
              </optgroup>
            </select>
          </p>
          <p>
            <label for="wishes">Пожелания</label>
            <textarea id="wishes" name="wishes" rows="4" cols="40" maxlength="300" placeholder="Например: моя собака боится велосипедов"></textarea>
          </p>
        </fieldset>
        <fieldset>
          <legend>Что взять с собой</legend>
          <label><input type="checkbox" name="take" value="ball"> Мячик</label>
          <label><input type="checkbox" name="take" value="rope"> Канат</label>
        </fieldset>
        <p>
          <button type="submit">Записаться на прогулку</button>
          <button type="reset">Очистить форму</button>
        </p>
      </form>
    </main>
    <footer>
      <p><small>&copy; 2026 Тони и его хозяин</small></p>
      <address>Написать хозяину Тони: <a href="mailto:tony@example.com">tony@example.com</a></address>
    </footer>
  </body>
</html>

pages/toys.html

HTML

<!doctype html>
<html lang="ru">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="Любимые игрушки Тони и правила игры в канат.">
    <title>Игрушки Тони</title>
    <link rel="stylesheet" href="../css/style.css">
  </head>
  <body>
    <header>
      <nav>
        <ul>
          <li><a href="../index.html">Главная</a></li>
          <li><a href="toys.html">Мои игрушки</a></li>
          <li><a href="signup.html">Запись на прогулку</a></li>
        </ul>
      </nav>
    </header>
    <main>
      <h1>Мои игрушки</h1>
      <ul>
        <li>Канат с мячиком «Удав» — моя любимая игрушка</li>
        <li>Резиновая косточка — для вечеров, когда гулять уже поздно</li>
        <li>Пищащий ёжик — его я прячу <del>под диваном</del> <ins>в своей лежанке</ins></li>
      </ul>
      <img src="../assets/tony.png" alt="Тони сидит и смотрит в камеру" width="300" height="400">
      <h2>Как играть со мной в канат</h2>
      <ol>
        <li>Покажите мне канат.</li>
        <li>Бросьте его подальше.</li>
        <li>Подождите, пока я принесу его обратно.</li>
        <li>Похвалите меня — и всё сначала!</li>
      </ol>
      <section>
        <h2 id="album">Мой фотоальбом</h2>
        <ul class="gallery">
          <li>
            <figure>
              <img src="../assets/album-puppy.png" alt="Тони-щенок сидит и смотрит в камеру" width="300" height="400">
              <figcaption>Я в детстве</figcaption>
            </figure>
          </li>
          <li>
            <figure>
              <img src="../assets/album-squirrel.png" alt="Тони лежит в обнимку с плюшевой белкой" width="300" height="400">
              <figcaption>С плюшевой белкой</figcaption>
            </figure>
            <span class="badge">Любимая</span>
          </li>
          <li>
            <figure>
              <img src="../assets/album-hoodie.png" alt="Тони стоит в бежевой толстовке с капюшоном" width="300" height="400">
              <figcaption>В худи для холодной погоды</figcaption>
            </figure>
          </li>
          <li>
            <figure>
              <img src="../assets/album-harness.png" alt="Тони в оранжевой шлейке ждёт прогулку" width="300" height="400">
              <figcaption>Шлейка надета — идём гулять!</figcaption>
            </figure>
          </li>
          <li>
            <figure>
              <img src="../assets/album-laugh.png" alt="Тони лежит, запрокинув голову, и широко открыл пасть, будто смеётся" width="300" height="400">
              <figcaption>Смеюсь над шуткой хозяина</figcaption>
            </figure>
          </li>
          <li>
            <figure>
              <img src="../assets/album-sleep.png" alt="Тони спит, положив голову на лапы" width="300" height="319">
              <figcaption>После прогулки</figcaption>
            </figure>
          </li>
        </ul>
      </section>
      <p><a href="../index.html#commands">Какие команды я знаю</a></p>
      <p><a href="../index.html">Вернуться на главную</a></p>
    </main>
    <footer>
      <p><small>&copy; 2026 Тони и его хозяин</small></p>
      <address>Написать хозяину Тони: <a href="mailto:tony@example.com">tony@example.com</a></address>
    </footer>
  </body>
</html>

pages/walks.html

HTML

<!doctype html>
<html lang="ru">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="Маршрут прогулки Тони: сквер, пруд и поляна для игры с канатом.">
    <title>Где гуляет Тони</title>
    <link rel="stylesheet" href="../css/style.css">
  </head>
  <body>
    <h1>Мой маршрут</h1>
    <ol>
      <li>Сквер у дома.</li>
      <li>Пруд с утками.</li>
      <li>Поляна для игры с канатом.</li>
    </ol>
  </body>
</html>

Продолжите в VS Code

Внесите те же правила в css/style.css своего сайта my-site и откройте главную и страницу «Мои игрушки». Проверка: на вкладке Elements у ссылки на Википедию в разделе Styles видно правило a[target="_blank"]::after. Если результат отличается, нажмите в редакторе «Показать решение» и сравните его со своим кодом.

Дополнительные задачи

1. Составьте селектор, который выберет все изображения с глобальным атрибутом title, и добавьте им зелёную полосу снизу. HTML не меняйте: четвёртое фото специально оставлено без title.

Ожидаемый результат: под первыми тремя фото — зелёная полоса толщиной 10 пикселей; четвёртое фото, где Тони улыбается, остаётся без полосы. Проверьте, что правило выбирает изображения по наличию атрибута.

Выполните дополнительную задачу 1

index.html

HTML

<!doctype html>
<html lang="ru">
  <head>
    <meta charset="utf-8">
    <title>Дополнительное задание</title>
    <style>
      body { font-family: system-ui, sans-serif; background-color: linen; color: #2b211b; }
      img { width: 200px; height: auto; }
    </style>
  </head>
  <body>
    <img src="assets/album-puppy.png" alt="Тони-щенок" title="Я в детстве">
    <img src="assets/album-squirrel.png" alt="Тони с белкой" title="С плюшевой белкой">
    <img src="assets/album-sleep.png" alt="Тони спит" title="После прогулки">
    <img src="assets/album-laugh.png" alt="Тони улыбается">
  </body>
</html>

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

Ожидаемый результат: первые два фото в красной рамке, фото спящего Тони — без рамки.

Выполните дополнительную задачу 2

index.html

HTML

<!doctype html>
<html lang="ru">
  <head>
    <meta charset="utf-8">
    <title>Дополнительное задание</title>
    <style>
      body { font-family: system-ui, sans-serif; background-color: linen; color: #2b211b; }
      img { width: 200px; height: auto; }
    </style>
  </head>
  <body>
    <img src="assets/album-puppy.png" alt="Тони-щенок" title="Я в детстве">
    <img src="assets/album-squirrel.png" alt="Тони с белкой" title="С плюшевой белкой">
    <img src="assets/album-sleep.png" alt="Тони спит" title="После прогулки">
  </body>
</html>

Задания на селекторы дочерних элементов из прежней версии урока перенесены в следующий урок вместе с самой темой.

Селекторы. Часть 3: атрибуты и логические псевдоклассы

Селекторы атрибутов

Наличие атрибута: попробуйте сами

Атрибут с указанным значением

Значение атрибута: попробуйте сами

Начало, конец и часть значения

Операторы атрибутов: попробуйте сами

Псевдокласс отрицания :not()

:not(): попробуйте сами

Псевдоклассы :is() и :where()

:is() и :where(): попробуйте сами

Псевдокласс :has()

:has(): попробуйте сами

Вес логических псевдоклассов

Потренируйтесь

Наличие атрибута

Начало значения

Конец значения

Точное значение

Все поля, кроме флажка

Карточка со значком

Фото без подписи

Проверьте себя

Задание

Выполните задание

Продолжите в VS Code

Дополнительные задачи

Выполните дополнительную задачу 1

Выполните дополнительную задачу 2