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
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
|
---
title: CSS seçicileri
slug: Learn/CSS/Building_blocks/Selectors
tags:
- Acemi
- Attribute
- Beginner
- CSS
- Class
- Eğitim
- Learn
- Nitelik
- Pseudo
- Selectors
- Sozde
- id
- seçiciler
- sınıf
translation_of: Learn/CSS/Building_blocks/Selectors
---
<div>{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Cascade_and_inheritance", "Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors", "Learn/CSS/Building_blocks")}}</div>
<p>{{Glossary("CSS")}}, seçicileri {{glossary("HTML")}} belgeleri içerisindeki web sayfamızı oluşturan öğeleri hedeflemek için kullanılır. Biçimlendirilecek öğeleri seçerken ince hassasiyete sahip çok çeşitli CSS seçicileri mevcuttur. Bu derste ve alt derslerde, bunların nasıl çalıştırklarını görecek ve farklı türlerini ayrıntılı olacak iceleyeceğiz.</p>
<table class="learn-box standard-table">
<tbody>
<tr>
<th scope="row">Ön koşullar:</th>
<td>Giriş seviyesi bilgisayar kullanımı, <a href="https://developer.mozilla.org/tr/Learn/Getting_started_with_the_web/Installing_basic_software">gerekli yazılımların yüklenmesi</a>, <a href="https://developer.mozilla.org/tr/Learn/Getting_started_with_the_web/Dealing_with_files">dosyalarla çalışma</a> konusunda yeterli seviyede bilgiler ve HTML temelleri (<a href="/tr/docs/Learn/HTML/Introduction_to_HTML">IHTML'ye Giriş</a> bölümünü inceleyin.) ve CSS'in nasıl çalıştığı hakkında bilgi(<a class="new" href="/tr/docs/Learn/CSS/First_steps" rel="nofollow">CSS ilk adım</a>)</td>
</tr>
<tr>
<th scope="row">Amaç:</th>
<td>CSS seçicilerin nasıl çalıştığını ayrıntılı olarak öğrenmek</td>
</tr>
</tbody>
</table>
<h2 id="Seçici_nedir">Seçici nedir?</h2>
<p>Şimdiye kadar bir çoğuyla tanıştın. Bir CSS seçici, bir CSS kuralının ilk kısmıdır. Bu, tarayıcıya kural içindeki CSS bildirimlerinin uygulanabilmesi için hangi HTML öğesinin seçilmesi gerektiğini söyleyen ve diğer terimlerden oluşan bir kalıptır. Seçici tarafından seçilen öğe veya öğeler, seçicinin <em>konusu</em> olarak anılır.</p>
<p><img alt="Some code with the h1 highlighted." src="https://mdn.mozillademos.org/files/16550/selector.png" style="border: 1px solid #cccccc; height: 218px; width: 471px;"></p>
<p>Daha önceki makalelerde, bazı farklı seçicilerle tanıştın ve belgeyi farklı şekillerde hedefleyen seçiciler olduğunu öğrendin — örn. bir <code>h1</code> birinci dereceden başlıkları seçen seçiciyle <code>.special</code> gibi bir sınıf seçici.</p>
<p>CSS'de seçiciler CSS seçicileri standardizasyonunda tanımlanır ve çalışabilmeleri için CSS'in diğer parçaları gibi tarayıcılarda desteğe sahip olmaları gerekir. karşılaşacağın seçicilerin çoğu, olgun bir özellik olan <a href="https://www.w3.org/TR/selectors-3/">Seviye 3 Seçiciler standardizasyonunda</a> tanımlanmıştır. Bu nedenle bu seçiciler için mükemmel tarayıcı desteği bulacaksın.</p>
<h2 id="Seçici_listeleri">Seçici listeleri</h2>
<p>Aynı CSS'i kullanan birden fazla öğenin bulunduğu durumlarda, her öğe için ayrı ayrı seçicilerle kural oluşturmaktansa, kuralın tüm öğelere uygulanması için kuralı <em>seçici listelerinde</em> birleştirebiliriz. Örn.i hem <code>h1</code> hemde <code>.special</code> sınıfı için aynı CSS'e kullanacaksam, bunu iki ayrı kural olarak yazabilirim.</p>
<pre class="brush: css notranslate"><code>h1 {
color: blue;
}
.special {
color: blue;
} </code></pre>
<p>Ayrıca seçici etiketlerinin arasına virgül ekleyerek bunları bir seçim listesinde birleştirebilirim.</p>
<pre class="brush: css notranslate"><code>h1, .special {
color: blue;
} </code></pre>
<p>Beyaz boşluk virgülden önce veya sonra geçerlidir. Ayrıca, her biri yeni bir satırdaysa, seçicileri daha okunabilir bulabilirsin.</p>
<pre class="brush: css notranslate"><code>h1,
.special {
color: blue;
} </code></pre>
<p>Aşağıdaki etkileşimli örnekte, aynı bildirimlere sahip iki seçiciyi birleştirmeyi dene. Görsel sunum birleştirilden sonra aynı olmalıdır.</p>
<p>{{EmbedGHLiveSample("css-examples/learn/selectors/selector-list.html", '100%', 1000)}} </p>
<p>Seçicileri bu şekilde grupladığında, herhangi bir seçici geçersizse, kuralın tamamı yok sayılacaktır.</p>
<p>Aşağıdaki örnekte, geçersiz sınıf seçici kuralı yok sayılacak, oysa <code>h1</code> öğesine stil uygulanmaya devam edecektir.</p>
<pre class="brush: css notranslate"><code>h1 {
color: blue;
}
..special {
color: blue;
} </code></pre>
<p>Ancak birleştirildiğinde, geçersiz sınıf bildiriminden dolayı kuralım tümü geçersiz sayılacaktır.</p>
<pre class="brush: css notranslate"><code>h1, ..special {
color: blue;
} </code></pre>
<h2 id="Seçici_türleri">Seçici türleri</h2>
<p>Birkaç farklı seçici grubu vardır ve hangi tür seçiciye itiyacın olduğunu bilmek, çalışman için doğru aracı bulmana yardımcı olacaktır. Bu dersimizin alt derslerinde, farklı seçici gruplarına daha ayrıntılı olarak bakacağız.</p>
<h3 id="Tür_sınıf_ve_kimlik_seçicileri">Tür, sınıf ve kimlik seçicileri</h3>
<p>Bu grup, HTML öğesini hedefleyen seçicileri <code><h1></code>.</p>
<pre class="brush: css notranslate">h1 { }</pre>
<p>Sınıfı hedefleyen seçicileri:</p>
<pre class="brush: css notranslate">.box { }</pre>
<p>ve bir kimliği hedefleyen seçicileri içerir:</p>
<pre class="brush: css notranslate">#unique { }</pre>
<h3 id="nitelik_seçicileri">nitelik seçicileri</h3>
<p>Bu grup, bir öğedeki belirli bir özelliğin varlığına bağlı olarak öğeleri seçmen için sana farklı yollar sunar:</p>
<pre class="brush: css notranslate">a[title] { }</pre>
<p>Veya belirli bir değere sahip bir niteliğin varlığına göre bir seçim yapar:</p>
<pre class="brush: css notranslate">a[href="https://example.com"] { }</pre>
<h3 id="Sözde_sınıf_ve_sözde_öğeler">Sözde sınıf ve sözde öğeler</h3>
<p>Bu grub, bir öğenin belirli durumlarını biçimlendiren sözde sınıfları içeri. Örn., <code>:hover</code> sözde sınıfı fare işaretçisiyle üzerine gelinmiş bir bağlantıyı seçer.</p>
<pre class="brush: css notranslate">a:hover { }</pre>
<p>Ayrıca, öğenin kendisi yerine bir öğenin belili bir bölümünü seçen sözde öğeleri de içerir. Örn., <code>::first-line</code> her zaman bir öğenin (<code><p></code> aşağıdaki durumda) içindeki ilk metin satırını seçer, sanki <code><span></code> öğesiyle etrafına sarılmış ve sonra seçilmiş gibi davranır.</p>
<pre class="brush: css notranslate">p::first-line { }</pre>
<h3 id="Birleştiriciler">Birleştiriciler</h3>
<p>Son seçici gurubu, belgelerimizdeki öğeleri hedeflemek için diğer seçicileri birleştirir. Örn., aşağıda<code><article></code> öğesini alt birleştirici (<code>></code>) kullanarak öğenin doğrudan çocukları olan paragrafları seçer:</p>
<pre class="brush: css notranslate">article > p { }</pre>
<h2 id="Sıradaki">Sıradaki</h2>
<p>Bundan sonra MDN'deki çeşitli seçici türlerine doğrudan bağlantılar için aşağıdaki referans tablosuna bakabilir veya Eğitim bölümümüzdeki <a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">tür, sınıf ve kimlik seçicileri</a> sayfasına geçerek yolculuğuna başlayabilirsin.</p>
<p>{{PreviousMenuNext("Learn/CSS/Building_blocks/Cascade_and_inheritance", "Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors", "Learn/CSS/Building_blocks")}}</p>
<h2 id="Seçiciler_referans_tablosu">Seçiciler referans tablosu</h2>
<p>Aşağıdaki tablo, her bir seçici türünü nasıl kullanacağını gösteren kılavuz sayflarına bağlantılar ve kullanabileceğin seçicilere genel bir bakış sunar. Ayrıca, tarayıcı destek bilgilerini kontrol edebileceğin her seçici için MDN sayfasına bi bağlantı ekledim. Bunu, çalışmanda veya CSS ile denemeler yaparken bakabileceğin bir referans olarak kullanabilirsin.</p>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Seçici</th>
<th scope="col">Örnek</th>
<th scope="col">CSS Eğitim sayfası</th>
</tr>
</thead>
<tbody>
<tr>
<td><a href="/en-US/docs/Web/CSS/Type_selectors">Tür seçici</a></td>
<td><code>h1 { }</code></td>
<td><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors#Type_selectors">Tür seçiciler</a></td>
</tr>
<tr>
<td><a href="/en-US/docs/Web/CSS/Universal_selectors">Evrensel seçici</a></td>
<td><code>* { }</code></td>
<td><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors#The_universal_selector">Evrensel seçici</a></td>
</tr>
<tr>
<td><a href="/en-US/docs/Web/CSS/Class_selectors">Sınıf Seçici</a></td>
<td><code>.box { }</code></td>
<td><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors#Class_selectors">Sınıf Seçici</a></td>
</tr>
<tr>
<td><a href="/en-US/docs/Web/CSS/ID_selectors">Kimlik seçici</a></td>
<td><code>#unique { }</code></td>
<td><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors#ID_Selectors">Kimlik seçiciler</a></td>
</tr>
<tr>
<td><a href="/en-US/docs/Web/CSS/Attribute_selectors">Nitelik seçici</a></td>
<td><code>a[title] { }</code></td>
<td><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">Nitelik seçiciler</a></td>
</tr>
<tr>
<td><a href="/en-US/docs/Web/CSS/Pseudo-classes">Sözde sınıf seçiciler</a></td>
<td><code>p:first-child { }</code></td>
<td><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Pseuso-classes_and_Pseudo-elements#What_is_a_pseudo-class">Sözde sınıflar</a></td>
</tr>
<tr>
<td><a href="/en-US/docs/Web/CSS/Pseudo-elements">Sözde öğe seçiciler</a></td>
<td><code>p::first-line { }</code></td>
<td><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Pseuso-classes_and_Pseudo-elements#What_is_a_pseudo-element">Sözde sınıflar</a></td>
</tr>
<tr>
<td><a href="/en-US/docs/Web/CSS/Descendant_combinator">Torun birleştiricil</a></td>
<td><code>article p</code></td>
<td><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Combinators#Descendant_Selector">Torun birleştirici</a></td>
</tr>
<tr>
<td><a href="/en-US/docs/Web/CSS/Child_combinator">Çocuk birleştirici</a></td>
<td><code>article > p</code></td>
<td><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Combinators#Child_combinator">Çocuk birleştirici</a></td>
</tr>
<tr>
<td><a href="/en-US/docs/Web/CSS/Adjacent_sibling_combinator">Bitişik kardeş birleştirici</a></td>
<td><code>h1 + p</code></td>
<td><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Combinators#Adjacent_sibling">Bitişik kardeş</a></td>
</tr>
<tr>
<td><a href="/en-US/docs/Web/CSS/General_sibling_combinator">Genel Kardeş birleştirici</a></td>
<td><code>h1 ~ p</code></td>
<td><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Combinators#General_sibling">Genel kardeş</a></td>
</tr>
</tbody>
</table>
<h2 id="Bu_kısımda">Bu kısımda</h2>
<ol>
<li><a href="/tr/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">Kaynak sırası ve miras</a></li>
<li><a href="/tr/docs/Learn/CSS/Building_blocks/Selectors">CSS seçicileri</a>
<ul>
<li><a href="/tr/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">Tür, sınıf ve kimlik seçicileri</a></li>
<li><a href="/tr/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">Nitelik seçiciler</a></li>
<li><a href="/tr/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">Sözde sınıflar ve sözde öğeler</a></li>
<li><a href="/tr/docs/Learn/CSS/Building_blocks/Selectors/Combinators">Birleştiriciler</a></li>
</ul>
</li>
<li><a href="/tr/docs/Learn/CSS/Building_blocks/The_box_model">Kutu modeli</a></li>
<li><a href="/tr/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">Arka planlar ve kenarlıklar</a></li>
<li><a href="/tr/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">Farklı metin yönleri kullanma</a></li>
<li><a href="/tr/docs/Learn/CSS/Building_blocks/Overflowing_content">Taşan içerik</a></li>
<li><a href="/tr/docs/Learn/CSS/Building_blocks/Values_and_units">Değerler ve birimler</a></li>
<li><a href="/tr/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">CSS'de öğelerin boyutları</a></li>
<li><a href="/tr/docs/Learn/CSS/Building_blocks/Images_media_form_elements">Görseller, medya ve form öğeleri</a></li>
<li><a href="/tr/docs/Learn/CSS/Building_blocks/Styling_tables">Tabloları şekillendirme</a></li>
<li><a href="/tr/docs/Learn/CSS/Building_blocks/Debugging_CSS">CSS'de hata ayıklama</a></li>
<li><a href="/tr/docs/Learn/CSS/Building_blocks/Organizing">CSS'ini düzenleme</a></li>
</ol>
|
