Contextual selectors

Contextual selectors การประกาศ class หรือ id ซ้อนกัน โดยเคาะ spacebar ดังตัวอย่าง

p ul{
background:#000000;
}

แปลว่า ul ที่อยู่ใน p จะมีแบ็คกราวด์ เป็นสีดำ
ส่วน
ul อื่นๆ ถ้าไม่อยู่ใน
p ก็จะเป็นปกติ

ใช้ในกรณีไหนล่ะ? ก็เช่นว่า เมื่อคุณสร้างขอบเขต div มา 1 อัน ต้องการทำเป็น กล่องสำหรับ content ประกอบด้วย thumbnail และเนื้อหานิดหน่อย สมมติว่า คุณต้องการให้รูป ในกล่องนี่มี border 2 px สีเทา โดยไม่ไปกระทบรูปอื่นๆทั้งหมดใน page ทำไงล่ะ คุณอาจจะเขียน class ขึ้นมาว่า

.borderimage{
border-width:2px;
border-color:grey;
}

แล้วใส่ คลาส นี้ ไปในทุกรูป ที่คุณต้องการให้มี border แต่จะดีกว่านั้น หากเราเขียนแบบนี้

#contentbox img{
border-width:2px;
border-color:grey;
}

เท่านี้ รูป ทุกรุป ที่อยู่ในขอบเขต

<div id=”contentbox”>
<img>
<img>
</div>

ก็จะมี border 2px สีเทา แบบนี้ทำให้คุณลดการโค้ดลงกว่าเดิม คุณสามารถเขียน ซ้อนกัน 3 หรือ 4 ชั้น ได้ ไม่มีปัญหา ถ้าคุณจะไม่งงซะเอง

Related Articles

• เริ่มต้นด้วย Selectors (0)
• Pseudo-classes and Pseudo-elements (2)
• Inheritance & comment (0)
• Grouping (0)
• Class,ID selectors (3)