Başka bir div içindeki ilk div'i seçmek için hangi CSS seçici kullanılabilir?

97

Bende şöyle bir şey var:

<div id="content>

   <h1>Welcome to Motor City Deli!</h1>
   <div style=" font-size: 1.2em; font-weight: bolder;">Sep 19, 2010</div>
   <div > ... </div>

İkinci div ("içerik" div içindeki 1. div) için css seçici nedir ki bu div içindeki tarihin yazı tipi rengini ayarlayabilir miyim?

css css-selectors

— GregH
kaynak

1

Lütfen en çok oylanan cevabı kabul edin, kesinlikle doğru.

— Barry Michael Doyle

230

Sorunuza EN DOĞRU cevap ...

#content > div:first-of-type { /* css */ }

Bu, CSS'yi #content öğesinin doğrudan alt öğesi olan ilk div'e uygular (bu, #content öğesinin ilk alt öğesi olabilir veya olmayabilir)

Başka seçenek:

#content > div:nth-of-type(1) { /* css */ }

— Jeremy Moritz
kaynak

6

Bunun sorunun YALNIZCA doğru cevabı olduğunu ve kabul edilmesi gerektiğini kabul edin.

— Ilya Streltsyn

Tüm div exceptilk / son div'i nasıl seçeceğimi söyleyebilir misiniz ?

— Tan

5

@HappyCoding #content > div:not(:last-of-type) { /* css */ }

— Jeremy Moritz

@ Tân, ilk VE son hariç tüm div'leri istiyorsanız, bu ... #content > div:not(:first-of-type):not(:last-of-type) { /* css */ }

— Jeremy Moritz

21

İstediğiniz

#content div:first-child {
/*css*/
}

— Kaptan Otis
kaynak

3

İşe yaramayacak çünkü <div>ilk çocuk değil (o <h1>).

— Josh Leitzel

Randevu divilk çocuk olsa bile IE'de hiç işe yaramayacağından bahsetmiyorum bile .

— Valentin Flachsel

1

Gerçekten mi? W3, bir belge türü belirtildiği sürece olacağını söylüyor. (Dürüst olmak gerekirse bilmiyorum.)

— Josh Leitzel

3

Sadece bir test yaptım, aslında doctype belirtilmişse çalışıyor. Savunmam gerekirse, dosyanın tepesine <the_cake_is_a_lie> yazarsanız, IE'de işler çalışmaya başlarsa şaşırmam ...

— Valentin Flachsel

1

Bir cevap göndermeden önce her zaman test ederim. Ve pasta bir yalan.

— Kaptan Otis

16

H1'in her zaman orada olacağını varsayabilirsek,

div h1+div {...}

ancak içerik div'in kimliğini belirtmekten korkmayın:

#content h1+div {...}

Bu, jQuery gibi bir JavaScript kitaplığına başvurmadan şu anda çapraz tarayıcı alabileceğiniz kadar iyidir. H1 + div kullanmak, yalnızca H1'den sonraki ilk div'in stili almasını sağlar. Alternatifler var, ancak CSS3 seçicilerine güveniyorlar ve bu nedenle çoğu IE kurulumunda çalışmayacaklar.

— Stan Rogers
kaynak

+1. Bunu düşünmedim bile. Bu çözümün IE6'da çalışmayacağını unutmayın.

— Josh Leitzel

6

Aradığınız şeye en yakın şey : birinci-çocuk sözde sınıfı ; maalesef bu sizin durumunuzda işe yaramayacak çünkü daha <h1>önce bir <div>s. Önereceğim şey, ya <div>beğendiğinize bir sınıf eklemeniz <div class="first">ve sonra bu şekilde biçimlendirmeniz ya da gerçekten bir sınıf ekleyemiyorsanız jQuery kullanmanızdır:

$('#content > div:first')

— Josh Leitzel
kaynak

1

yanlış yazım - olmalı$('#content > div.first)

— Mateusz Odelga