ตัวเลือก CSS ใดที่สามารถใช้เพื่อเลือก div แรกภายใน div อื่น

97

ฉันมีสิ่งที่ชอบ:

<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>

ตัวเลือก css สำหรับ div ที่สองคืออะไร (div ที่ 1 ภายใน div "content") เพื่อให้ฉันสามารถกำหนดสีฟอนต์ของวันที่ภายใน div นั้นได้

css css-selectors

— เกร็ก
แหล่งที่มา

1

โปรดยอมรับคำตอบที่ได้รับการโหวตสูงสุดว่าถูกต้องแน่นอน

— Barry Michael Doyle

230

คำตอบที่ถูกต้องที่สุดสำหรับคำถามของคุณคือ ...

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

สิ่งนี้จะนำ CSS ไปใช้กับ div แรกที่เป็นลูกโดยตรงของ #content (ซึ่งอาจเป็นองค์ประกอบลูกแรกของ #content หรือไม่ก็ได้)

อีกทางเลือกหนึ่ง:

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

— Jeremy Moritz
แหล่งที่มา

6

ยอมรับว่าเป็นคำตอบเดียวที่ถูกต้องสำหรับคำถามและควรได้รับการยอมรับ

— Ilya Streltsyn

ช่วยบอกวิธีเลือก div ทั้งหมดexceptก่อน / สุดท้ายได้ไหม

— Tân

5

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

— Jeremy Moritz

@ Tânถ้าคุณต้องการ div ทั้งหมดยกเว้นตัวแรกและตัวสุดท้ายมันจะเป็น ... #content > div:not(:first-of-type):not(:last-of-type) { /* css */ }

— Jeremy Moritz

21

คุณต้องการ

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

— นาวาเอกโอทิส
แหล่งที่มา

3

จะไม่ทำงานเพราะ<div>ไม่ใช่ลูกคนแรก (มัน<h1>)

— Josh Leitzel

ไม่ต้องพูดถึงมันจะใช้ไม่ได้เลยใน IE แม้ว่าวันdivนั้นจะเป็นลูกคนแรกก็ตาม

— Valentin Flachsel

1

จริงๆ? W3 กล่าวว่าจะตราบเท่าที่มีการระบุประเภทหลัก (ฉันไม่รู้จริงๆ)

— Josh Leitzel

3

เพิ่งทำการทดสอบแน่นอนว่าจะใช้งานได้หากมีการระบุประเภทของหลัก ในการป้องกันของฉันฉันจะไม่แปลกใจเลยถ้าสิ่งต่างๆเริ่มทำงานใน IE ถ้าคุณพิมพ์ <the_cake_is_a_lie> ที่ด้านบนของไฟล์ ...

— Valentin Flachsel

1

ฉันมักจะทดสอบก่อนโพสต์คำตอบ และเค้กเป็นเรื่องโกหก

— Capt Otis

16

ถ้าเราสามารถสันนิษฐานได้ว่า H1 จะอยู่ที่นั่นเสมอ

div h1+div {...}

แต่อย่ากลัวที่จะระบุ id ของ div เนื้อหา:

#content h1+div {...}

นั่นเป็นเรื่องที่ดีพอ ๆ กับที่คุณสามารถใช้งานข้ามเบราว์เซอร์ได้โดยไม่ต้องใช้ไลบรารี JavaScript เช่น jQuery การใช้ h1 + div ช่วยให้มั่นใจได้ว่าเฉพาะ div แรกหลังจาก H1 เท่านั้นที่ได้รับสไตล์ มีทางเลือกอื่น แต่ต้องพึ่งพาตัวเลือก CSS3 ดังนั้นจึงใช้ไม่ได้กับการติดตั้ง IE ส่วนใหญ่

— สแตนโรเจอร์ส
แหล่งที่มา

+1. ไม่ได้คิดเรื่องนั้น โปรดทราบว่าโซลูชันนี้ใช้ไม่ได้ใน IE6

— Josh Leitzel

5

สิ่งที่ใกล้เคียงที่สุดกับสิ่งที่คุณกำลังมองหาคือ: pseudoclass ลูกคนแรก ; น่าเสียดายที่สิ่งนี้จะใช้ไม่ได้ในกรณีของคุณเนื่องจากคุณมี<h1>ไฟล์<div>s. สิ่งที่ฉันอยากจะแนะนำก็คือคุณอาจเพิ่มคลาสลงในสิ่งที่<div>ชอบ<div class="first">แล้วจัดสไตล์ให้เป็นแบบนั้นหรือใช้ jQuery หากคุณไม่สามารถเพิ่มคลาสได้:

$('#content > div:first')

— Josh Leitzel
แหล่งที่มา

1

สะกดผิด - ควรจะเป็น$('#content > div.first)

— Mateusz Odelga