---
title: ':root'
slug: 'Web/CSS/:root'
tags:
  - CSS
translation_of: 'Web/CSS/:root'
---
<div>{{CSSRef}}</div>

<p><strong><code>:root</code></strong> <a href="/en-US/docs/Web/CSS">CSS</a> <a href="/en-US/docs/Web/CSS/Pseudo-classes"> sözde-sınıfı</a> dökümanda bulunan kök elemanı yerine geçer (yani onu temel alır). Örneğin HTML'de <code>:root</code> dökümanı oluşturan {{HTMLElement("html")}} öğesini temsil eder ve <code>html</code> seçicisi ile aynıdır, ancak <a href="/en-US/docs/Web/CSS/Specificity">önceliği</a> daha yüksektir.</p>

<pre class="brush: css no-line-numbers">/* Dökümandaki kök elemanı seçer:
   Bu HTML'de &lt;html&gt; oluyor. */
:root {
  background: royalblue;
}</pre>

<h2 id="Sözdizimi">Sözdizimi</h2>

<pre class="syntaxbox">{{csssyntax}}</pre>

<h2 id="Örnek">Örnek</h2>

<p><code>:root</code> global <a href="/en-US/docs/Web/CSS/Using_CSS_variables">CSS değişkenleri</a> tanımlarken kullanışlı olabilir:</p>

<pre class="brush: css">:root {
  --ana-renk: green;
  --paragraf-boslugu: 5px 0;
}
</pre>

<h2 id="Tanımlamalar">Tanımlamalar</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Tanımlama</th>
   <th scope="col">Durum</th>
   <th scope="col">Açıklama</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('CSS4 Selectors', '#root-pseudo', ':root')}}</td>
   <td>{{Spec2('CSS4 Selectors')}}</td>
   <td>Değişiklik yok.</td>
  </tr>
  <tr>
   <td>{{SpecName('CSS3 Selectors', '#root-pseudo', ':root')}}</td>
   <td>{{Spec2('CSS3 Selectors')}}</td>
   <td>Başlangıç ​​tanımı.</td>
  </tr>
 </tbody>
</table>

<h2 id="Tarayıcı_Uyumluluğu">Tarayıcı Uyumluluğu</h2>



<p>{{Compat("css.selectors.root")}}</p>