Css'de Nth-child Sorunu

23-06-2014, 09:25:25

Öncellikle merhaba,

Düzenlediğim temamda nth-child ile istediğim divi seçemiyorum.

Aşağıdaki döngü içerisinde konuları listeletiyorum.

<div class="konu">
                <h6>
                    <i class="down icon-long-arrow-down"></i>
                    <a href="#">Deneme Başlık</a>
                    <span class="time"> <i class="icon-time"></i> 28 dakika önce</span>
                    <span class="more"><i class="icon-plus"></i></span>
                </h6>
                <div class="question-detail">
                    <ul>
                        <li> <i class="icon-user"></i> <a href="#">Hayri</a> tarafından soruldu.</li>
                        <li> <i class="icon-comment"></i> 3 cevap yazıldı.</li>
                        <li> <i class="icon-search"></i> 22 kez görüntülendi.</li>
                        <li> <i class="icon-star"></i> 1 puan verildi.</li>
                    </ul>
                </div>
            </div>

İlk 3 konunun saat kısmı (28 dakika önce) yazısının renginin sarı olmasını istiyorum. Css'de nth-child görevi itibariyle aşağıdaki şekilde kullanıyorum.

.konu h6 span.time:nth-child(-n+3) {color: yellow;}

Ama istediğim olmuyor. Tüm başlıklar sarı oluyor. Başka bir nth-child özelliğini denediğimde onlar hiçten çalışmıyor. Sorun nerededir acaba?

23-06-2014, 10:15:16

#2

loc

nth-child özelliği birbirini tekrar eden ve arada başka katman olmayan katmanlara uygulayabilirsiniz. Yani katmanlarınız:

<div class="konu"></div>
<div class="konu"></div>
<div class="konu"></div>
<div class="konu"></div>
<div class="konu"></div>
<div class="konu"></div>

Şeklinde devam eder ve aralarına herhangi bir katman sokmazsanız çalışır. Çünkü araya katman koyduğunuz anda tekrarın sonlandığını anlayıp çalışmayı durdurur. Sizin yaptığınız div katmanının içinde başka bir class üzerinde işlem yapmak. Hiç denemedim çalışır mı bilmiyorum fakat aşağıdaki gibi denemenizi tavsiye ederim.

.konu:nth-child(-n+3) h6 span.time {color: yellow;}

23-06-2014, 12:56:42

#3

rws

h6 span:nth-child(3){color: yellow;}

yada

h6 span:nth-last-child(2){color: yellow;}

bu şekilde
n rakam anlamını ifade eder; n kullanılmaz

24-06-2014, 11:25:51

#4

hgtucel

loc adlı üyeden alıntı: mesajı görüntüle

nth-child özelliği birbirini tekrar eden ve arada başka katman olmayan katmanlara uygulayabilirsiniz. Yani katmanlarınız:

<div class="konu"></div>
<div class="konu"></div>
<div class="konu"></div>
<div class="konu"></div>
<div class="konu"></div>
<div class="konu"></div>

Şeklinde devam eder ve aralarına herhangi bir katman sokmazsanız çalışır. Çünkü araya katman koyduğunuz anda tekrarın sonlandığını anlayıp çalışmayı durdurur. Sizin yaptığınız div katmanının içinde başka bir class üzerinde işlem yapmak. Hiç denemedim çalışır mı bilmiyorum fakat aşağıdaki gibi denemenizi tavsiye ederim.

.konu:nth-child(-n+3) h6 span.time {color: yellow;}

Evet hocam. Sorun dediğinizi gibiymiş. Yukarıdaki verdiğiniz kodla sorun düzeldi. Teşekkürler.