CSS’de seçicilere kaldığımız yerden devam ediyoruz.. Bu dersimizde aşağıdaki seçicileri öğreneceğiz;
- X:focus
- X:active
- X:lang(Y)
- :root
- X:empty
- X:target
- X:enabled
- X:disabled
- X:valid
- X:invalid
- ::selection
CSS’de seçicilere kaldığımız yerden devam ediyoruz..
(1~10) Seçicilerine ulaşmak için tıklayın.
(11~20) Seçicilerine ulaşmak için tıklayın.
(21~30) Seçicilerine ulaşmak için tıklayın.
31) X:focus
Seçilen X nesnesine odaklandığında işlem yapmak için kullanılır.
/*
* Input nesnesine odaklandığında
* arkaplan regini sarı yapar
*/
input:focus {
background-color: yellow
}
Tarayıcı DesteğiIE8+, Firefox, Chrome, Safari, Opera
32) X:active
Aktif olan X nesnelerini seçmek için kullanılır.
/*
* Linkle tıklandığında
* arkaplan regini sarı yapar
*/
a:active {
background-color: yellow
}
Tarayıcı DesteğiIE5+, Firefox, Chrome, Safari, Opera
Not: IE5-IE7 sürümlerinde çalışıyor ancak sadece link nesnesi için çalışıyor.
33) X:lang(Y)
X nesnelerinde lang niteliği Y ile başlayanları seçmek için kullanılır.
/*
* p nesnelerinde lang niteliği tr ile başlayanları
* seçer ve arkaplan rengini kırmızı yapar
*/
p:lang(tr) {
background-color: red
}
Tarayıcı DesteğiIE8+, Firefox, Chrome, Safari, Opera
34) :root
Bu seçici <html> etiketi üzerinde işlem yapmamızı sağlar. Kısaca ana nesneyi seçmek için kullanılır.
/*
* sayfanın arkaplan rengini
* kırmızı yapar
*/
:root {
background-color: red
}
Tarayıcı DesteğiIE9+, Firefox, Chrome, Safari, Opera
35) X:empty
Hiçbir nesne ve karakter bulundurmayan X nesnelerini seçmek için kullanılır.
/*
* İçerisinde hiçbir nesne, karakter olmayan
* divleri seçer ve yükseklik vererek
* arkplan rengini sarı yapar
*/
div:empty {
height: 30px;
background-color: yellow
}
Tarayıcı DesteğiIE9+, Firefox, Chrome, Safari, Opera
36) X:target
Hedef olan X nesnelerini seçmek için kullanılır.
/*
* id'si test olan div nesnesi hedeflendiğinde
* arkplan rengini sarı renk yapar
*/
#test:target {
background-color: yellow
}
Tarayıcı DesteğiIE9+, Firefox, Chrome, Safari, Opera
37) X:enabled
X form nesnelerinde seçilebilir/yazılabilir olanları seçmek için kullanılır.
/*
* input nesnelerinde seçilebilir olanların
* sonrasında gelen labellere arkaplan uygular
*/
input:enabled + label {
background-color: #eee
}
Tarayıcı DesteğiIE9+, Firefox, Chrome, Safari, Opera
38) X:disabled
X form nesnelerinde pasif (işlem yapılamaz) olanları seçmek için kullanılır.
/*
* Pasif olan input nesnelerinden sonra gelen label
* nesnelerini seçer ve arkaplan rengini kırmızı yapar
*/
input:disabled + label {
background-color: red
}
Tarayıcı DesteğiIE9+, Firefox, Chrome, Safari, Opera
39) X:valid
X nesnelerinde istenilen formata uyan nesneleri seçmek için kullanılır.
(Sadece form nesneleri için geçerlidir)
/*
* Geçerli formatta veri girilmiş
* input nesnelerine işlem yapar
*/
input:valid {
background-color: green
}
Tarayıcı DesteğiIE10+, Firefox, Chrome, Safari, Opera
40) X:invalid
X nesnelerinde istenilen formata uymayan nesneleri seçmek için kullanılır.
(Sadece form nesneleri için geçerlidir)
/*
* Geçersiz formatta veri girilmiş
* input nesnelerine işlem yapar
*/
input:invalid {
background-color: red
}
Tarayıcı DesteğiIE10+, Firefox, Chrome, Safari, Opera
41) ::selection
Seçilen ifadelerin (arkplan ve yazı renginde) değişiklik yapmak için kullanılır.
/*
* p nesnelerinde seçilen yazıların
* arkaplan rengini değiştirir
*/
p::selection {
background-color: yellow
}
/* firefox için (-moz) ön eki gereklidir */
p::-moz-selection {
background-color: yellow
}
Tarayıcı DesteğiIE9+, Firefox (-moz), Chrome, Safari, Opera