Cuma , 20 Ekim 2017
Anasayfa » WEB » CSS » CSS Pseudo elements (Sözde Elementler)

CSS Pseudo elements (Sözde Elementler)

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:

Örnek:

screenshot_2

CSS

HTML

 

 

::first-line selector

Paragraftaki ilk satırı seçmek için kullanılır.

Syntax:

Örnek:

first-line-selector

CSS

HTML

 

::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:

Örnek:

selection-pseudo-selector

CSS

HTML

 

::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:

 

::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:

 

 

Örnek:

before-after-samples

 

CSS

HTML

 

 

Örnek 2:

before-after-samples2

CSS:

 

HTML:

 

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/

 

Hakkında Hayri

İlginizi Çekebilir

CSS Slider Yapımı

Bu yazımızda CSS ile Basit Slider yapacağız. İlk olarak slidera konulacak resimlerin boyutlarını ayarlıyoruz. Bu örneğimizde …

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir