CSS: Seçiciler (11 ~ 20)

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

11) X[Y=’Z’]
12) X[Y*=’Z’]
13) X[Y^=’Z’]
14) X[Y$=’Z’]
15) X[Y~=’Z’]
16) X:checked
17) X::before ve X::after
18) X:hover
19) X:not(Y)
20) X::first-letter ve X::first-line

CSS’de seçicilere kaldığımız yerden devam ediyoruz..
(1~10) Seçicilerine Ulaşmak İçin Tıklayın.
(21~30) Seçicilerine Ulaşmak İçin Tıklayın.
(31~41) Seçicilerine Ulaşmak İçin Tıklayın.

11) X[Y=’Z’]

X Nesnelerinde y niteliği z’ye eşit olan nesneleri seçmek için kullanılır.

/*
 * title niteliği test'e eşit olan linkleri
 * seçip yazı rengini kırmızı yapar
 */
a[title='test'] {
    color: red
}

Tarayıcı Desteği

IE7+, Firefox, Chrome, Safari, Opera

12) X[Y*=’Z’]

X Nesnelerinde Y niteliğinde Z ifadesi geçen nesneleri seçmek için kullanılır.

/*
 * title niteliğinde 'test' ifadesi geçen
 * linkleri seçip yazı rengini mavi yapar
 */
a[title*='test'] {
    color: darkblue
}

Tarayıcı Desteği

IE7+, Firefox, Chrome, Safari, Opera

13) X[Y^=’Z’]

X Nesnelerinde Y niteliği Z ile başlayan nesneleri seçmek için kullanılır.

/*
 * href niteliği 'http' ile başlayan
 * linkleri seçip yazı rengini kırmızı yapar
 */
a[href^='http'] {
    color: red
}

Tarayıcı Desteği

IE7+, Firefox, Chrome, Safari, Opera

14) X[Y$=’Z’]

X Nesnelerinde Y niteliği Z ile biten nesneleri seçmek için kullanılır.

/*
 * href niteliği '.net' ile biten linkleri
 * seçip yazı rengini kırmızı yapar
 */
a[href$='.net'] {
    color: red
}

Tarayıcı Desteği

IE7+, Firefox, Chrome, Safari, Opera

15) X[Y~=’Z’]

X Nesnelerinde Y niteliğinde Z ifadesi geçen nesneleri seçmek için kullanılır. X[Y*=’Z’] seçicisinden farklı olarak Z ifadesi doğrudan bir ifade ise seçilir.. Yani “test” ifadesi geçen nesneleri seçeceksek “testettik” ifadesi içeren bir nesneyi bu seçici ile değil X[Y*=’Z’] seçicisi ile seçebiliriz.

/*
 * Title niteliğinde 'test' ifadesi geçen
 * linkleri seçip rengini kırmızı yapar
 */
a[title~='test'] {
    color: red
}

Tarayıcı Desteği

IE7+, Firefox, Chrome, Safari, Opera

16) X:checked

X form nesnelerinde seçili olanları seçmek için kullanılır.

/*
 * tipi radio olan inputlarda seçili olandan sonra
 * gelen labeli seçip arkaplan rengini sarı yapar
 */
input[type=radio]:checked + label {  
   background-color: yellow
}

Tarayıcı Desteği

IE9+, Firefox, Chrome, Safari, Opera

17) X::before ve X::after

Nesnenin öncesine ve sonrasına bir şeyler eklemek için kullanılır.

/*
 * Liste etiketlerinin öncesine
 * - ifadesini ekler
 */
ul li::before {
    content: '-'
}

/*
 * Liste etiketlerinin sonrasına
 * -son- ifadesini ekler
 */
ul li::after {
    content: ' -son- '
}

Tarayıcı Desteği

IE8+, Firefox, Chrome, Safari, Opera

18) X:hover

Seçilen nesnenin üzerine fare geldiğinde işlem yapılması için kullanılır.

/*
 * Link nesnesinin üzerine fare ile
 * geldiğinde arkaplan rengini sarı yapar
 */
a:hover {
    background-color: yellow
}

Tarayıcı Desteği

IE6+, Firefox, Chrome, Safari, Opera

19) X:not(Y)

:not seçicisi, değilse anlamına gelmektedir.. Yani bir div seçsin ama sınıfı test değilse gibi..

/*
 * Sınıfı erbilen olan ama id'si test olmayan
 * div nesnelerini seçer ve arkaplan rengini sarı yapar
 */
.erbilen:not(#test) {
    background-color: yellow
}

Tarayıcı Desteği

IE9+, Firefox, Chrome, Safari, Opera

20) X::first-letter ve X::first-line

X nesnesinin ilk harfini seçip işlem yapmak için ::first-letter,
X nesnesinin ilk satırını seçip işlem yapmak için ::first-line kullanılır.

/*
 * div nesnesinin ilk harfinin
 * boyutunu 30px yapar
 */
div::first-letter {
    font-size: 30px
}

/*
 * div nesnesinin ilk satırının
 * arkaplan rengini sarı yapar
 */
div::first-line {
    background-color: yellow
}

Tarayıcı Desteği

IE6+, Firefox, 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 (11 ~ 20)” üzerine 11 yorum

  1. He he 🙂 Öyle deme ama, nesneyi seçemedikten sonra css'in ne anlamı kaldı 😛

  2. Abi allah razı olsun hiç bir yerde böyle güzel anlatım hemde bu kadar detay bulunmaz hem css hem css3 allah razı olsun çok teşekkürler …

  3. Derslerin çok güzel ve açıklayıcı ileriki derslerini sabırsızlıkla bekliyorum

  4. Öncelikle çok teşekkürler. bence ezberlemeye gerek yok, böyle birşeyin seçicilerle yapılabildiğiniz ve nasıl yapıldığını anlamak yeterli, kullanmak gerektiğinde varsa arşivinizden kolayca bulup çıkarabiliyorsunuz zaten (en azından ben öyle yapıyorum ). emeğin için çok teşekkürler tayfun hocam…

  5. :hover 'ı IETester'da denedim her nesnede çalışıyomu diye IE6'da link haricinde çalışmıyo.. IE7 de sayfa hiç açılmadı nedendir bulamadım 🙂 diğerlerinde her nesnede çalışıyor

  6. @Koray Akıncı, derslerin ne zaman yayınlanacağı konusunda kesin bir şey söyleyemem 🙂 Siz sorunca yayınlanma zamanı değişmiyor nihayetinde.. Vaktim çok olmadığı için zar zor çekip yayınlıyorum, birazcık anlayış iyi olurdu 🙂

  7. abi çok özür dilerim sadece çok güzel anlatımından dolayı dersleri bir an evvel izlemek istiyorum …

Bir Cevap Yazın

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