::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
Bu yazımda css 'de scroll-behavior ile scroll (kaydırma) işlevine verilen yumuşak bir kaydırma özelliğinden bahsettim.
Devamını Oku

scroll-behavior Özelliği

Bu yazımda css 'de scroll-behavior ile scroll (kaydırma) işlevine verilen yumuşak bir kaydırma özelliğinden bahsettim. Sitenize eklemek isterseniz yazımın devamını okuyabilirsiniz.

Devamını Oku