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 p (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 🙂