This translation is incomplete. Please help translate this article from English.

La pseudo-class CSS :target representa un element únic (l'element destinació) amb un id que coincideix amb el fragment de l'URL.

/* Selecciona un element amb una ID que coincideixi amb el fragment de l'URL actual */ 
:target {
  border: 2px solid black;
}

Per exemple, la següent URL té un fragment (indicat pel signe #) que apunta a un element anomenat section2:

http://www.example.com/index.html#section2

El següent element es seleccionaria amb un selector :target quan l'URL actual fora igual a l'anterior:

<section id="section2">Example</section>

Sintaxi

:target

Exemples

Una taula de continguts

La pseudo-class :target es pot utilitzar per ressaltar la part d'una pàgina a la qual s'ha enllaçat des d'una taula de continguts.

HTML

<h3>Table of Contents</h3>
<ol>
 <li><a href="#p1">Jump to the first paragraph!</a></li>
 <li><a href="#p2">Jump to the second paragraph!</a></li>
 <li><a href="#nowhere">This link goes nowhere,
   because the target doesn't exist.</a></li>
</ol>

<h3>My Fun Article</h3>
<p id="p1">You can target <i>this paragraph</i> using a
  URL fragment. Click on the link above to try out!</p>
<p id="p2">This is <i>another paragraph</i>, also accessible
  from the links above. Isn't that delightful?</p>

CSS

p:target {
  background-color: gold;
}

/* Add a pseudo-element inside the target element */
p:target::before {
  font: 70% sans-serif;
  content: "►";
  color: limegreen;
  margin-right: .25em;
}

/* Style italic elements within the target element */
p:target i {
  color: red;
}

Resultat

Pur-CSS lightbox

Podeu utilitzar la pseudo-class :target per crear una caixa de llum ( lightbox) sense utilitzar JavaScript. Aquesta tècnica es basa en la capacitat dels enllaços d'ancoratge per apuntar a elements que estan inicialment ocults a la pàgina. Una vegada seleccionats, el CSS canvia el display perquè es mostrin.

Nota: Podeu obtenir una caixa de llum (lightbox) més completa en pur CSS, basat en la pseudo-class :target, disponible en GitHub (demo).

HTML

<ul>
  <li><a href="#example1">Open example #1</a></li>
  <li><a href="#example2">Open example #2</a></li>
</ul>

<div class="lightbox" id="example1">
  <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>

<div class="lightbox" id="example2">
  <figure>
    <a href="#" class="close"></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.</figcaption>
  </figure>
</div>

CSS

/* 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: lightpink;
}

/* 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;
}

Resultat

Especificacions

Especificació Estat Comentari
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.

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

Descripció Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari
Suport bàsic 1.0 (Yes) 1.0 (1.7 or earlier) 9 9.5 1.3
Descripció Android Edge Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Suport bàsic 2.1 (Yes) 1.0 (1.7 or earlier) 9.0 9.5 2.0

Vegeu també

Document Tags and Contributors

Contributors to this page: Legioinvicta
Last updated by: Legioinvicta,