กำหนด selector โดย ลำดับ

ใน CSS เราสามารถกำหนดตำแหน่งการใช้ element ได้โดยการอาศัยลำดับที่ไล่เรียงกันมา

<div id=”bdiv”>
<h2>หัวข้อที่ 1</h2>
<p>ย่อหน้าที่ 1</p>
<p>ย่อหน้าที่ 2</p>
<div id=”bwork”>
<h2>หัวข้อที่ 2 </h2>
<p>เนื้อหาส่วนที่ 2</p>
</div>
</div>
สิ่งเพิ่มเติมที่ 9.12 เมื่อเราใช้ การเรียงลำดับคำสั่งเพื่อจัดรูปแบบ โดยอาศัยความสัมพันธ์กันระหว่าง element โดยในที่นี้?? p element ก็จะได้รับผลมาจาก div ที่ชื่อ bdiv และ p element ที่อยู่ใน div? ที่ชื่อ bwork ด้วยเช่นกัน

การเลือกใช้ selector โดยอาศัยการเรียงลำดับ
1.พิมพ์? element ลำดับสูงสุดที่เราต้องการให้มีผลพร้อมทั้งชื่อของ element นั้นด้วย
2.เคาะ space bar 1ที
3.ถ้าต้องการสามารถพิมพ์ ข้อ 1 และ 2 ซ้ำได้อีกเพื่อให้ element อื่นๆมีผลด้วย
4.พิมพ์ element ลำดับล่างสุดที่เราต้องการให้มีผลจริงๆ กับ element นั้นๆ

div#bdiv p { color: red;}
สิ่งเพิ่มเติมที่ 9.13 การเขียน div#bdiv ให้เป็น element ลำดับที่สูงที่สุดที่เราต้องการให้มีผลเฉพาะใน div ที่ชื่อ bdiv เท่านั้น โดยที่ จะมีผลต่อ p element ที่ปรากฏภายใต้ bdiv เท่านั้น


สิ่งเพิ่มเติมที่ 9.14 เราจึงจะเห็นได้ว่า ทุก p element ที่อยู่ภายใต้ div ที่ชื่อ bdiv นั้น จะปรากฏเป็นสีแดง รวมทั้งที่อยู่ใน div ที่มี class bwork ด้วย ทั้งนี้เพราะว่า bwork เป็น child ของ bdiv อีกทีนึงนั่นเอง

เพิ่มเติม
- selector ที่เรียกใช้งานจากชื่อของ element ที่สูงสุด มีชื่อเรียกว่า descendant selector
- อย่าจำ div#bdiv เอาไปใช้นะครับ เวลาเอาใช้ใช้จริงก็ขอให้เข้าใจว่ามันคืออะไรแน่ จากตัวอย่าง div#bdiv นั้นหมายความว่าเป็นส่วนของ div ที่มี id ที่ชื่อ bdiv นั่นเอง และ div#bdiv p หมายความว่า p element ที่ปรากฏภายใต้ div ที่ id bdiv นั่นเอง

การเลือก element โดยอาศัยการลำดับ (parent , child)
1. พิมพ์ parent โดยที่ parent เป็นชื่อของ element
2. พิมพ์ > (เครื่องหมายมากกว่า)
3.จะทำข้อที่ 1,2 ซ้ำอีกทีก็ได้ถ้าต้องการ
4. พิมพ์ child โดยที่ child หรือ element ที่มีปรากฏอยู่ภายใต้ parent element

div#bdiv > p { color: red;}
สิ่งเพิ่มเติมที่ 9.15 อย่างนี้จะหมายความว่า จะให้มีผลต่อเฉพาะ tag p ที่ปรากฏภายใต้ div ที่ชื่อ bdiv เท่านั้น โดยหาก? p element ที่ปรากฏภายใต้ element อื่น ที่อยู่ย่อยใน div bdiv อีกก็จะไม่มีการเปลี่ยนแปลงใดๆ

เพิ่มเติม
- selector ที่ทำงานในแบบ child , parent เราเรียกว่า child selector
- internet explorer 5.5 และ 6 สำหรับ windows ไม่สามารถใช้งาน child selector ได้ แต่ว่า internet explorer 7 สามารถทำงานได้


สิ่งเพิ่มเติมที่ 9.16 จะแสดงสีเฉพาะ p element ที่เป็น child ของ bdiv เท่านั้น ส่วน p element ที่อยู่ใน bwork จะไม่แสดงสีออกมา

วิธีกำหนด element เพื่อจัดรูปแบบของ element แรกเท่านั้น
1. พิมพ์ parent โดยที่ parent คือตัว selector ที่เราจะเอามาเป็นหลัก
2. พิมพ์ :first-child

div#bdiv p:first-child { color: red;}
สิ่งเพิ่มเติมที่ 9.17 การแสดงผล ที่จะมีผลต่อ element แรกเท่านั้น

No comments yet.
You must be logged in to post a comment.