CSS: Seçiciler (21 ~ 30)

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

• X:nth-child(n)
• X:nth-last-child(n)
• X:nth-of-type(n)
• X:nth-last-of-type(n)
• X:only-child
• X:only-of-type
• X:first-child
• X:last-child
• X:first-of-type
• 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ğiIE9+, 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ğiIE9+, 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ğiIE9+, 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ğiIE9+, 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ğiIE9+, 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ğiIE9+, 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ğiIE7+, 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ğiIE7+, 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ğiIE9+, 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ğiIE9+, Firefox 3.5, Chrome, Safari, Opera