---
title: '::first-letter (:first-letter)'
slug: 'Web/CSS/::first-letter'
translation_of: 'Web/CSS/::first-letter'
---
<div>{{CSSRef}}</div>

<p> <strong><code>::first-letter</code></strong> <a href="/en-US/docs/Web/CSS">CSS</a> <a href="/en-US/docs/Web/CSS/Pseudo-elements">sözde-elementi</a> bir <a href="/en-US/docs/Web/CSS/Visual_formatting_model#Block-level_elements_and_block_boxes">blok seviyeli element</a>in ilk satırındaki ilk harfe stil uygulamak için kullanılır, tabii o harften önce başka bir içerik gelmiyorsa (örneğin resimler ya da satır içi tablolar).</p>

<pre class="brush: css no-line-numbers notranslate">/* Bir &lt;p&gt; elementinin ilk harfini seçiyoruz. */
p::first-letter {
  font-size: 130%;
}</pre>

<p>Bir elementin ilk harfini belirlemek her zaman kolay değildir:</p>

<ul>
 <li>İlk harften hemen önce veya hemen sonra gelen noktalama işaretleri de harfle birlikte kancalanır. Noktalama işaretleri; <em>open</em> (Ps), <em>close</em> (Pe), <em>initial quote</em> (Pi), <em>final quote</em> (Pf), ve <em>other punctuation</em> (Po) sınıflarında tanımlanmış tüm Unicode karakterlerini kapsar.</li>
 <li>Bazı dillerde, tek bir ses çıkaran iki harfli kalıplar vardır ve bunlar her zaman beraber büyük olarak yazılırlar, örneğin Flemenkçedeki <code>IJ</code> gibi. Bu durumlarda, kalıbı oluşturan iki harfin de <code>::first-letter</code> sözde elementi tarafından kancalanması gerekir. (Tarayıcı desteği bu konuda yetersizdir; aşağıdaki <a href="/en-US/docs/Web/CSS/::first-letter#Browser_compatibility">tarayıcı uyumluluk tablosu</a>na göz atın.)</li>
 <li>{{ cssxref("::before") }} sözde-elementi ve {{ cssxref("content") }} niteliğinin birlikte kullanılması hâlinde bir elementin başlangıcına yeni bir metin eklenebilir. Bu durumda, <code>::first-letter</code> oluşturulan bu içeriğin ilk harfini kancalayacaktır.</li>
</ul>

<div class="note">
<p>CSS3 ile birlikte, <a href="/en-US/docs/Web/CSS/Pseudo-classes">sözde-sınıfları</a> <a href="/en-US/docs/Web/CSS/Pseudo-elements">sözde-elementler</a>den ayırmak amacıyla iki noktalı <code>::first-letter</code> gösterimi tanıtıldı. Tarayıcılar, CSS2 ile tanıtılan, <code>:first-letter</code> yazımını da kabul ediyorlar.</p>
</div>

<h2 id="İzin_verilen_nitelikler">İzin verilen nitelikler</h2>

<p><code>::first-letter</code> pseudo-elementi ile birlikte CSS niteliklerinin yalnızca küçük bir bölümü kullanılabilir:</p>

<ul>
 <li>Bütün font nitelikleri : {{ Cssxref("font") }}, {{ Cssxref("font-style") }}, {{cssxref("font-feature-settings")}}, {{cssxref("font-kerning")}}, {{cssxref("font-language-override")}}, {{cssxref("font-stretch")}}, {{cssxref("font-synthesis")}}, {{ Cssxref("font-variant") }}, {{cssxref("font-variant-alternates")}}, {{cssxref("font-variant-caps")}}, {{cssxref("font-variant-east-asian")}}, {{cssxref("font-variant-ligatures")}}, {{cssxref("font-variant-numeric")}}, {{cssxref("font-variant-position")}}, {{ Cssxref("font-weight") }}, {{ Cssxref("font-size") }}, {{cssxref("font-size-adjust")}}, {{ Cssxref("line-height") }} ve {{ Cssxref("font-family") }}</li>
 <li>Bütün arka plan(background) nitelikleri : {{ Cssxref("background") }}, {{ Cssxref("background-color") }}, {{ Cssxref("background-image") }}, {{cssxref("background-clip")}}, {{cssxref("background-origin")}}, {{ Cssxref("background-position") }}, {{ Cssxref("background-repeat") }}, {{ cssxref("background-size") }}, {{ Cssxref("background-attachment") }}, ve {{cssxref("background-blend-mode")}}</li>
 <li>Bütün margin nitelikleri: {{ Cssxref("margin") }}, {{ Cssxref("margin-top") }}, {{ Cssxref("margin-right") }}, {{ Cssxref("margin-bottom") }}, {{ Cssxref("margin-left") }}</li>
 <li>Bütün padding nitelikleri: {{ Cssxref("padding") }}, {{ Cssxref("padding-top") }}, {{ Cssxref("padding-right") }}, {{ Cssxref("padding-bottom") }}, {{ Cssxref("padding-left") }}</li>
 <li>Bütün sınır(border) nitelikleri: kısa yoldan {{ Cssxref("border") }}, {{ Cssxref("border-style") }}, {{ Cssxref("border-color") }}, {{ cssxref("border-width") }}, {{ cssxref("border-radius") }}, {{cssxref("border-image")}}, ve uzun yoldan yazılan nitelikler.</li>
 <li>{{ cssxref("color") }} niteliği</li>
 <li>{{ cssxref("text-decoration") }}, {{cssxref("text-shadow")}}, {{ cssxref("text-transform") }}, {{ cssxref("letter-spacing") }}, {{ cssxref("word-spacing") }} (uygun olduğu vakit), {{ cssxref("line-height") }}, {{cssxref("text-decoration-color")}}, {{cssxref("text-decoration-line")}}, {{cssxref("text-decoration-style")}}, {{cssxref("box-shadow")}}, {{ cssxref("float") }}, {{ cssxref("vertical-align") }} (eğer <code>float</code> niteliğine <code>none</code> değeri atanmışsa) CSS nitelikleri</li>
