CSS Sözde Öğeler (Pseudo-elements)

CSS Sözde Öğeler (Pseudo-elements)

Bir CSS sözde öğesi, bir öğenin belirtilen kısımlarına stil uygulamak için kullanılır.

Örneğin, şu amaçlarla kullanılabilir:

• Bir elemanın ilk harfinin veya satırının stilini belirleyebilirsiniz.
• Bir öğenin içeriğinden önce veya sonra içerik ekleyebilirsiniz.

Sözdizimi

selector::pseudo-element {
  property: value;
}

::first-line Sözde Öğe

::fist-line bir metnin ilk satırına özel stil eklemek için kullanılır.

Aşağıdaki örnek, tüm <p> öğelerindeki metnin ilk satırını biçimlendirir:

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

Not: ::first-line sözde elemanı blok düzeyi elemanlara uygulanabilir.

Aşağıdaki özellikler ::first-line sözde öğe için geçerlidir:

• Yazı tipi özellikleri (Font properties)
• Renk özellikleri (Color properties)
• Arka plan özellikleri (Background properties)
• Kelime aralığı (Word-spacing)
• Harf boşluğu (Letter-spacing)
• Metin süsleme (Text-decoration)
• Dikey hizala (Vertical-align)
• Metin dönüşümü (Text-transform)
• Satır yüksekliği (Line-height)
• Temizle (Clear)

::first-letter Sözde Öğe

:fist-letter bir metnin ilk harfine özel stil eklemek için kullanılır.

Aşağıdaki örnek, tüm <p> öğelerindeki metnin ilk harfini biçimlendirir: 

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

Not: :fist-letter sözde elemanı blok düzeyi elemanlara uygulanabilir.

Aşağıdaki özellikler ::first-letter için geçerlidir: 

• Yazı tipi özellikleri (Font properties)
• Renk özellikleri (Color properties)
• Arka plan özellikleri (Background properties)
• Marj özellikleri (Margin properties)
• Dolgu özellikleri (Padding properties)
• Sınır özellikleri (Sınır properties)
• Metin süsleme (Text-decoration)
• Dikey hizala (Sadece "float" "none") (Vertical-align)
• Metin dönüşümü (Text-transform)
• Satır yüksekliği (Line-height)
• Float 
• Temizle (Clear)

Sözde Öğeler ve CSS Sınıfları

Sözde öğeler CSS sınıflarıyla birleştirilebilir: 

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

Yukarıdaki örnek, class="intro" olan paragrafların ilk harfini kırmızı ve daha büyük bir boyutta gösterecektir.

Çoklu Sözde Öğeler

Birkaç sözde eleman da birleştirilebilir.

Aşağıdaki örnekte, bir paragrafın ilk harfi xx büyüklüğünde bir yazı tipi boyutunda kırmızı olacaktır. İlk satırın geri kalanı mavi ve küçük harflerle olacaktır. Paragrafın geri kalanı varsayılan yazı tipi boyutu ve rengi olacaktır:

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

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

::before Sözde Öğe

::before bir elemanın önüne bazı içerikleri eklemek için kullanılabilir.

Aşağıdaki örnek, her <h1> öğesinin içeriğinden önce bir görüntü ekler:

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

::after Sözde Öğe

::after bir elemanın arkasından bazı içerikler eklemek için kullanılabilir.

Aşağıdaki örnek, her <h1> öğesinin içeriğinden sonra bir görüntü ekler:

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

::marker Sözde Öğe

::marker bu eleman liste öğelerinin işaretlerini seçer.

Aşağıdaki örnek, liste öğelerinin işaretçilerine stil verir:

::marker {
  color: red;
  font-size: 23px;
}

::selection Sözde Öğe

::selection bir kullanıcı tarafından seçilen bir eleman kısmını ile eşleşir.

Şu CSS özellikleri ::selection'a uygulanabilir: color, background, cursor ve outline.

Tüm Sözde Öğeler