:: ilk harf - CSS Hileleri

Anonim

::first-letterHTML'nizdeki ilk harfin etrafına bir etiket yapıştırmanıza gerek kalmadan, bir öğedeki ilk harfi biçimlendirmenize olanak tanıyan sözde bir öğedir. DOM'a hiçbir etiket eklenmezken, hedeflenen ilk harf bir etiketin içine alınmış gibidir. Bu ilk mektubu gerçek bir öğe gibi biçimlendirebilirsin:

p::first-letter ( font-weight: bold; color: red; )

The first letter is bold and red

Sonuç, ilk harfin etrafında sahte bir unsurunuz varmış gibi:


The first letter is bold and red.

İlk harf kalın ve kırmızıdır

  • Sözde öğe yalnızca ana öğe bir blok konteyner kutusu ise çalışır (başka bir deyişle, display: inline;öğelerin ilk harfinde çalışmaz .)
  • Eğer a her ikisi de varsa ::first-letterve ::first-linebir öğenin üzerine, ilk harf ilk satırı stillerden devralır, ancak üzerinde stilleri ::first-letterStiller çatışma üzerine yazılır.
  • İle içerik ::beforeüretirseniz, ister orijinal metin düğümünün parçası olsun ister oluşturulan içerikle oluşturulmuş olsun, ilk harf veya noktalama karakteri hedef olacaktır.

Daha fazla bilgi

  • Gömme için kullanırken, p:first-of-typeher ilk harfe stil uygulanmaması için ile birlikte kullanın
  • Örnek Kalem - Oluşturulan İçerikle
  • W3C Wiki
  • W3C CSS3 Seçiciler modülü

Tarayıcı Desteği

Bu tarayıcı destek verileri, daha fazla ayrıntıya sahip olan Caniuse'den alınmıştır. Bir sayı, tarayıcının özelliği o sürümde ve sonrasında desteklediğini gösterir.

Masaüstü Bilgisayar

Krom Firefox IE Kenar Safari
9 3.5 9 12 5.1

Mobil / Tablet

Android Chrome Android Firefox Android iOS Safari
88 85 3 5.0-5.1

Not: Internet Explorer 8 ve aşağı için, :first-letterçift iki nokta işareti yerine tek iki nokta üst üste kullanın.