This translation is incomplete. Please help translate this article from English.
La pseudo-classe :target representa l'element únic, si escau, amb un id que coincideixi amb l'identificador de fragment de l'URI del document.
Els URIs amb identificadors de fragments enllacen amb un determinat element dins del document, conegut com l'element de destinació. Per exemple, aquí hi ha un URI que apunta a un ancoratge anomenat section2:
http://example.com/folder/document.html#section2
L'ancoratge pot ser qualsevol element amb un atribut id, per exemple, <h1 id="section2"> en el nostre exemple. El element de destinació h1 pot ser representat per la pseudo-classe :target.
Nota: L'atribut
id era nou en HTML 4 (desembre de 1997). En el vell estil d'HTML <a> és un element de destinació. La pseudo-classe :target també s'aplica a aquests objectius.Sintaxi
:target { style properties }
Exemples
:target { outline: solid red } /* draw a red, solid line around the target element */
/* example code for userContent.css or any web pages;
a red/yellow arrow indicates the target element */
:target {
box-shadow: 0.2em 0.2em 0.3em #888;
}
:target:before {
font: 70% Arial,"Nimbus Sans L",sans-serif !important;
content: "\25ba"; /* ► */
color: red;
background: gold;
border: solid thin;
padding-left: 1px;
display: inline-block;
margin-right: 0.13em;
vertical-align: 20%;
}
Treballar amb elements display: none…
La pseudo-classe :target també funciona bé amb elements no visualitzats:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>:target pseudoclass example</title>
<style>
#newcomment {
display: none;
}
#newcomment:target {
display: block;
}
</style>
</head>
<body>
<p><a href="#newcomment">Add a comment</a></p>
<div id="newcomment">
<form>
<p>Write your comment:<br />
<textarea></textarea></p>
</form>
</div>
</body>
</html>
Crear en css pur un "lightbox"
La pseudo-classe :target es útil para activar/desactivar alguns elements invisibles. D'aquesta manera es pot crear una caixa lluminosa (lightbox) en CSS pur (demostració en viu).
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>MDN Example – CSS Lightbox</title>
<style type="text/css">
div.lightbox {
display: none;
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
div.lightbox:target {
display: table;
}
div.lightbox figure {
display: table-cell;
margin: 0;
padding: 0;
width: 100%;
height: 100%;
vertical-align: middle;
}
div.lightbox figure figcaption {
display: block;
margin: auto;
padding: 8px;
background-color: #ddbbff;
height: 250px;
position: relative;
overflow: auto;
border: 1px #000000 solid;
border-radius: 10px;
text-align: justify;
font-size: 14px;
}
div.lightbox figure .closemsg {
display: block;
margin: auto;
height: 0;
overflow: visible;
text-align: right;
z-index: 2;
cursor: default;
}
div.lightbox figure .closemsg, div.lightbox figure figcaption {
width: 300px;
}
.closemsg::after {
content: "\00D7";
display: inline-block;
position: relative;
right: -20px;
top: -10px;
z-index: 3;
color: #ffffff;
border: 1px #ffffff solid;
border-radius: 10px;
width: 20px;
height: 20px;
line-height: 18px;
text-align: center;
margin: 0;
background-color: #000000;
font-weight: bold;
cursor: pointer;
}
.closemsg::before {
content: "";
display: block;
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: #000000;
opacity: 0.85;
}
</style>
</head>
<body>
<h1>Pure CSS Lightbox</h1>
<p>Some sample text…</p>
<p>[ <a href="#example1">Open example #1</a> | <a href="#example2">Open example #2</a> ]</p>
<p>Another sample text…</p>
<div class="lightbox" id="example1">
<figure>
<a href="#" class="closemsg"></a>
<figcaption>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec felis enim, placerat id eleifend eu, semper vel sem. Sed interdum commodo enim venenatis pulvinar. Proin mattis lorem vitae diam scelerisque hendrerit. Fusce cursus imperdiet mauris, vitae hendrerit velit dignissim a. Suspendisse potenti. Aenean feugiat facilisis diam, in posuere sapien mattis vel. Proin molestie rutrum diam, pharetra feugiat ligula sollicitudin sed. Etiam cursus diam quis tellus aliquam gravida. Aliquam erat volutpat.<br />
Etiam varius adipiscing mi eget imperdiet. Nulla quis vestibulum leo. Integer molestie massa ut massa commodo in blandit purus aliquam. Mauris sit amet posuere massa. Ut a eleifend augue. Proin sodales mauris nec tellus pharetra dictum.</figcaption>
</figure>
</div>
<div class="lightbox" id="example2">
<figure>
<a href="#" class="closemsg"></a>
<figcaption>Cras risus odio, pharetra nec ultricies et, mollis ac augue. Nunc et diam quis sapien dignissim auctor. Quisque quis neque arcu, nec gravida magna. Etiam ullamcorper augue quis orci posuere et tincidunt augue semper. Maecenas varius augue eu orci auctor bibendum tristique ligula egestas. Morbi pharetra tortor iaculis erat porta id aliquam leo cursus. Ut nec elit vel mauris dapibus lacinia eget sed odio.</figcaption>
</figure>
</div>
</body>
</html>
Especificacions
| Especificació | Estat | Comentari |
|---|---|---|
| WHATWG HTML Living Standard The definition of ':target' in that specification. |
Living Standard | Defineix la semàntica específica d'HTML. |
| Selectors Level 4 The definition of ':target' in that specification. |
Working Draft | Sense canvis. |
| Selectors Level 3 The definition of ':target' in that specification. |
Recommendation | Definició inicial. |
Navegadors compatibles
| Característica | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|
| Suport bàsic | 1.0 | 1.0 (1.7 or earlier) | 9 | 9.5 | 1.3 |
| Característica | Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|
| Suport bàsic | 2.1 | 1.0 (1.7 or earlier) | 9.0 | 9.5 | 2.0 |
Veure
Document Tags and Contributors
Tags:
Contributors to this page:
Legioinvicta
Last updated by:
Legioinvicta,