CSS: Seçiciler (31 ~ 41)

CSS’de seçicilere kaldığımız yerden devam ediyoruz.. Bu dersimizde aşağıdaki seçicileri öğreneceğiz;

31) X:focus
32) X:active
33) X:lang(Y)
34) :root
35) X:empty
36) X:target
37) X:enabled
38) X:disabled
39) X:valid
40) X:invalid
41) ::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ği

IE8+, 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ği

IE5+, 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ği

IE8+, Firefox, Chrome, Safari, Opera

34) :root

Bu seçici &lthtml> 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ği

IE9+, 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ği

IE9+, 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ği

IE9+, 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ği

IE9+, 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ği

IE9+, 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ği

IE10+, 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ği

IE10+, 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ği

IE9+, Firefox (-moz), Chrome, Safari, Opera

Yayınlayan

Tayfun Erbilen

2009'dan beri web işleriyle uğraşan, aynı zamanda amatör müziklede ilgilenen sıradan birisi..

“CSS: Seçiciler (31 ~ 41)” üzerine 21 yorum

  1. Selam Tayfun Usta,

    bu kadar seçici nerede hangi projede kullanılır acaba, adamların işi yok anlaşılan durmadan seçici üzerinemi geliştirmişler css yi:)

    İnsanın huzurunu kaçırıyor bu kadar çok seçici zaten tarayıcı uyumluluğu başlı başına bir sorunken, neyse bunlarada alışırız zamanla sanırım.

    Anlatımın için Teşekkürler.

  2. Abi ellerine sağlık , acaba bir sonraki ders'te hangi konulardan bahsedeceksin ?

  3. ::selection'da sadece yazı rengi, arkaplan rengi, cursor, border özelliklerini kullanabiliyoruz.

  4. @Koray Akıncı, birkaç seçiciyi unutmuşum onlardan bahsettikten sonra muhtemelen font özelliklerini anlatmaya başlayacağım.

  5. Seçicicilerden sonraki dersleri sabırsızlıkla bekliyorum. Devamı gelicek mi acaba?
    Özenle çekilmiş ve diksiyonu ,anlatım tarzı bu kadar iyi biri kolay kolay karşımıza çıkmıyor malesef. Dersler için harcadığınız saatler için çok teşekkür ederim bu arada . Umarım emeklerinizin karşlığını kat ve kat görürsünüz ….

  6. @Hakan Uzm, evet yakın zamanda yeni dersler gelecek hocam, şuan elimde birkaç iş olduğu için kısa bir ara verdim derslere.

  7. Tayfun hocam bildiğiniz gibi mobil teknoloji hayatımızda giderek yaygınlaşıyor.
    Bu konuda ders anlatımınız olacak mı? css,html,vs.. Konularda.

  8. Abi be şu derslere devam etsen yemin ederim senin gibi anlatan yok ya , lütfen css'i öğrenmeyi çok istiyorum …

  9. ilk seçici dersi bittikten sonra diğer derslere geçeyim dedim 41'e kadar gittiğini görünce dediğim şey "has*ktir".

  10. Okadar Css videosu izledim fark çok büyük anlatım gerçekten çok güzel hakını vermişsin umarım hakkınıda alırsın yeni videooları takip ediyor olacağım fakat bu kadar seçicinin bilinmesi gereklimidir ? 😀

  11. @Huseyin Vural, dahada fazla seçici bulunmakta.. Ve her yeni sürüm ile birlikte yeni seçicilerde beraberinde gelmektedir.. Bir html sayfasında istediğiniz nesneyi kolayca seçebilmek adına bütün seçicileri bilmenizde fayda var.. Aksi halde çok kolay bir şeyi, çok zor hale getirebilirsiniz 🙂 Ancak başlangıç için tabi ki hepsine hakim olmanızı beklemiyorum.. Aslında hakim olmanızada gerek yok, takıldıkça açıp bakarsınız.. Bir süre sonra aklınızda yer edinir zaten.

  12. merhaba,
    bu (31-41) arası dersler css'in sitenizdeki son konusu mu? eger öyleyse devamı ne zaman gelecek,bir öngörünüz var mı bu konuda..ona göre plan yapacagım da..

  13. @tuba ogat, şu 3 gün şehir dışında olacağım.. Muhtemelen önümüzdeki hafta derslere devam edeceğim.

  14. Sayın erbilen CSS'e devam edecek misiniz? En son ders anlatımına başlıcam dediginizin üstünden baya geçti de:)

    Bir de söylemek istedigim başka bir şey daha var. Bu seçicilerin anlatımı gayet güzel ama açıkçası başlıklara (yani x li y li başlıklar) çok hakim olamadım kafamı karıştırdı.hani açıp bakıyım şu özelliğe demek isteyeceğim bir site ancak bu denklemsel seçici başlıkları çok açıklayıcı olmadığı için konuyu oturtamıyorum.keske düz yazı şeklinde olsaydı.en azından bundan sonraki videolarınızda belki bu eleştrimi dikkate alabilirsiniz.matematiğim iyidir ama konu "yazılım" olunca ve yeni öğrenmeye başlayınca kafam allakbullak oldu açıkçası.

  15. @Tuba ogat, evet haklısınız mahçup oldum biraz 🙂 Bu dersleri hazırlamak için günümden feragat etmem gerekiyor ancak bir türlü boşa çıkamadım.. İlk boş zamanımda yeni dersler hazırlayacağım, öyle alelade bir ders olmaması için biraz zaman harcamam döküman hazırlamam gerekiyor.

    Tavsitenize gelince, X Y Z diye basit değerlerle tanımladım.. Aslında daha az kafa karıştıcı.. X siz olun, Y ben, Z bir başkası.. Kısaca bu yani 🙂 Belli olmayan nesneleri temsil ettikleri için X Y Z isimlerini verdim.. Bu A B C'de olabilirdi, tercih yani.

  16. peki teşekkür ederim cevabınız için.. en kısa zamanda yeni dersler hazırlamanız dileğiyle.. iyi çalışmalar

  17. cok soru soruyorum ama birşey daha sorabilir miyim? sitenize girdigim zaman anasayfada css le ilgili birşeyler çıkıyor ancak css kategorisine tıkladıgımda yalnızca secicilerin son haftası (31-40) arası gözüküyor. bu kategoriye mi düşmüyor. nerden takip etmem gerek. anasayfaya dusen mi en son yaptıgınız..hover la ilgili birşey vardı.. tam olarak hepsini css kategorisi içinde toplamıyor musunuz? baska sorum yok 🙂

  18. Temel css derslerini css kategorisi altında topluyorum.. Temel anlattığım için karışmaması adına diğer paylaşımlarımı ders kategorisi altında yayınlıyorum.. Anasayfada ise en son ne eklediysem onu görüyorsunuz 🙂

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir