path: root/files/ca/web/css/_colon_target/index.html

---
title: ':target'
slug: 'Web/CSS/:target'
tags:
  - CSS
  - Layout
  - Pseudo-class
  - Reference
  - Web
translation_of: 'Web/CSS/:target'
---
<div>{{CSSRef}}</div>

<p>La <a href="/en-US/docs/Web/CSS/Pseudo-classes">pseudo-class</a> <a href="/en-US/docs/Web/CSS">CSS</a> <strong><code>:target</code></strong> <span id="result_box" lang="ca"><span>representa un element únic</span></span> (l'<em>element destinació</em>) amb un {{htmlattrxref("id")}} que coincideix amb el fragment de l'URL.</p>

<pre class="brush: css no-line-numbers">/* <span id="result_box" lang="ca"><span>Selecciona un element amb una ID que coincideixi amb el fragment de l'URL actual</span></span> */
:target {
  border: 2px solid black;
}</pre>

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

<pre>http://www.example.com/index.html#section2</pre>

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

<pre class="brush: html">&lt;section id="section2"&gt;Example&lt;/section&gt;</pre>

<h2 id="Sintaxi">Sintaxi</h2>

<pre class="syntaxbox">{{csssyntax}}</pre>

<h2 id="Exemples">Exemples</h2>

<h3 id="Una_taula_de_continguts"><span id="result_box" lang="ca"><span>Una taula de continguts</span></span></h3>

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

<h4 id="HTML">HTML</h4>

<pre class="brush: html">&lt;h3&gt;Table of Contents&lt;/h3&gt;
&lt;ol&gt;
 &lt;li&gt;&lt;a href="#p1"&gt;Jump to the first paragraph!&lt;/a&gt;&lt;/li&gt;
 &lt;li&gt;&lt;a href="#p2"&gt;Jump to the second paragraph!&lt;/a&gt;&lt;/li&gt;
 &lt;li&gt;&lt;a href="#nowhere"&gt;This link goes nowhere,
   because the target doesn't exist.&lt;/a&gt;&lt;/li&gt;
&lt;/ol&gt;

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

<h4 id="CSS">CSS</h4>

<pre class="brush: 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;
}</pre>

<h4 id="Resultat">Resultat</h4>

<p>{{EmbedLiveSample('A_table_of_contents', 500, 300)}}</p>

<h3 id="Pur-CSS_lightbox">Pur-CSS lightbox</h3>

<p>Podeu utilitzar la pseudo-class <code>:target</code> 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 <code>display</code> perquè es mostrin.</p>

<div class="note"><strong>Nota:</strong> Podeu obtenir una caixa de llum (lightbox) més completa en pur CSS, basat en la pseudo-class <code>:target</code>, <a href="https://github.com/madmurphy/takefive.css/">disponible en GitHub</a> (<a href="https://madmurphy.github.io/takefive.css/">demo</a>).</div>

<h4 id="HTML_2">HTML</h4>

<pre class="brush: html">&lt;ul&gt;
  &lt;li&gt;&lt;a href="#example1"&gt;Open example #1&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#example2"&gt;Open example #2&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="lightbox" id="example1"&gt;
  &lt;figure&gt;
    &lt;a href="#" class="close"&gt;&lt;/a&gt;
    &lt;figcaption&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit.
      Donec felis enim, placerat id eleifend eu, semper vel sem.&lt;/figcaption&gt;
  &lt;/figure&gt;
&lt;/div&gt;

&lt;div class="lightbox" id="example2"&gt;
  &lt;figure&gt;
    &lt;a href="#" class="close"&gt;&lt;/a&gt;
    &lt;figcaption&gt;Cras risus odio, pharetra nec ultricies et,
      mollis ac augue. Nunc et diam quis sapien dignissim auctor.
      Quisque quis neque arcu, nec gravida magna.&lt;/figcaption&gt;
  &lt;/figure&gt;
&lt;/div&gt;</pre>

<h4 id="CSS_2">CSS</h4>

<pre class="brush: 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;
}</pre>

<h4 id="Resultat_2">Resultat</h4>

<p>{{EmbedLiveSample('Pure-CSS_lightbox', 500, 220)}}</p>

<h2 id="Especificacions">Especificacions</h2>

<table class="standard-table">
 <tbody>
  <tr>
   <th scope="col">Especificació</th>
   <th scope="col">Estat</th>
   <th scope="col">Comentari</th>
  </tr>
  <tr>
   <td>{{SpecName("HTML WHATWG", "browsers.html#selector-target", ":target")}}</td>
   <td>{{Spec2("HTML WHATWG")}}</td>
   <td>Defineix la semàntica específica d'HTML.</td>
  </tr>
  <tr>
   <td>{{SpecName("CSS4 Selectors", "#the-target-pseudo", ":target")}}</td>
   <td>{{Spec2("CSS4 Selectors")}}</td>
   <td>Sense canvis.</td>
  </tr>
  <tr>
   <td>{{SpecName("CSS3 Selectors", "#target-pseudo", ":target")}}</td>
   <td>{{Spec2("CSS3 Selectors")}}</td>
   <td>Definició inicial.</td>
  </tr>
 </tbody>
</table>

<h2 id="Navegadors_compatibles">Navegadors compatibles</h2>

<div>{{CompatibilityTable}}</div>

<div id="compat-desktop">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Descripció</th>
   <th>Chrome</th>
   <th>Edge</th>
   <th>Firefox (Gecko)</th>
   <th>Internet Explorer</th>
   <th>Opera</th>
   <th>Safari</th>
  </tr>
  <tr>
   <td>Suport bàsic</td>
   <td>1.0</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatGeckoDesktop("1.7 or earlier")}}</td>
   <td>9</td>
   <td>9.5</td>
   <td>1.3</td>
  </tr>
 </tbody>
</table>
</div>

<div id="compat-mobile">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Descripció</th>
   <th>Android</th>
   <th>Edge</th>
   <th>Firefox Mobile (Gecko)</th>
   <th>IE Mobile</th>
   <th>Opera Mobile</th>
   <th>Safari Mobile</th>
  </tr>
  <tr>
   <td>Suport bàsic</td>
   <td>2.1</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatGeckoMobile("1.7 or earlier")}}</td>
   <td>9.0</td>
   <td>9.5</td>
   <td>2.0</td>
  </tr>
 </tbody>
</table>
</div>

<h2 id="Vegeu_també">Vegeu també</h2>

<ul>
 <li><a href="/en-US/docs/Using_the_:target_selector">Usant la pseudo-classe :target en selectors</a></li>
</ul>