You’re reading the English version of this content since no translation exists yet for this locale. Help us translate this article!
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.
: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. |
Navegadors compatibles
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 |