2014-09-19 15 views
7

Belirli bir data- özniteliğine sahip bir öğenin ilk ve son çocuğunu seçmeye çalışıyorum.: öznitelik seçicisi çalışmayan son alt çocuk sözde sınıfı

:first-child seçicisi iyi çalışıyor, ancak :last-child çalışmıyor. Buna ne sebep olabileceğini ciddi olarak bilmiyorum. Yazım hataları için kontrol ettim. Belirli bir data- özniteliği ile bir elementin ilk ve son çocuğu seçmek çalışıyorum

.element[data-type='element']:first-child { 
    padding-left: 0; 
    background-color:red !important 
} 

.element[data-type='element']:last-child { 
    padding-right: 0; 
    border-right:0; 
    background-color:red !important; 
} 
+0

HTML yapınızın geri kalanına bağlı olarak, [': first of-type'] ile daha iyi şansınız olabilir (https://developer.mozilla.org/en-US/docs/Web/CSS/: ilk-tür) ve [': son-tür '] (https://developer.mozilla.org/en-US/docs/Web/CSS/:last-of-type). – showdev

+0

** İlk çocuk ** selektörünüzde '! Önemli 'ifadesinden sonra bir yarım virgül koymalısınız. Bu seçiciyi etkilemiyor (son kural olarak) ama bir sonraki durumu etkiliyor olabilir. – worldofjr

+0

Şans yok. Ben değişti: İlk ve: son çocuk için: ilk-tür ve: son-türü ama yine de aynı sorun. Ben de noktalı virgül ekledim, ama bunu düzeltmedi. – UserDy

cevap

8

CSS.

Alt satır, bunu CSS'de yapmanın bir yolu yoktur.

last-child (ve last-of-type) de, "son çocuk" ve "türü son çocuk", yani, onlar değil anlama geliyor "bir nitelik seçicisi dahil tüm seçici eşleşen en son çocuk". Sizin durumunuzda, üçüncü div'un aslında ana öğe içinde son çocuk (ya da son div) olmaması olasıdır; Ebeveyn öğesi ve tüm çocukları dahil olmak üzere tüm HTML'yi göstermediğiniz sürece bunu söylemek imkansız.

İlgili konular