Ùs de la pseudo-class: target en selectors

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

When a URL points at a specific piece of a document, it can be difficult to ascertain. Find out how you can use some simple CSS to draw attention to the target of a URL and improve the user's experience.

Com una ajuda per identificar el destí d'un enllaç que apunta a una part específica d'un document, CSS3 Selectors introdueix la pseudo-class :target.

Triar un destí

La pseudo-class :target s'utilitza per aplicar estil a l'element de destinació d'un URI que conté un identificador de fragment. Per exemple, el URI http://developer.mozilla.org/en/docs/Using_the_:target_selector#Example conté el identificador de fragment #Example. En HTML, els identificadors corresponent els valors dels atributs id o name, comparteixen el mateix espai de noms. Per tant, l'exemple URI assenyalaria l'encapçalament "Example" en aquest document.

Suposem que desitjeu donar estil a qualsevol element h2 que és el destí d'un URI, però no voleu que qualsevol altre tipus d'element aconsegueixi un estil de destinació. Això és bastant simple:

h2:target {font-weight: bold;}

També és possible crear estils que siguin específics d'un fragment en particular del document. Això es realitza utilitzant el mateix valor de la identificació que es troba en l'URI. Per tant, per afegir una vora al fragment #Example, escriuríem:

#Example:target {border: 1px solid black;}

Dirigit a tots els elements

Si la intenció és crear un estil "manta" que s'apliqui a tots els elements específics, llavors el selector universal, ve molt bé:

:target {color: red;}

Exemple

En el següent exemple, hi ha cinc enllaços que apunten a elements en el mateix document. En seleccionar l'enllaç "First", per exemple, farà que <h1 id = "one"> es converteixi en l'element de destinació. Recordeu que el document pot saltar a una nova posició de desplaçament, ja que els elements de destinació es col·loquen a la part superior de la finestra del navegador si és possible.

<h4 id="one">...</h4> <p id="two">...</p>
<div id="three">...</div> <a id="four">...</a> <em id="five">...</em>

<a href="#one">First</a>
<a href="#two">Second</a>
<a href="#three">Third</a>
<a href="#four">Fourth</a>
<a href="#five">Fifth</a>

Conclusió

En els casos en què un identificador de fragment apunti a una part del document, els lectors poden arribar a confondre's sobre quina part del document se suposa que han d'estar llegint. El donar estil a la destinació d'un URI, podem reduïr o eliminar la confusió del lector.

Informació del document original

  • Autor(s): Eric Meyer, Standards Evangelist, Netscape Communications
  • Original Copyright Information: Copyright © 2001-2003 Netscape. Tots els drets reservats.
  • Nota: Aquest article reproduït és part de l'original del lloc DevEdge.

Document Tags and Contributors

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