:target

La  pseudo-class :target representa el elemento único, si existe alguno, con un id coincidente con el identificador de fragmentos de la URI del documento.

URIs con un identificador de fragmento enlazan con cierto elemento dentro del documento, al que se llama elemento objetivo. Por ejemplo, aquí se muestra una URI apuntando a un enlace interno llamado section2:
http://example.com/folder/document.html#section2
El enlace interno(anchor)  cpuede ser cualquier elemento con un atributo id, es decir,  <h1 id="section2"> es nuestro ejemplo. El  elemento objetivo  h1 puede ser representao por la pseudo clase :target pseudo-class.

Nota: El atributo id fue una novedad en HTML 4 (Diciembre 1997).  En versiones previas de HTML <a> es el elemento objetivo. La pseudo-clase :target se aplica también a esos objetivos.

Ejemplos

:target { outline: solid red }  /* dibuja una línea continua roja alrededor del elemento objetivo*/
/* código de ejempl para userContent.css o cualquiera página web;
   una flecha roja/amarilla indica el emento objetivo*/  

:target {
 -webkit-box-shadow: 0.2em 0.2em 0.3em #888;
    -moz-box-shadow: 0.2em 0.2em 0.3em #888;
         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%;
}

Trabajando con elementos display: none …

La pseudo-clase :target también funciona bien con los elementos no mostrados.

<!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">Añade un comentario</a></p>
 <div id="newcomment">
  <form>
  <p>Escribe tu comentario:<br />
  <textarea></textarea></p>
  </form>
 </div>
</body>
</html>

Creando una "lightbox" CSS pura

La pseudo clase :target pseudo-class es útil para encender / apagar algunos elementos invisibles. De esta manera se pueden crear lightbox "CSS" puras (live demo).

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>MDN Ejemplo &ndash; 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>Lightbox CSS Pura</h1>

<p>Algún texto de ejemplo &hellip;</p>

<p>[ <a href="#example1">Abrir ejemplo #1</a> | <a href="#example2">Abrir ejemplo #2</a> ]</p>

<p>Otro texto de ejemplo &hellip;</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>

Especificaciones

Especificaciones Estado Comentarios
WHATWG HTML Living Standard
The definition of ':target' in that specification.
Living Standard Define semántica HTML específica.
Selectors Level 4
The definition of ':target' in that specification.
Working Draft Sin cambios
Selectors Level 3
The definition of ':target' in that specification.
Recommendation Definición Inicial

Compatibilidad con los distintos navegadores

Característica Chrome Firefox (Gecko) Internet Explorer Opera Safari
Soporte Básico 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
Soporte básico 2.1 1.0 (1.7 or earlier) 9.0 9.5 2.0

Ver además

Etiquetas y colaboradores del documento

 Colaboradores en esta página: pekechis
 Última actualización por: pekechis,