Sözde Elemanları nelerdir?
Bir BB sözde öğesi bir öğenin stil belirli kısımlarında kullanılır.
Örneğin, için kullanılabilir:
- Bir elemanın ilk harfini veya çizgiyi, Stil
- Bir öğenin içeriğini önce içeriğini yerleştirin veya sonrasında
Sözdizimi
sözde elemanları sözdizimi:
selector::pseudo-element {
property:value;
} - çift kolon gösterimi dikkat ::first-line karşı :first-line
çift iki nokta CSS3 sözde elemanları için tek kolon gösterimini yerini aldı. Bu sözde-sınıflar ve sözde elemanları arasında ayrım yapmak için W3C girişimiydi.
tek kolon sözdizimi sözde sınıflar ve BB2 ve BB1 sözde elemanlar her ikisi için de kullanılmıştır.
geriye dönük uyumluluk sağlamak için, tek kolon sözdizimi BB2 ve BB1 sözde elemanları için kabul edilebilir.
::first-line Sözde element
::first-line sözde elemanı bir metnin ilk satırına özel stil eklemek için kullanılır.
Aşağıdaki örnek, tüm metnin ilk satırını biçimlendirir <p> elemanları:
Not: ::first-line sözde öğesi elemanları düzeyinde engellemek için uygulanabilir.
Aşağıdaki özellikler için geçerli ::first-line sözde elemanı:
- font
- color
- background
- word-spacing
- letter-spacing
- text-decoration
- vertical-align
- text-transform
- line-height
- clear
::first-letter Sözde eleman
::first-letter sözde elemanı bir metnin ilk harfine özel stil eklemek için kullanılır.
Aşağıdaki örnek, tüm metnin ilk harfini biçimlendirir <p> elemanları:
Not: ::first-letter sözde öğesi elemanları düzeyinde engellemek için uygulanabilir.
Aşağıdaki özellikler için geçerli ::first-letter pseudo- elemanı:
- font özellikleri
- color özellikleri
- background özellikleri
- margin özellikleri
- padding özellikleri
- border özellikleri
- text-decoration
- vertical-align (only if "float" is "none" )
- text-transform
- line-height
- float
- clear
Sözde elemanlar ve CSS Sınıfları
Sözde elemanlar CSS sınıfları ile kombine edilebilir:
Yukarıdaki örnek ile paragrafların ilk harflerini görüntüler class="intro" kırmızı ve daha geniş bir boyutta.
Çoklu Sözde elemanlar
Çeşitli sözde elemanları da birleştirilebilir.
Aşağıdaki örnekte, bir paragrafın ilk harfi bir xx-large yazı tipi boyutu, kırmızı olacaktır. Birinci satırın geri kalanı, mavi, ve küçük kaplar içinde olacaktır. paragrafın geri kalan varsayılan yazı tipi boyutu ve rengi olacaktır:
Örnek
p::first-letter
{
color: #ff0000;
font-size: xx-large;
}
p::first-line
{
color: #0000ff;
font-variant: small-caps;
} Kendin dene " CSS - ::before Sözde elemanın
::before sözde öğesi bir elemanın önüne bazı içerikleri eklemek için kullanılabilir.
Aşağıdaki örnek, her içeriğinden önce bir görüntü ekler <h1> elemanının:
CSS - ::after Sözde elemanın
::after sözde öğesi bir elemanın arkasından bazı içerikler eklemek için kullanılabilir.
Aşağıdaki örnek, her içeriğine sonra bir görüntü ekler <h1> elemanının:
CSS - ::selection Sözde eleman
::selection sözde elemanı, kullanıcı tarafından seçilen bir eleman kısmını eşleşir.
Aşağıdaki CSS özelliklerini uygulanabilir ::selection : color , background , cursor ve outline .
Aşağıdaki örnek, sarı zemin üzerine seçili metin kırmızı yapar:
Egzersizleri ile Yourself test edin!
Egzersiz 1 » Alıştırma 2» Egzersiz 3 »
Tüm CSS Sözde Elemanları
| selektör | Örnek | Örnek açıklaması |
|---|---|---|
| ::after | p::after | Her içeriğine sonra bir şeyler ekleyin <p> elemanı |
| ::before | p::before | Her içeriğinden önce bir şeyler ekleyin <p> elemanı |
| ::first-letter | p::first-letter | Her ilk harfini seçer <p> elemanı |
| ::first-line | p::first-line | Her bir ilk satırı seçer <p> elemanının |
| ::selection | p::selection | Bir kullanıcı tarafından seçilen bir eleman kısmını seçer |
Tüm CSS Sözde Sınıflar
| selektör | Örnek | Örnek açıklaması |
|---|---|---|
| :active | a:active | Aktif linki seçer |
| :checked | input:checked | Her kontrol seçer <input> elemanı |
| :disabled | input:disabled | Her engelli seçer <input> elemanı |
| :empty | p:empty | Her seçer <p> çocuk sahibi olmadığı elemanı |
| :enabled | input:enabled | Her etkin seçer <input> elemanı |
| :first-child | p:first-child | Her seçer <p> örüntüsü ilk çocuğudur elemanlar |
| :first-of-type | p:first-of-type | Her seçer <p> ilk elemanı <p> Kendi üst öğesi |
| :focus | input:focus | Seçer <input> odağı elemanı |
| :hover | a:hover | farenin üzerinde bağlantıları seçer |
| :in-range | input:in-range | Seçer <input> belirli bir aralıkta bir değere sahip elemanlar |
| :invalid | input:invalid | Tüm seçer <input> geçersiz değerli elemanları |
| : lang( language ) | p: lang(it) | Her seçer <p> Bir lang özellik değeri ile başlayan eleman "it" |
| :last-child | p:last-child | Her seçer <p> üst biriminin son çocuğudur elemanlar |
| :last-of-type | p:last-of-type | Her seçer <p> sonuncusu elemanı <p> Kendi üst öğesi |
| :link | a:link | Tüm edilmemiş bağlantıları seçer |
| : not(selector) | : not(p) | Bir değil her eleman seçer <p> elemanı |
| :nth- child(n) | p:nth- child(2) | Her seçer <p> üst biriminin ikinci çocuğudur elemanı |
| :nth-last- child(n) | p:nth-last- child(2) | Her seçer <p> Geçen çocuktan sayarak, üst biriminin ikinci çocuğudur elemanı |
| :nth-last-of- type(n) | p:nth-last-of- type(2) | Her seçer <p> ikinci elemanı <p> Geçen çocuktan sayarak, kendi ebeveyn eleman |
| :nth-of- type(n) | p:nth-of- type(2) | Her seçer <p> ikinci elemanı <p> onun ana unsuru |
| :only-of-type | p:only-of-type | Her seçer <p> sadece elemanı <p> Kendi üst öğesi |
| :only-child | p:only-child | Her seçer <p> üst biriminin tek çocuğu elemanı |
| :optional | input:optional | Seçer <input> hiçbir ile elementler "required" özniteliği |
| :out-of-range | input:out-of-range | Seçer <input> belirli bir aralığının dışında bir değere sahip elemanlar |
| :read-only | input:read-only | Seçer <input> a sahip elemanlar "readonly" özelliğinin belirtilmesi |
| :read-write | input:read-write | Seçer <input> hiçbir ile elementler "readonly" özniteliği |
| :required | input:required | Seçer <input> a sahip elemanlar "required" belirtilen özellik |
| :root | root | belgenin kök elemanı seçer |
| :target | #news:target | Geçerli etkin seçer #news elemanı (clicked on a URL containing that anchor name) |
| :valid | input:valid | Tüm seçer <input> geçerli bir değere sahip elemanlar |
| :visited | a:visited | tüm ziyaret edilen bağlantılar seçer |