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, 0 insertions, 260 deletions
diff --git a/files/ca/web/css/_colon_target/index.html b/files/ca/web/css/_colon_target/index.html deleted file mode 100644 index 85407c77ff..0000000000 --- a/files/ca/web/css/_colon_target/index.html +++ /dev/null @@ -1,260 +0,0 @@ ---- -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> - -{{csssyntax}} - -<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> |