Sözde sınıflar gibi sözde elementler tanımlayıp bunları kontrol etmek mümkündür. Tanımlanmış bir elementin özel bir bölümünü düzenlemek ve güncellemek için pseudo element (sözde element) seçicilerini kullanabiliriz. Bir etiketin ilk karakterini(first-letter) yada ilk satırını (first-line) pseudo element seçicilerini kullanarak seçmek mümkündür. Burada aşağıdaki sözde etiket seçicilerinin kullanımı örnekler ile açıklayacağım.
- ::first-letter
- ::first-line
- ::selection
- ::after
- ::before
Tarayıcı uyumluluklarına bağlı olarak seçicileri : yada :: şeklinde kullanamak gerekli olaiblir. selection seçicisini mutlaka :: şeklinde kullanmamız gerekiyor.
::first-letter selector
Herhangi bir metin etiketi içindeki ilk karateri seçmek için kullanılır.
Syntax:
|
1 2 3 4 5 6 7 |
/* CSS3 syntax */ ::first-letter { style özellikleri} /* CSS2 syntax */ :first-letter { style özellikleri} |
Örnek:
CSS
|
1 2 3 4 5 6 7 |
#ornek::first-letter{ color:red; font-weight: bold; font-size:2em; } |
HTML
|
1 2 3 4 5 6 7 8 |
<p id="ornek">Lorem Ipsum, dizgi ve baskı endüstrisinde kullanılan mıgır metinlerdir Lorem Ipsum, adı bilinmeyen bir matbaacının bir hurufat numune kitabı oluşturmak üzere bir yazı galerisini alarak karıştırdığı 1500'lerden beri endüstri standardı sahte metinler olarak kullanılmıştır. Beşyüz yıl boyunca varlığını sürdürmekle kalmamış, aynı zam </p> |
::first-line selector
Paragraftaki ilk satırı seçmek için kullanılır.
Syntax:
|
1 2 3 4 5 6 7 |
/* CSS3 syntax */ ::first-line { style özellikleri} /* CSS2 syntax */ :first-line { style özellikleri} |
Örnek:
CSS
|
1 2 3 4 5 6 7 |
#ornek::first-line{ color:red; font-weight: bold; font-size:2em; } |
HTML
|
1 2 3 4 5 6 7 8 |
<p id="ornek">Lorem Ipsum, dizgi ve baskı endüstrisinde kullanılan mıgır metinlerdir Lorem Ipsum, adı bilinmeyen bir matbaacının bir hurufat numune kitabı oluşturmak üzere bir yazı galerisini alarak karıştırdığı 1500'lerden beri endüstri standardı sahte metinler olarak kullanılmıştır. Beşyüz yıl boyunca varlığını sürdürmekle kalmamış, aynı zam </p> |
::selection selector
HTML belgesi üzerinde kullanıcı tarafından seçilmiş olan alanı vurgulamak için kullanılır. Seçilen alan fare yada her hangi bir yöntemle seçilmiş olabilir. selection seçicisini CSS3 ile gelen bir özellik olduğu için :: şeklinde kullılmalıdır.
Syntax:
|
1 2 3 4 |
/* CSS3 syntax */ ::selection { style özellikleri} |
Örnek:
CSS
|
1 2 3 4 5 6 7 8 9 |
#ornek::selection{ color:red; font-weight: bold; font-size:2em; background: yellow; } |
HTML
|
1 2 3 4 5 6 7 8 |
<p id="ornek">Lorem Ipsum, dizgi ve baskı endüstrisinde kullanılan mıgır metinlerdir Lorem Ipsum, adı bilinmeyen bir matbaacının bir hurufat numune kitabı oluşturmak üzere bir yazı galerisini alarak karıştırdığı 1500'lerden beri endüstri standardı sahte metinler olarak kullanılmıştır. Beşyüz yıl boyunca varlığını sürdürmekle kalmamış, aynı zam </p> |
::before selector
Eşleşen elemanın ilk çocuğu olan sahte bir eleman oluşturur. Genellikle etiket başına estetik içerik girmek için kullanılır. Bu etiketin varsayılan görünümü satıriçidir.
content özelliği etiketin içinde yazılacak olan ifadeyi belirtmektedir. content değerine attr(nitelik) değeri ile de etiket içindeki nitelik belirtilerek değer okutmak mümkündür. (Bkz. Örnek 2)
Tanımlı karakterler ile birlikte ASCII karakterleri unicode şeklinde kullanmak mümkün.
Syntax:
|
1 2 3 4 5 6 7 |
/* CSS3 syntax */ ::before { style özellikleri} /* CSS2 syntax */ :before { style özellikleri} |
::after selector
Eşleşen elemanın son çocuğu olan sahte bir eleman oluşturur. Genellikle etiket sonuna estetik içerik girmek için kullanılır. Bu etiketin varsayılan görünümü satıriçidir.
content özelliği etiketin içinde yazılacak olan ifadeyi belirtmektedir. content değerine attr(nitelik) değeri ile de etiket içindeki nitelik belirtilerek değer okutmak mümkündür. (Bkz. Örnek 2)
Tanımlı karakterler ile birlikte ASCII karakterleri unicode şeklinde kullanmak mümkün.
Syntax:
|
1 2 3 4 5 6 7 |
/* CSS3 syntax */ ::after { style özellikleri} /* CSS2 syntax */ :after { style özellikleri} |
Örnek:
CSS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
q#yorum::before { content: "«"; color: blue; padding-right:10px; } q#yorum::after { content: "»"; color: red; padding-left: 10px; } |
HTML
|
1 2 3 4 |
<q id="yorum">Lorem Ipsum, dizgi ve baskı endüstrisinde kullanılan mıgır metinlerdir. Lorem Ipsum, adı bilinmeyen bir matbaacının bir hurufat</q> |
Örnek 2:
CSS:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
q#yorum::before { content: attr(data-yazar) "\2714"; color: blue; padding-right:10px; } q#yorum::after { content: "\270E"; color: #c83f3f; padding-left: 10px; } |
HTML:
|
1 2 3 |
<q id="yorum" data-yazar="Albert Einstein">Ancak başkaları için yaşanan bir hayat, yaşamaya değer bir hayattır.</q> |
Faydalanılan Kaynaklar:
https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements
http://nealchester.com/special-characters/
css-tricks.com/snippets/html/glyphs/
[…] CSS Sözde Elementler (Pseudo Element) […]