From 4b1a9203c547c019fc5398082ae19a3f3d4c3efe Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:41:15 -0500 Subject: initial commit --- files/ca/web/css/_colon_target/index.html | 260 ++++++++++++++++++++++++++++++ 1 file changed, 260 insertions(+) create mode 100644 files/ca/web/css/_colon_target/index.html (limited to 'files/ca/web/css/_colon_target/index.html') 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' +--- +
{{CSSRef}}
+ +

La pseudo-class CSS :target representa un element únic (l'element destinació) amb un {{htmlattrxref("id")}} que coincideix amb el fragment de l'URL.

+ +
/* Selecciona un element amb una ID que coincideixi amb el fragment de l'URL actual */
+:target {
+  border: 2px solid black;
+}
+ +

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

+ +
http://www.example.com/index.html#section2
+ +

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

+ +
<section id="section2">Example</section>
+ +

Sintaxi

+ +
{{csssyntax}}
+ +

Exemples

+ +

Una taula de continguts

+ +

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

+ +

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>
+
+ +

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;
+}
+ +

Resultat

+ +

{{EmbedLiveSample('A_table_of_contents', 500, 300)}}

+ +

Pur-CSS lightbox

+ +

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

+ +
Nota: Podeu obtenir una caixa de llum (lightbox) més completa en pur CSS, basat en la pseudo-class :target, disponible en GitHub (demo).
+ +

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>
+ +

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;
+}
+ +

Resultat

+ +

{{EmbedLiveSample('Pure-CSS_lightbox', 500, 220)}}

+ +

Especificacions

+ + + + + + + + + + + + + + + + + + + + + + + + +
EspecificacióEstatComentari
{{SpecName("HTML WHATWG", "browsers.html#selector-target", ":target")}}{{Spec2("HTML WHATWG")}}Defineix la semàntica específica d'HTML.
{{SpecName("CSS4 Selectors", "#the-target-pseudo", ":target")}}{{Spec2("CSS4 Selectors")}}Sense canvis.
{{SpecName("CSS3 Selectors", "#target-pseudo", ":target")}}{{Spec2("CSS3 Selectors")}}Definició inicial.
+ + + +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + +
DescripcióChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Suport bàsic1.0{{CompatVersionUnknown}}{{CompatGeckoDesktop("1.7 or earlier")}}99.51.3
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
DescripcióAndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Suport bàsic2.1{{CompatVersionUnknown}}{{CompatGeckoMobile("1.7 or earlier")}}9.09.52.0
+
+ +

Vegeu també

+ + -- cgit v1.2.3-54-g00ecf