::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 vecontent
(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) vefont-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), vebackground-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ğitext-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ğerfloat
niteliğinenone
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