CSS Pseudo Element

Sahte eleman nedir?

CSS sahte elemanları, elemanın belirli kısımlarının stillerini ayarlamak için kullanılır.

örneğin, şu şekilde kullanılabilir:

  • elemanın baş harfleri, baş satırlarının stillerini ayarlar
  • elemanın içeriğinin öncesinde veya sonrasında içerik eklemek için kullanılır

gramer

sahte elemanın grameri:

selector::sahte-eleman {
  özellik: değer;
}

::first-line sahte elemanı

::first-line sahte elemanlar, metnin baş satırlarına özel stiller eklemek için kullanılır.

aşağıdaki örnek, tüm <p> elemanlarının baş satırlarına stil ekler:

Örnek

p::first-line {
  color: #ff0000;
  font-variant: small-caps;
}

Kişisel olarak deneyin

Dikkat:::first-line sahte elemanlar sadece blok elemanlarına uygulanabilir.

aşağıdaki özellikler için uygulanır ::first-line sahte eleman:

  • yazı özellikleri
  • renk özellikleri
  • arka plan özellikleri
  • word-spacing
  • letter-spacing
  • metin süsleme
  • vertical-align
  • metin dönüştürme
  • satır yüksekliği
  • temiz

Lütfen dikkat edinçift çizgi işareti temsilcisi - ::first-line karşılaştırma :first-line

CSS3'te, çift çizgi işareti, sahte elemanın tek çizgi işareti temsilcisini değiştirdi. Bu, W3C'nin sahte elemanları sahte sınıflardan ayırmak içinsahte sınıfvesahte elemandenemesi.

CSS2 ve CSS1'de, sahte sınıflar ve sahte elemanlar tek çizgi işareti dilimcisi kullanır.

Geri uyumluluk için, CSS2 ve CSS1 sahte elemanları tek çizgi işareti dilimcisinin kabul eder.

::first-letter sahte elemanı

::first-letter sahte elemanlar, metnin baş harflerine özel stiller eklemek için kullanılır.

aşağıdaki örnek, tüm <p> elemanlarının metinlerinin baş harflerinin biçimini ayarlar:

Örnek

p::first-letter {
  color: #ff0000;
  font-size: xx-large;
}

Kişisel olarak deneyin

Dikkat:::first-letter sahte elemanlar sadece blok elemanlarına uygulanır.

aşağıdaki özellikler ::first-letter sahte elemanına uygulanır:

  • yazı özellikleri
  • renk özellikleri
  • arka plan özellikleri
  • dış iç çerçeve özellikleri
  • iç iç çerçeve özellikleri
  • çerçeve özellikleri
  • metin süsleme
  • dikey hizalama (sadece "yüzeysel" "none" olunca)
  • metin dönüştürme
  • satır yüksekliği
  • yüzeysel
  • temiz

Sahte elementler ve CSS sınıfları

Sahte elementler, CSS sınıfları ile birlikte kullanılabilir:

Örnek

p.intro::first-letter {
  color: #ff0000;
  font-size: 200%;
}

Kişisel olarak deneyin

Yukarıdaki örnekte, class="intro" olan paragrafların ilk harfi kırmızı ve büyük yazı ile gösterilecektir.

Çoklu sahte element

Ayrıca birkaç sahte elementi birleştirebilirsiniz.

Aşağıdaki örnekte, paragrafın ilk harfi kırmızı olacaktır, yazı boyutu xx-large olacaktır. İlk satırın geri kalanı mavi olacaktır ve küçük büyük harfler kullanılacaktır. Bu paragrafın geri kalanı varsayılan yazı boyutu ve renginde olacaktır:

Örnek

p::first-letter {
  color: #ff0000;
  font-size: xx-large;
}
p::first-line {
  color: #0000ff;
  font-variant: small-caps;
}

Kişisel olarak deneyin

CSS - ::before sahte elementi

::before Sahte elementler, element içeriği öncesine bazı içerik eklemek için kullanılabilir.

Aşağıdaki örnekte, her <h1> elementinin içeriği öncesine bir resim eklenir:

Örnek

h1::before {
  content: url(smiley.gif);
}

Kişisel olarak deneyin

CSS - ::after sahte elementi

