::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 (en-US) sözde-elementi ve content (en-US) 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.

CSS3 ile birlikte, sözde-sınıfları sözde-elementlerden ayırmak amacıyla iki noktalı ::first-letter gösterimi tanıtıldı. Tarayıcılar, CSS2 ile tanıtılan, :first-letter yazımını da kabul ediyorlar.

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

Specification	Status	Comment
CSS Pseudo-Elements Level 4 The definition of '::first-letter' in that specification.	Working Draft	Generalizes allowed properties to typesetting, text decoration, inline layout properties, `opacity` (en-US), and `box-shadow` (en-US).
CSS Text Decoration Module Level 3 The definition of 'text-shadow with ::first-letter' in that specification.	Candidate Recommendation	Allows the use of `text-shadow` (en-US) with `::first-letter`.
Selectors Level 3 The definition of '::first-letter' in that specification.	Recommendation	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 `IJ`).
CSS Level 2 (Revision 1) The definition of '::first-letter' in that specification.	Recommendation	No change.
CSS Level 1 The definition of '::first-letter' in that specification.	Recommendation	Initial definition, using the one-colon syntax.

Tarayıcı Uyumluluğu

BCD tables only load in the browser

Ayrıca göz at

::first-line (en-US)