css-sahte-elemanlar

Sözde Elemanlar Nedir?
Bir CSS sahte elemanı, bir öğenin belirli bölümlerini stillemek için kullanılır.
Örneğin, aşağıdakiler için kullanılabilir:
Bir öğenin ilk harfini veya satırını stil edin
Bir öğenin içeriğinden önce veya sonra içerik yerleştirme
Sözde elemanların sözdizimi:
selector::pseudo-element {
property:value;
}
Çiftli kolon gösterimine dikkat edin - ::first-line aksine :first-line
, CSS3'teki sözde elemanlar için çiftli kolon tek renkli ifadenin yerini almıştır. Bu, sözde sınıflar ve sözde elemanlar arasında ayrım yapmak için W3C'den gelen bir girişimdi .
Tek sütun sözdizimi CSS2 ve CSS1'deki sözde sınıflar ve sahte elemanlar için kullanılmıştır.
Geriye dönük uyumluluk için, CSS2 ve CSS1 sahte elemanları için tek-kolonlu sözdizimi kabul edilebilir.

:: İlk satır Sözde elemanı
::first-lineSözde öğesi 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 sahte elemanlar için geçerlidir :
font properties
color properties
background properties
word-spacing
letter-spacing
text-decoration
vertical-align
text-transform
line-height
clear

:: İlk harfli Sözde Eleman
::first-letterSözde öğesi 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:::first-letter sözde elemanı blok düzeyi elemanlara uygulanabilir.
Aşağıdaki özellikler :: ilk harf sahte elemanı için geçerlidir:
font properties
color properties
background properties
margin properties
padding properties
border properties
text-decoration
vertical-align (yalnızca "float" "none" ise)
text-transform
line-height
float
clear
Sözde öğeler ve CSS Sınıfları
Sahte elemanlar CSS sınıflarıyla birleştirilebilir:
p.intro::first-letter {
color: #ff0000;
font-size:200%;
}

Birden fazla sözde elemanlar
Birkaç sahte elemanlar da birleştirilebilir.
Aşağıdaki örnekte, bir paragrafın ilk harfi, xx-büyük bir yazı tipi boyutunda kırmızı olacaktır. İlk satırın geri kalanı mavi, küçük ve büyük harflerle gösterilir. Paragrafın geri kalan kısmı varsayılan yazı tipi boyutu ve rengi olacak:
p::first-letter {
color: #ff0000;
font-size: xx-large;
}
p::first-line {
color: #0000ff;
font-variant: small-caps;
}

CSS :: The :: before sözde elemanı
::before Sözde öğesi 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 resim ekler:
h1::before {
content: url(smiley.gif);
}

Sahte elemandan sonra :: ::
::afterSözde öğesi 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 resim ekler:
h1::after {
content: url(smiley.gif);
}

CSS :: the :: selection sözde elemanı
::selection Sözde eleman, bir kullanıcı tarafından seçilen bir eleman kısmını eşleşir.
Aşağıdaki CSS özelliklerini uygulamalı edilebilir ::selection: color, background, cursor, ve outline.
Aşağıdaki örnek, seçilen metni sarı arka planda kırmızı yapıyor:
::selection {
color: red;
background: yellow;
}