Всем привет сегодня мы изучим замечательный псевдо-селектор 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, обновляя страницу, не форма опять скроется.
Ну вот, в принципе и все что вам нужно знать про этот псевдо-селектор это был лишь один пример вы можете менять у элемента какие угодно стили, но важно помнить, что этот селектор работает только с идентификаторами.
Надеюсь статья была полезна и вы не раз еще воспользуетесь этим знанием! Удачи!
