blob: 26ef59586d94d62646c85928c37d81949271ca5f (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
|
---
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 <html> 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>
|
