CSS: Seçiciler (21 ~ 30)

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

21) X:nth-child(n)
22) X:nth-last-child(n)
23) X:nth-of-type(n)
24) X:nth-last-of-type(n)
25) X:only-child
26) X:only-of-type
27) X:first-child
28) X:last-child
29) X:first-of-type
30) X:last-of-type

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.
(31~41) Seçicilerine Ulaşmak İçin Tıklayın.

21) X:nth-child(n)

X nesneleri içerisinde N.yi seçer.

/*
 * Li nesneleri içinde ikincisini
 * seçer ve regini kırmızı yapar
 */
ul li:nth-child(2) {
    color: red
}

Tarayıcı Desteği

IE9+, Firefox 3.5+, Chrome, Safari, Opera

22) X:nth-last-child(n)

X nesneleri içerisinde sondan N.yi seçer.

/*
 * Li nesneleri içinde sondan 1.yi
 * seçer ve regini mavi yapar
 */
ul li:nth-last-child(2) {
    color: blue
}

Tarayıcı Desteği

IE9+, Firefox 3.5+, Chrome, Safari, Opera

23) X:nth-of-type(n)

X nesnelerinde n.yi seçmek için kullanılır. :nth-child’dan farkını öğrenmek için videoya göz atın.

/*
 * Div içerisindeki 2. spanları
 * seçer ve rengini kırmızı yapar
 */
div span:nth-of-type(2){
    color: red
}

Tarayıcı Desteği

IE9+, Firefox 3.5+, Chrome, Safari, Opera

24) X:nth-last-of-type(n)

:nth-of-type ile aynıdır.. Tek farkı sondan başlayarak nesneleri seçmesidir..

/*
 * Div içerisindeki sondan 1. spanları
 * seçer ve rengini kırmızı yapar
 */
div span:nth-last-of-type(2){
    color: red
}

Tarayıcı Desteği

IE9+, Firefox 3.5+, Chrome, Safari, Opera

25) X:only-child

X nesnesi sadece bir tane olanları seçer.. Ancak onun dışında farklı bir nesne bile olmaması gerekir.. Yoksa seçmeyecektir.

/*
 * div içinde bir tane p etiketi (tek nesne) var ise
 * onu seçer ve arkaplan rengini sarı yapar
 */
div p:only-child {
    background-color: yellow
}

Tarayıcı Desteği

IE9+, Firefox, Chrome, Safari, Opera

26) X:only-of-type

:only-child seçicisinin aksine, X nesnesi sadece bir tane olan nesneleri seçer.. Farklı nesnelerin olması bu durumu etkilemez..

/*
 * div içinde bir tane p etiketi var ise
 * onu seçer ve arkaplan rengini sarı yapar
 */
div p:only-of-type {
    background-color: yellow
}

Tarayıcı Desteği

IE9+, Firefox 3.5+, Chrome, Safari, Opera

27) X:first-child

İlk X nesnesini seçmek için kullanılır.

/*
 * İlk li nesnesini seçer ve
 * rengini kırmızı yapar
 */
ul li:first-child {
    color: red
}

Tarayıcı Desteği

IE7+, Firefox, Chrome, Safari, Opera

28) X:last-child

Son X nesnesini seçmek için kullanılır.

/*
 * Son li nesnesini seçer ve
 * rengini kırmızı yapar
 */
ul li:last-child {
    color: red
}

Tarayıcı Desteği

IE7+, Firefox, Chrome, Safari, Opera

29) X:first-of-type

İlk X nesnesini seçmek için kullanılır. :first-child seçicisinden farklı olarak, tipi eşleşen ilk nesneyi seçer.

/*
 * Divler içinde ilk p nesnesini
 * seçer ve rengini kırmızı yapar
 */
div p:first-of-type {
    color: red
}

Tarayıcı Desteği

IE9+, Firefox 3.5, Chrome, Safari, Opera

30) X:last-of-type

Son X nesnesini seçmek için kullanılır. :last-child seçicisinden farklı olarak, tipi eşleşen son nesneyi seçer.

/*
 * Divler içinde son p nesnesini
 * seçer ve rengini kırmızı yapar
 */
div p:last-of-type {
    color: red
}

Tarayıcı Desteği

IE9+, Firefox 3.5, 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 (21 ~ 30)” üzerine 10 yorum

  1. her videoda girişte farklı bir müzik 🙂 gelecek videolardaki giriş müziklerini merak ediyorum 🙂 dersler için teşekkür ederim 🙂

  2. Usta sana bir kaç soru sorucam ulaşamıyom. Özel olarak nasıl ulaşabilirim sana?
    He bide prototurk e ne oldu? :S

  3. Tayfun valla ilk defa videonu izlerken sıkıldım. Niye bilmiyorum ama bu seçiciler sanki sonsuza kadar gidicek gibi :))

  4. Bazen seçmekten güçlük çektiğim o kadar nesne oluyodu ki ; Meğer css bilgimin zayıflıgından kaynaklanıyormuş. Teşekkürler Tayfun 🙂

  5. Ben bir tablonun CSS'sini yazıyorum. Ancak satır renkleri gri,yeşil,gri,yeşil olarak sıralı gitmesini istiyorum. Bu nth seçicileri ile yapılabilir mi? Yani tek veya çiftleri seçecek.

  6. bi sınıfa atanmış olan arka planın opaklığını değiştirmek istiyorum ancak yalnızca arka planın opaklığı değişecek. sınıfın içindeki diğer elementlere birşey olmucak.

    yani şöyle

    .deneme {
    margin-left:auto;
    margin-right:auto;
    width:1170px;
    height:600px;
    background-image:url(images/tanitimbg.png);
    background-repeat:repeat-x;
    margin-top:3px;
    }

    tanitimbg.png olarak atanmış olan arka planın opaklığını nasıl değiştirebilirim.? nasıl bi seçici kullanmam lazım. bi yardımcı olurmusun?

Bir Cevap Yazın

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