1 files changed, 60 insertions, 0 deletions
diff --git a/files/fr/web/css/_colon_root/index.md b/files/fr/web/css/_colon_root/index.md
new file mode 100644
index 0000000000..c570e7fd8e
--- /dev/null
+++ b/files/fr/web/css/_colon_root/index.md
@@ -0,0 +1,60 @@
+---
+title: ':root'
+slug: 'Web/CSS/:root'
+tags:
+  - CSS
+  - Pseudo-classe
+  - Reference
+translation_of: 'Web/CSS/:root'
+---
+<div>{{CSSRef}}</div>
+
+<p>La <a href="/fr/docs/Web/CSS/Pseudo-classes">pseudo-classe</a> <strong><code>:root</code></strong> permet de cibler la racine de l'arbre représentant le document. Pour un document HTML, <code>:root</code> ciblera donc l'élément {{HTMLElement("html")}} et aura le même comportement que le sélecteur <code>html</code> mais <a href="/fr/Apprendre/CSS/Introduction_à_CSS/La_cascade_et_l_héritage#Le_poids_des_sélecteurs">sa spécificité</a> sera plus forte.</p>
+
+<pre class="brush: css no-line-numbers">/* Sélectionne l'élément racine du document */
+/* Pour un document HTML, c'est &lt;html&gt; */
+:root {
+  background: yellow;
+}</pre>
+
+<h2 id="Syntaxe">Syntaxe</h2>
+
+{{csssyntax}}
+
+<h2 id="Exemples">Exemples</h2>
+
+<p><code>:root</code> peut être utile lorsqu'on déclare <a href="/fr/docs/Web/CSS/--*">des propriétés CSS personnalisées globales</a> :</p>
+
+<pre class="brush: css">:root {
+  --main-color: hotpink;
+  --pane-padding: 5px 42px;
+}
+</pre>
+
+<h2 id="Spécifications">Spécifications</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Spécification</th>
+   <th scope="col">État</th>
+   <th scope="col">Commentaires</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('CSS4 Selectors', '#root-pseudo', ':root')}}</td>
+   <td>{{Spec2('CSS4 Selectors')}}</td>
+   <td>Aucune modification.</td>
+  </tr>
+  <tr>
+   <td>{{SpecName('CSS3 Selectors', '#root-pseudo', ':root')}}</td>
+   <td>{{Spec2('CSS3 Selectors')}}</td>
+   <td>Définition initiale.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2>
+
+<p>{{Compat("css.selectors.root")}}</p>