::after Sahte elementler, element içeriği sonrasına bazı içerik eklemek için kullanılabilir.

Aşağıdaki örnekte, her <h1> elementinin içeriği sonrasına bir resim eklenir:

Örnek

h1::after {
  content: url(smiley.gif);
}

Kişisel olarak deneyin

CSS - ::selection sahte elementi

::selection sahte elementler, kullanıcı tarafından seçilen elementlerin bir kısmına uyacak şekilde eşleşebilir.

Aşağıdaki CSS özellikleri, sahte elementlere uygulanabilir: ::selection:

  • color
  • background
  • imleç
  • çizgi

Aşağıdaki örnek, seçilen metni sarı arka plan üzerinde kırmızı olarak gösterir:

Örnek

::selection {
  color: red; 
  background: yellow;
}

Kişisel olarak deneyin

Tüm CSS sahte elementleri

Seçici Örnek Örnek açıklaması
::after p::after Her <p> elemanı sonrasına içerik ekleyin.
::before p::before Her <p> elemanı öncesine içerik ekleyin.
::first-letter p::first-letter Her <p> elemanının ilk harfini seçin.
::first-line p::first-line Her <p> elemanının ilk satırını seçin.
::selection p::selection Kullanıcının seçtiği element bölümlerini seçin.

Tüm CSS sahte sınıfları

Seçici Örnek Örnek açıklaması
:active a:active Aktif olan bağlantıyı seçin.
:checked input:checked Her seçili <input> elementini seçin.
:disabled input:disabled Her devre dışı <input> elementini seçin.
:empty p:empty Hiçbir çocuk içermeyen her <p> elementini seçin.
:enabled input:enabled Her etkin <input> elementini seçin.
:first-child p:first-child Babanın ilk çocuğu olan her <p> elementini seçin.
:first-of-type p:first-of-type Babanın ilk <p> elementi olan her <p> elementini seçin.
:focus input:focus Odakta olan <input> elementini seçin.
:hover a:hover Üzerinde farenin bulunduğu bağlantıyı seçin.
:in-range input:in-range Belirtilen aralık içindeki değerlere sahip <input> elementlerini seçin.
:invalid input:invalid Geçersiz değere sahip tüm <input> elementlerini seçin.
:lang(language) p:lang(it) Lang özelliği "it" ile başlayan her <p> elementini seçin.
:last-child p:last-child Babanın son çocuğu olan her <p> elementini seçin.
:last-of-type p:last-of-type Babanın son <p> elementi olan her <p> elementini seçin.
:link a:link Tüm ziyaret edilmemiş bağlantıları seçin.
:not(selector) :not(p) Her <p> dışı elementi seçin.
:nth-child(n) p:nth-child(2) Babanın ikinci çocuğu olan her <p> elementini seçin.
:nth-last-child(n) p:nth-last-child(2) Son çocuk sayısından başlayarak ikinci çocuk olan her <p> elementini seçin.
:nth-last-of-type(n) p:nth-last-of-type(2) Ebeveyninin ikinci <p> elementi olan her <p> elementini seçin, en son çocuk sayılarak
:nth-of-type(n) p:nth-of-type(2) Ebeveyninin ikinci <p> elementi olan her <p> elementini seçin.
:only-of-type p:only-of-type Ebeveyninin tek <p> elementi olan her <p> elementini seçin.
:only-child p:only-child Ebeveyninin tek çocuk olan <p> elementini seçin.
:optional input:optional readonly özelliğini içermeyen <input> elementlerini seçin.
:out-of-range input:out-of-range Belirtilen aralığın dışındaki değerlere sahip <input> elementlerini seçin.
:read-only input:read-only readonly özelliğini belirtilmiş <input> elementlerini seçin.
:read-write input:read-write readonly özelliğini içermeyen <input> elementlerini seçin.
:required input:required "required" özelliğini belirtilmiş <input> elementlerini seçin.
:root root Ögesinin kök elementini seçin.
:target #news:target Şu anda etkin olan #news elementini seçin (ağ bağlantısının adını içeren URL'yi tıklayın).
:valid input:valid Tüm geçerli değerlere sahip <input> elementlerini seçin.
:visited a:visited Tüm ziyaret edilmiş bağlantıları seçin.