diff options
Diffstat (limited to 'files/ca/web/css/_colon_target/index.html')
| -rw-r--r-- | files/ca/web/css/_colon_target/index.html | 260 |
1 files changed, 260 insertions, 0 deletions
diff --git a/files/ca/web/css/_colon_target/index.html b/files/ca/web/css/_colon_target/index.html new file mode 100644 index 0000000000..07c4b7c27e --- /dev/null +++ b/files/ca/web/css/_colon_target/index.html @@ -0,0 +1,260 @@ +--- +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"><section id="section2">Example</section></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"><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> +</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"><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></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> |