::first-letter (:first-letter)

Bu çeviri eksik. Bu makaleyi İngilizceden tercüme etmemize yardım edin

 ::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.

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:

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, and box-shadow.
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 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

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
::first-letterChrome Full support 1
Full support 1
Full support 1
Alternate Name
Alternate Name Uses the non-standard name: :first-letter
Edge Full support 12
Full support 12
Full support 12
Alternate Name
Alternate Name Uses the non-standard name: :first-letter
Firefox Full support 1
Full support 1
Full support 1
Alternate Name
Alternate Name Uses the non-standard name: :first-letter
IE Full support 9
Full support 9
Full support 5.5
Alternate Name
Alternate Name Uses the non-standard name: :first-letter
Opera Full support 7
Full support 7
Full support 3.5
Alternate Name
Alternate Name Uses the non-standard name: :first-letter
Safari Full support 1
Full support 1
Full support 1
Alternate Name
Alternate Name Uses the non-standard name: :first-letter
WebView Android Full support 37
Full support 37
Full support 37
Alternate Name
Alternate Name Uses the non-standard name: :first-letter
Chrome Android Full support 18
Full support 18
Full support 18
Alternate Name
Alternate Name Uses the non-standard name: :first-letter
Firefox Android Full support 4
Full support 4
Full support 4
Alternate Name
Alternate Name Uses the non-standard name: :first-letter
Opera Android Full support 10.1
Full support 10.1
Full support 10.1
Alternate Name
Alternate Name Uses the non-standard name: :first-letter
Safari iOS Full support 1
Full support 1
Full support 1
Alternate Name
Alternate Name Uses the non-standard name: :first-letter
Samsung Internet Android Full support 1.0
Full support 1.0
Full support 1.0
Alternate Name
Alternate Name Uses the non-standard name: :first-letter
Support for the Dutch digraph IJChrome No support NoEdge No support NoFirefox No support No
Notes
No support No
Notes
Notes See bug 92176.
IE No support NoOpera No support NoSafari No support NoWebView Android No support NoChrome Android No support NoFirefox Android No support No
Notes
No support No
Notes
Notes See bug 92176.
Opera Android No support NoSafari iOS No support NoSamsung Internet Android No support No

Legend

Full support  
Full support
No support  
No support
See implementation notes.
See implementation notes.
Uses a non-standard name.
Uses a non-standard name.

Ayrıca göz at