CSS Seçim Rengini Değiştirme

Web sitelerinde gezinirken herhangi bir yazıyı kopyalamak istediğimizde arka plan renginin mavi olduğunu fark etmişsinizdir. CSS ile seçilen bir metnin stil özelliklerini değiştirebilmek mümkün. Örneğin seçilen alandaki yazıların arkaplan renklerini ve yazı renklerini değiştirebilirsiniz.

CSS'de selection olarak adlandırılan bir kavramın öncelikle kullanımına bakalım.

::selection 
{
   /* Stil Özellikleri */
}
::-moz-selection
{
   /* Stil Özellikleri */
}

Şimdi kullanım ile ilgili örneklere geçelim.

1. Websitenizde bulunan tüm elementler için aynı stil özelliklerini kullanmak istiyorsanız aşağıdaki şekilde kapsayıcı bir stil tanımlayabilirsiniz.

::selection 
{
   background-color: red;
   color : #fff
}
::-moz-selection
{
   background-color: red;
   color : #fff
}

2. Her bir element için ayrı ayı stil özelliği uygulayabilirsiniz. Örneğin; paragraflarda ve linklerde farklı stil özellikleri gibi. Eğer seçim işleminde kullanıcı aynı anda hem paragraf hem de link içerisinde bulunan metinleri seçtiği zaman farklı stil özelliklerinin uygulandığını göreceksiniz.

/* Parafraflar İçin */
p::selection 
{
   background-color: red;
   color : #fff
}
p::-moz-selection
{
   background-color: red;
   color : #fff
}

/* Linkler İçin */
a::selection 
{
   background-color: blue;
   color : #fff
}
a::-moz-selection
{
   background-color: blue;
   color : #fff
}

3. Stil özelliği vermek için class adı veya id değeri bulunan elementler için farklı stil özellikleri verebilirsiniz. Aşağıdaki örnekte baslik ve icerik classına sahip elementler için farklı stil özellikleri uygulanacaktır.

/* baslik için */
.baslik::selection 
{
   background-color: red;
   color : #fff
}
.baslik::-moz-selection
{
   background-color: red;
   color : #fff
}

/* icerik için */
.icerik::selection 
{
   background-color: blue;
   color : #fff
}
.icerik::-moz-selection
{
   background-color: blue;
   color : #fff
}

Konuyla ilgili soru ve görüşlerinizi yorum kısmından iletebilirsiniz.

Hayırlı çalışmalar dilerim.