Блог веб разработки статьи | видеообзоры | исходный код

Блог веб разработки статьи | видеообзоры | исходный код

webfanat вконтакте webfanat youtube

target CSS

target  CSS

Всем привет сегодня мы изучим замечательный псевдо-селектор target, поехали!

Допустим у нас есть две ссылки при клике на одну у нас появляется форма , а на вторую она скрывается, в принципе мы это можем реализовать различными способами ,с помощью js или используя псевдо-селектор active в css.

Но есть и другой способ это с помощью псевдо-селектора target для наглядного примера создадим файл с расширением html или php, в котором будет следующий код:

<!DOCTYPE html>
<html manifest="cache.manifest">
<head>
    <meta charset="utf-8"/>
    <title>Псевдо-селектор target</title>
</head>
<body>
<style>
    #form{
        display:none;

    }
    #form:target{
        display:block;
        
    }
</style>
<a href="#form">Показать форму</a>
<a href="">Скрыть форму</a>
<br/>
<br/><br/>
<form action="#"  id="form" method="post">
    <input name="text" value="10"/>
    <input name="submit" value="Отправить"/>
</form>
</body>
</html>

Если мы посмотрим на структуру ,то видим у нас есть форма с идентификатором form, которой изначально применено свойство display:none; , то есть она скрыта, вверху у нас две ссылки первая форма показать вторая скрыть, кликая на ссылку показать форму у нас в адресной строке добавляется, так называемый якорь #form, и форма появляется.

Так вот, когда у нас в адресной строке появляется #form, мы автоматически ссылаемся на элемент с идентификатором form, и при этом у нас срабатывает псевдо-селектор target,в котором указано свойство display:block ;, то есть элемент из скрытого превращается в блочный, но если мы уберем или немного подкорректируем в адресной строке #form, обновляя страницу, не форма опять скроется.

Ну вот, в принципе и все что вам нужно знать про этот псевдо-селектор это был лишь один пример вы можете менять у элемента какие угодно стили, но важно помнить, что этот селектор работает только с идентификаторами.

Надеюсь статья была полезна и вы не раз еще воспользуетесь этим знанием! Удачи!

Оцените статью:

Статьи

Разработки

Комментарии

В данном разделе пока нет комментариев!

Реклама

Запись экрана

Данное расширение позволяет записывать экран и выводит видео в формате webm