Интерактивные элементы с помощью псевдокласса :target

for-target
Псевдокласс :target выбирает в документе тот элемент, на который указывает фрагмент #url. В статье Псевдокласс :target я уже писала о применении данного псевдокласса. В частности, он использовался для создания быстрой навигации по странице или css-слайдера. Но возможности :target не ограничиваются этими примерами. С помощью псевдокласса :target можно создавать на странице интерактивные элементы без участия JavaScript, заменяя обработчик события click.

Примеры использования :target

1. Спойлер

Простой пример использования псевдокласса :target — скрытие и показ содержимого при клике пользователя. Элемент скрывается с помощью :not(:target) {display: none;} (то есть пока не подпадает под :target) и показывается при помощи :target {display:block;}. Нажмите на крестик ниже, чтобы раскрыть спойлер.

font-style+

Стиль начертания шрифтаnormal|italic|oblique|initial|inherit

Скрыть описание

2. Модальное окно

Можно создать модальное окно, раскрывающееся на всю страницу или на её часть. При нажатии на кнопку в верхнем правом углу раскрывается форма подписки. Предложенный вариант будет удобен для страницы акции.

modal-target

Для таймера обратного отсчёта я использовала плагин jQuery Countdown, который вы можете скачать со страницы разработчика.
Код jQuery

3. Главная страница сайта-визитки

Ещё одно элегантное решение, которое можно использовать для сайта-визитки, сайта-портфолио (страницу «Обо мне» переименовать в «Портфолио» и добавить слайдер). Внутренний блок при клике на текст/иконку в верхнем левом углу вращается вдоль горизонтальной оси, показывая/скрывая обратную сторону блока.

calling-card

  • Создание Сайтов

    Совершенно новые для меня познания. Благодарю!

    • Еще есть одна фишка — псевдокласс :checked для элемента input. Тоже ожидайте урок.

      • Создание Сайтов

        Будем ждать.

      • Создание Сайтов

        Не пошел на вордпресс. С плагинами не контачит или с другими таблицами пересекается.

  • Павел Реутов

    Приветствую Елена! Скажите, а есть ли способ побороть скролл при нажатии на ссылку с target?

    • Здравствуйте! Если речь идёт о том, чтобы при перемещении по странице целевой объект не «улетал» наверх (например, при переходе по содержанию-навигации по странице), то можно использовать такой код css (вместо * можно указать конкретный элемент):
      *:target:before {
      content: «»;
      display: block;
      height: 2em;
      margin-top: -2em;
      }