files/tr/web/css/_colon_last-child/index.html


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

---
title: ':last-child'
slug: 'Web/CSS/:last-child'
tags:
  - CSS S
  - CSS Sozde-sınıflar
  - Yerleşim
translation_of: 'Web/CSS/:last-child'
---
<div>{{CSSRef}}</div>

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

<p><strong><code>:last-child</code></strong> CSS <a href="/en-US/docs/Web/CSS/Pseudo-classes">pseudo-class</a> bir grup çocuğun sonuncusunu temsil eder.</p>

<div class="note">
<p>Kullanım Notu: İlk tanımda belirtildiği üzere seçilen elemanın atası olması gerekiyordu. CSS4'le beraber artık gerekmiyor.</p>
</div>

<h2 id="Yazım_Şekli">Yazım Şekli</h2>

{{csssyntax}}

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

<h3 id="HTML_İçerik">HTML İçerik</h3>

<pre class="brush: html">&lt;ul&gt;
  &lt;li&gt;Bu kısım yeşermedi&lt;/li&gt;
  &lt;li&gt;Bu da yeşermedi.&lt;/li&gt;
  &lt;li&gt;Burası yeşerdi :)&lt;/li&gt;
&lt;/ul&gt;</pre>

<h3 id="CSS_İçerik">CSS İçerik</h3>

<pre class="brush: css">li:last-child {
  background-color: green;
}</pre>

<p>{{EmbedLiveSample('Example', '100%', 100)}}</p>

<h2 id="Detaylar">Detaylar</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Detay</th>
   <th scope="col">Durum</th>
   <th scope="col">Yorum</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('CSS4 Selectors', '#last-child', ':last-child')}}</td>
   <td>{{Spec2('CSS4 Selectors')}}</td>
   <td>Eşleşen elemanların atası olması zorunlu değil.</td>
  </tr>
  <tr>
   <td>{{SpecName('CSS3 Selectors', '#last-child', ':last-child')}}</td>
   <td>{{Spec2('CSS3 Selectors')}}</td>
   <td>İlk tanımlama.</td>
  </tr>
 </tbody>
</table>

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

<p>{{CompatibilityTable}}</p>

<div id="compat-desktop">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Özellik</th>
   <th>Chrome</th>
   <th>Edge</th>
   <th>Firefox (Gecko)</th>
   <th>Internet Explorer</th>
   <th>Opera</th>
   <th>Safari</th>
  </tr>
  <tr>
   <td>Temel Seviyede Destek</td>
   <td>1.0</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatGeckoDesktop("1")}}</td>
   <td>9.0</td>
   <td>{{CompatOpera(9.5)}}</td>
   <td>3.2</td>
  </tr>
  <tr>
   <td>Ata zorunlu değil</td>
   <td>{{CompatChrome(57)}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatOpera(44)}}</td>
   <td>{{CompatUnknown}}</td>
  </tr>
 </tbody>
</table>
</div>

<div id="compat-mobile">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Özellik</th>
   <th>Android Webview</th>
   <th>Chrome for Android</th>
   <th>Edge</th>
   <th>Firefox Mobile (Gecko)</th>
   <th>IE Mobile</th>
   <th>Opera Mobile</th>
   <th>Safari Mobile</th>
  </tr>
  <tr>
   <td>Temel Seviyede Destek</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatGeckoMobile("1")}}</td>
   <td>9.0</td>
   <td>{{CompatOperaMobile(10)}}</td>
   <td>3.2</td>
  </tr>
  <tr>
   <td>Ata zorunlu değil</td>
   <td>{{CompatChrome(57)}}</td>
   <td>{{CompatChrome(57)}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatOperaMobile(44)}}</td>
   <td>{{CompatUnknown}}</td>
  </tr>
 </tbody>
</table>
</div>

<h2 id="Ayrıca_Bakınız">Ayrıca Bakınız</h2>

<ul>
 <li>{{cssxref(":last-of-type")}}</li>
 <li>{{cssxref(":first-child")}}</li>
 <li>{{cssxref(":nth-child")}}</li>
</ul>