Псевдокласс :target в CSS
Псевдокласс :target используется для выделения раздела страницы, на который ведёт ссылка из оглавления. Он стилизует элемент, являющийся целью внутренней ссылки в документе.
Псевдокласс :target представляет целевой элемент, чей id совпадает с фрагментом URL.
Лайтбокс на чистом CSS
Псевдокласс :target используется для создания лайтбокса без использования JavaScript. Этот метод использует возможность якорных ссылок указывать на элементы, которые по умолчанию скрыты на странице. При переходе по ссылке CSS изменяет их отображение, чтобы они стали видимыми.
Версия
Синтаксис
Синтаксис CSS :target
css
:target {
css declarations;
}Пример использования селектора :target:
Пример кода CSS :target
html
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
:target {
border: 2px solid #1c87c9;
background-color: #eeeeee;
}
</style>
</head>
<body>
<h2>:target selector example</h2>
<p>
<a href="#example1">Jump to Paragraph 1</a>
</p>
<p>
<a href="#example2">Jump to Paragraph 2</a>
</p>
<p id="example1">
<strong>Paragraph 1</strong>
</p>
<p id="example2">
<strong>Paragraph 2</strong>
</p>
</body>
</html>Пример использования псевдокласса :target для создания вкладочного меню:
Пример использования псевдокласса CSS :target
html
<!DOCTYPE html>
<html>
<head>
<style>
.tab-menu div {
display: none;
background-color: #f5f5f5;
padding: 0 20px 20px;
}
.tab-menu a {
text-decoration: none;
padding: 10px;
margin: 20px 0;
display: inline-block;
}
.tab-menu div:target {
display: block;
}
</style>
</head>
<body>
<h1>:target selector example</h1>
<div class="tab-menu">
<a href="#html">HTML</a>
<a href="#css">CSS</a>
<a href="#php">PHP</a>
<div id="html">
<h2>
<a href="https://www.w3docs.com/learn-html.html">Lean HTML</a>
</h2>
<p>HTML-Hyper Text Markup Language
</p>
</div>
<div id="css">
<h2>
<a href="https://www.w3docs.com/learn-css.html">Learn CSS</a>
</h2>
<p>CSS-Cascading Style Sheets
</p>
</div>
<div id="php">
<h2>
<a href="https://www.w3docs.com/learn-php.html">Learn PHP</a>
</h2>
<p>PHP-Hyertext Preprocessor
</p>
</div>
</div>
</body>
</html>Пример использования псевдокласса :target для создания модального окна:
Пример модального окна
html
<!DOCTYPE html>
<html>
<head>
<style>
h1+a {
text-decoration: none;
padding: 10px 20px;
background-color: #8ebf42;
color: #ffffff;
font-family: sans-serif;
}
/* Add animation (Chrome, Safari, Opera) */
@-webkit-keyframes example {
from {
top: -100px;
opacity: 0;
}
to {
top: 0px;
opacity: 1;
}
}
/* Add animation (Standard syntax) */
@keyframes example {
from {
top: -100px;
opacity: 0;
}
to {
top: 0px;
opacity: 1;
}
}
/* The modal's background */
.modal {
display: none;
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgb(0, 0, 0);
background-color: rgba(0, 0, 0, 0.4);
}
/* Display the modal when targeted */
.modal:target {
display: table;
position: absolute;
}
/* The modal box */
.modal-dialog {
display: table-cell;
vertical-align: middle;
}
/* The modal's content */
.modal-dialog .modal-content {
margin: auto;
background-color: #f3f3f3;
position: relative;
padding: 0;
outline: 0;
border: 1px #777 solid;
text-align: justify;
width: 80%;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
/* Add animation */
-webkit-animation-name: example;
/* Chrome, Safari, Opera */
-webkit-animation-duration: 0.5s;
/* Chrome, Safari, Opera */
animation-name: example;
animation-duration: 0.5s;
}
/* The button used to close the modal */
.closebtn {
text-decoration: none;
float: right;
font-size: 35px;
font-weight: bold;
color: #fff;
}
.closebtn:hover,
.closebtn:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
.container {
padding: 2px 16px;
text-align: center;
line-height: 1.6;
}
header {
background-color: #337ab7;
font-size: 25px;
color: white;
}
header h2 {
text-align: left;
}
footer {
background-color: #337ab7;
font-size: 20px;
color: white;
}
footer p {
text-align: right;
}
</style>
</head>
<body>
<h1>:target selector example</h1>
<a href="#modal">Open Modal</a>
<div id="modal" class="modal">
<div class="modal-dialog">
<div class="modal-content">
<header class="container">
<a href="#" class="closebtn">×</a>
<h2>Header</h2>
</header>
<div class="container">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
</div>
<footer class="container">
<p>Footer</p>
</footer>
</div>
</div>
</div>
</body>
</html>Между модальными окнами и лайтбоксами есть небольшое различие. Лайтбоксы можно закрыть, щёлкнув за пределами всплывающего окна, тогда как модальные окна закрываются только при взаимодействии внутри самого окна.
Пример использования псевдокласса :target для создания лайтбокса:
Пример лайтбокса
html
<!DOCTYPE html>
<html>
<head>
<style>
h1+a {
background-color: #8ebf42;
padding: 20px 40px;
color: #ffffff;
text-decoration: none;
font-size: 20px;
margin: 15px 0;
display: inline-block;
}
/* Unopened lightbox */
.lightbox {
display: none;
}
/* Opened lightbox */
.lightbox:target {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
/* Lightbox content */
.lightbox figcaption {
width: 25rem;
position: relative;
padding: 1.5em;
background-color: #8ebf42;
}
/* Close button */
.lightbox .close {
position: relative;
display: block;
}
.lightbox .close::after {
right: -1rem;
top: -1rem;
width: 2rem;
height: 2rem;
position: absolute;
display: flex;
z-index: 1;
align-items: center;
justify-content: center;
background-color: black;
border-radius: 50%;
color: white;
content: "×";
cursor: pointer;
}
/* Lightbox overlay */
.lightbox .close::before {
left: 0;
top: 0;
width: 100%;
height: 100%;
position: fixed;
background-color: rgba(0, 0, 0, .7);
content: "";
cursor: default;
}
</style>
</head>
<body>
<h1>:target selector example</h1>
<a href="#lightbox">Open Lightbox</a>
<div class="lightbox" id="lightbox">
<figure>
<a href="#" class="close"></a>
<figcaption>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec felis enim, placerat id eleifend eu, semper vel sem.
</figcaption>
</figure>
</div>
</body>
</html>Практика
Какова цель селектора :target в CSS?