diff options
author | julieng <julien.gattelier@gmail.com> | 2021-09-17 20:58:15 +0200 |
---|---|---|
committer | SphinxKnight <SphinxKnight@users.noreply.github.com> | 2021-10-12 07:57:33 +0200 |
commit | 149319bb8c7b1394a443f0877c3460cd362aa815 (patch) | |
tree | d534abb0cbc87d5e224836e9d6b888aa58564aa0 /files/fr/web/css/_colon_target-within/index.html | |
parent | eb9de0363cb273b54d3f5402bbf4e3bc03c60971 (diff) | |
download | translated-content-149319bb8c7b1394a443f0877c3460cd362aa815.tar.gz translated-content-149319bb8c7b1394a443f0877c3460cd362aa815.tar.bz2 translated-content-149319bb8c7b1394a443f0877c3460cd362aa815.zip |
move *.html to *.md
Diffstat (limited to 'files/fr/web/css/_colon_target-within/index.html')
-rw-r--r-- | files/fr/web/css/_colon_target-within/index.html | 77 |
1 files changed, 0 insertions, 77 deletions
diff --git a/files/fr/web/css/_colon_target-within/index.html b/files/fr/web/css/_colon_target-within/index.html deleted file mode 100644 index 6da19d0862..0000000000 --- a/files/fr/web/css/_colon_target-within/index.html +++ /dev/null @@ -1,77 +0,0 @@ ---- -title: ':target-within' -slug: Web/CSS/:target-within -browser-compat: css.selectors.target-within -translation_of: 'Web/CSS/:target-within' ---- -<div>{{CSSRef}}{{SeeCompatTable}}</div> - -<p>La <a href="/fr/docs/Web/CSS/Pseudo-classes">pseudo-classe</a> <a href="/fr/docs/Web/CSS">CSS</a> <strong><code>:target-within</code></strong> représente un élément ciblé ou qui <em>contient</em> un élément ciblé. Un élément ciblé est un élément unique disposant d'un <code><a href="/fr/docs/Web/HTML/Global_attributes#attr-id">id</a></code> correspondant au fragment de l'URL. En d'autres termes, il représente un élément qui correspond lui-même à la pseudo-classe {{CSSxRef(":target")}} ou qui a un descendant correspondant à <code>:target</code> (cela inclut les descendants des <a href="/fr/docs/Web/Web_Components/Using_shadow_DOM">arbres fantômes</a>).</p> - -<pre class="brush: css no-line-numbers">/* Sélectionne une <div> lorsqu'un de ses descendants est une cible */ -div:target-within { - background: cyan; -} -</pre> - -<h2 id="syntax">Syntaxe</h2> - -<p>{{CSSSyntax}}</p> - -<h2 id="examples">Exemples</h2> - -<h3 id="highlighting_an_article">Mise en avant d'un article</h3> - -<p>La pseudo-classe <code>:target-within</code> peut être utilisée pour mettre en avant un article si quoi que ce soit dans son contenu a été mis en lien. La pseudo-classe <code>:target</code> est aussi utilisée pour montrer l'élément qui a été ciblé.</p> - -<h4 id="html">HTML</h4> - -<pre class="brush: html"><h3>Table des matières</h3> -<ol> - <li><a href="#p1">Aller au premier paragraphe !</a></li> - <li><a href="#p2">Aller au second paragraphe !</a></li> -</ol> - -<article> - <h3>Mon bel article</h3> - <p id="p1">Vous pouvez cibler <i>ce paragraphe</i> en utilisant un fragment d'URL. Cliquez sur le lien ci-dessus pour essayer !</p> - <p id="p2">Ceci est <i>un autre paragraphe</i>, également accessible depuis les liens ci-dessus. N'est-ce pas savoureux ?</p> -</article> -</pre> - -<h4 id="css">CSS</h4> - -<pre class="brush: css">article:target-within { - background-color: gold; -} - -/* Ajout d'un pseudo élément à l'intérieur de l'élément cible */ -p:target::before { - font: 70% sans-serif; - content: "►"; - color: limegreen; - margin-right: .25em; -} - -/* Style des éléments en italique à l'intérieur de l'élément cible */ -p:target i { - color: red; -}</pre> - -<h4 id="result">Résultat</h4> - -<div>{{EmbedLiveSample('examples', 500, 300)}}</div> - -<h2 id="specifications">Spécifications</h2> - -<p>{{Specifications}}</p> - -<h2 id="browser_compatibility">Compatibilité des navigateurs</h2> - -<p>{{Compat}}</p> - -<h2 id="See_also">Voir aussi</h2> - -<ul> - <li>{{CSSxRef(":target")}}</li> -</ul> |