</ul>

<h2 id="Söz_dizimiSyntax">Söz dizimi(Syntax)</h2>

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

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

<h3 id="Basit_drop-capSatırdan_taşan_büyük_harf">Basit drop-cap(Satırdan taşan büyük harf)</h3>

<p>Bu örneğimizde <code>&lt;h2&gt;</code> elementinden hemen sonra gelen paragrafın ilk harfine basit bir drop-cap efekti uygulamak için <code>::first-letter</code> sözde elementini kullanacağız</p>

<h4 id="HTML">HTML</h4>

<pre class="brush: html notranslate">&lt;h2&gt;My heading&lt;/h2&gt;
&lt;p&gt;Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt
  ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo
  dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est.&lt;/p&gt;
&lt;p&gt;Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat.&lt;/p&gt;</pre>

<h4 id="CSS">CSS</h4>

<pre class="brush: css notranslate">p {
  width: 500px;
  line-height: 1.5;
}

h2 + p::first-letter {
  color: white;
  background-color: black;
  border-radius: 2px;
  box-shadow: 3px 3px 0 red;
  font-size: 250%;
  padding: 6px 3px;
  margin-right: 6px;
  float: left;
}</pre>

<h4 id="Sonuç">Sonuç</h4>

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

<h3 id="Özel_noktalama_işaretleri_ve_Latin_alfabesinde_bulunmayan_karakterler_üzerindeki_etki">Özel noktalama işaretleri ve Latin alfabesinde bulunmayan karakterler üzerindeki etki</h3>

<p>Aşağıdaki örnek, <code>::first-letter</code> sözde elementinin özel noktalama işaretleri ve Latin alfabesinde olmayan karakterler üzerindeki etkisini gösteriyor. </p>

<h4 id="HTML_2">HTML</h4>

<pre class="brush: html notranslate">&lt;p&gt;Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat.&lt;/p&gt;
&lt;p&gt;-The beginning of a special punctuation mark.&lt;/p&gt;
&lt;p&gt;_The beginning of a special punctuation mark.&lt;/p&gt;
&lt;p&gt;"The beginning of a special punctuation mark.&lt;/p&gt;
&lt;p&gt;'The beginning of a special punctuation mark.&lt;/p&gt;
&lt;p&gt;*The beginning of a special punctuation mark.&lt;/p&gt;
&lt;p&gt;#The beginning of a special punctuation mark.&lt;/p&gt;
&lt;p&gt;「特殊的汉字标点符号开头。&lt;/p&gt;
&lt;p&gt;《特殊的汉字标点符号开头。&lt;/p&gt;
&lt;p&gt;“特殊的汉字标点符号开头。&lt;/p&gt;</pre>

<h4 id="CSS_2">CSS</h4>

<pre class="brush: css notranslate">p::first-letter {
  color: red;
  font-size: 150%;
}</pre>

<h4 id="Sonuç_2">Sonuç</h4>

<p>{{ EmbedLiveSample('Effect_on_special_punctuation_and_non-Latin_characters', '100%', 350) }}</p>

<h2 id="Specifications">Specifications</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Specification</th>
   <th scope="col">Status</th>
   <th scope="col">Comment</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{ SpecName('CSS4 Pseudo-Elements', '#first-letter-pseudo', '::first-letter')}}</td>
   <td>{{ Spec2('CSS4 Pseudo-Elements')}}</td>
   <td>Generalizes allowed properties to typesetting, text decoration, inline layout properties, {{ cssxref("opacity") }}, and {{ cssxref("box-shadow") }}.</td>
  </tr>
  <tr>
   <td>{{ SpecName('CSS3 Text Decoration', '#text-shadow-property', 'text-shadow with ::first-letter')}}</td>
   <td>{{ Spec2('CSS3 Text Decoration')}}</td>
   <td>Allows the use of {{cssxref("text-shadow")}} with <code>::first-letter</code>.</td>
  </tr>
  <tr>
   <td>{{ SpecName('CSS3 Selectors', '#first-letter', '::first-letter') }}</td>
   <td>{{ Spec2('CSS3 Selectors') }}</td>
   <td>Introduction of the two-colon syntax. Definition of edge-case behavior, such as in list items or with specific languages (e.g., the Dutch digraph <code>IJ</code>).</td>
  </tr>
  <tr>
   <td>{{ SpecName('CSS2.1', 'selector.html#first-letter', '::first-letter') }}</td>
   <td>{{ Spec2('CSS2.1') }}</td>
   <td>No change.</td>
  </tr>
  <tr>
   <td>{{ SpecName('CSS1', '#the-first-letter-pseudo-element', '::first-letter') }}</td>
   <td>{{ Spec2('CSS1') }}</td>
   <td>Initial definition, using the one-colon syntax.</td>
  </tr>
 </tbody>
</table>

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

<div>


<p>{{Compat("css.selectors.first-letter")}}</p>
</div>

<h2 id="Ayrıca_göz_at">Ayrıca göz at</h2>

<ul>
 <li>{{cssxref("::first-line")}}</li>
</ul>