::first-letter (:first-letter)

 ::first-letter CSS sözde-elementi bir blok seviyeli elementin 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).

/* Bir <p> elementinin ilk harfini seçiyoruz. */
p::first-letter {
  font-size: 130%;
}

Bir elementin ilk harfini belirlemek her zaman kolay değildir:

• İlk harften hemen önce veya hemen sonra gelen noktalama işaretleri de harfle birlikte kancalanır. Noktalama işaretleri; open (Ps), close (Pe), initial quote (Pi), final quote (Pf), ve other punctuation (Po) sınıflarında tanımlanmış tüm Unicode karakterlerini kapsar.
• 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 IJ gibi. Bu durumlarda, kalıbı oluşturan iki harfin de ::first-letter sözde elementi tarafından kancalanması gerekir. (Tarayıcı desteği bu konuda yetersizdir; aşağıdaki tarayıcı uyumluluk tablosuna göz atın.)
• ::before sözde-elementi ve content niteliğinin birlikte kullanılması hâlinde bir elementin başlangıcına yeni bir metin eklenebilir. Bu durumda, ::first-letter oluşturulan bu içeriğin ilk harfini kancalayacaktır.

İzin verilen nitelikler

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

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

Söz dizimi(Syntax)

/* CSS3 syntax */
::first-letter

/* CSS2 syntax */
:first-letter

Örnekler

Basit drop-cap(Satırdan taşan büyük harf)

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

HTML

<h2>My heading</h2>
<p>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.</p>
<p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat.</p>

CSS

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;
}

Sonuç

Özel noktalama işaretleri ve Latin alfabesinde bulunmayan karakterler üzerindeki etki

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

HTML

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

CSS

p::first-letter {
  color: red;
  font-size: 150%;
}

Sonuç

Specifications

Tarayıcı Uyumluluğu

Ayrıca göz at

• ::first-line