Merhabalar,

Bu yazımda CSS ile sözde öğelerden ::selection seçicisinden bahsedeceğim. Diğer sözde öğeler hakkında bilgi almak isterseniz ::before ve ::after kullanımı yazıma göz atabilirsiniz.

Şimdi gelelim ::selection seçicisine. Bir kullanıcı fare ile metin seçtiğinde tarayıcılar otomatik olarak mavi arka plan rengi ve beyaz yazı ile hangi karakterlerin seçildiğini gösterir. Bu varsayılan görünümü CSS ile özelleştirmek mümkündür.

::selection ile sınırlı bazı özellikleri değiştirebilirsiniz. Bunlar:

• Yazı rengi (color)
• Arka plan rengi (background-color)
• Yazı gölgesi (text-shadow)

Aşağıda örnek bir kullanım veriyorum:

p::selection {
  background-color: green;
  color: orange;
}

Bu örnekte, <p> etiketli paragraflar içindeki metin seçildiğinde seçilen kısmın arka planı yeşil, yazısı ise turuncu olacaktır.

Dilerseniz p etiketi gibi belirli elementler yerine sadece ::selection yazarak tüm sayfadaki seçimi özelleştirebilirsiniz.

Ayrıca input ve textarea gibi kullanıcıdan veri alan alanlarda da ::selection kullanılabilir.

Umarım işinize yarar. Mutlu Kodlamalar :)