::selection – Seçili Metin

CSS – ::selection – Seçili Metin
CSS – ::selection – Seçili Metin
::selection sözde seçicisi ile mouse sol tuşuyla tıklanıp basılı tutarak seçilen metinlere nasıl stil verilebileceği anlatılmıştır. Söz dizimi ve nasıl yapılmasıyla ile ilgili detaylara yazımdan ulaşabilirsiniz

Merhabalar,

Bu yazımda CSS ile sözde öğelerde bir diğerinden bahsedeceğim. Diğer sözde öğelere konu olan ::before ve ::after  yazıma linke tıklayarak ulaşabilirsiniz. Şimdi kısaca ::selection seçicisinden bahsedelim.

Mouse ile bir metinde birden fazla karakter seçiyoruz tarayıcılar hangi karakter ve kelimeleri seçtiğimizi görebilmemiz için oraya varsayılan olarak bir arka plan rengi atarlar bu renk genellikle mavi bir arka plan olur. Sizde alıştırma için bu paragraftan örneğin bir kaç kelimeyi kopyalamak için sol tuşa basılı tutup seçin mavi bir arka plan ile hangi karakterleri seçtiğiniz belirtilir.

İşte ::selection ile biz bu seçili olan bölgeye stil tanımlayabiliyoruz. Sınırlı sayıda ::selection ile özellikler değiştirebiliyoruz bunlar;

  • Yazının rengi,
  • Arka plan rengi,
  • Yazının gölgesi

özelliklerini metin seçildiğinde çalışacak şekilde ayarlayabiliyoruz. Hemen örnek bir söz dizimi oluşturayım.

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

Yukarıdaki kod (paragraf) elemetleri içinde bir metni seçildiğinde arka plan rengini yeşil, yazı rengini turuncu olarak vurgulamamızı sağlar.

Bunun gibi örnekleri çoğaltarak kullanabilirsiniz isterseniz p etiketini seçmeden tüm yazılara da sadece  ::selection { } seçicisi ile stil uygulayabilirsiniz.

Aşağıya codepen ile örnekleri çoğaltıp farklı söz dizimleri ile birlikte bırakıyorum. Sağ taraftan kontrol edip sol taraftan Css kodlarını inceleyebilirsiniz.

See the Pen Css ::selection Kullanımı by furkangiray.com (@furkangiray_com) on CodePen.

Yukarıda renk, arka plan ve gölge ile ilgili örnek olarak sizin de görmeniz için proje hazırladım. Test edip kendinize uygun pratikler ile sitenize ekleyebilir konuyu pekiştirebilirsiniz. 

Ayrıca input, textarea gibi içine yazılan değerleri seçebileceğiniz elementler içinde ::selection sözde seçiciyi kullanabildiğimizi hatırlatayım.

Umarım işinize yarar.

Mutlu Kodlamalar 🙂

0 Shares:

Benimle yorumunu paylaş;

Bunlara da göz atabilirsin
CSS ::before, ::after
Devamını Oku

::before, ::after Kullanımı

CSS: before ve: after özellikleri, sözde öğeler olarak da bilinen özelliklerdir. Bir elemanın içeriğinden önce veya sonra bir şey eklemek için kullanılırlar. Detaylar için yazımı inceleyebilirsiniz.

Devamını Oku

Css ile Yazıya Arka Plan Vermek
Devamını Oku

Yazıya Arka Plan Verme

Bu yazımda çok popüler olmayan ama kullanışlı olduğunu düşündüğüm Yazıya Arka Plan verme özelliğinden bahsettim. Nasıl yapıldığına göz atmak için yazının devamını okuyabilirsiniz.

Devamını Oku