หลายคนอาจจะไม่ค่อยสนใจเท่าไหร่ว่า ลักษณะการเขียน CSS Selector ที่ใช้อยู่นั้นมันเรียกว่าการเขียนแบบไหน รู้แค่เพียงว่ามันใช้ประโยชน์ อย่างไรและเขียนแบบนี้แล้วแสดงผลแบบนั้นเป็นสำคัญ โดยหลักๆ แล้ว Class Selector (.) และ ID Selector (#) มักจะถูกนำมาใช้งานมากและบ่อยที่สุดก็น่าจะว่าได้ แล้ว Selector แบบอื่นที่เราเห็นหละ มันเรียกว่าอย่างไร มีหลักการใช้งานยังไงกันบ้าง
ตอนนี้ผมจะขอยกตัวอย่างการเขียน CSS ในการควบคุมการแสดงผลของ Navigation แล้วขออธิบายเป็นลำดับไปนะครับ โดยในที่นี้อยากจะเน้นไปที่การเขียน CSS แบบ Descendant selectors เป็นหลัก แต่ไม่ได้หมายความว่าผมจะละเลยการอธิบายเรื่องราวการเขียน CSS ในรูปแบบอื่นๆ ไป
Descendant selectors คือการเขียน CSS แบบสืบทอดคุณสมบัติตามแบบฉบับลูกหลานของ Element ใดๆ ที่อยู่ภายใต้ Element หลักที่เราสั่งงาน เช่นตัวอย่างต่อไปนี้จะแสดงถึง h1 ซึ่งเป็น ลูกของ div จะทำงานก็ต่อเมื่อ อยู่ใน div เท่านั้น
ตัวอย่างที่ 1
div h1 {
color: #ff9900;
}จะเห็นได้ว่า h1 นั้นแสดงผลออกมาเป็นสี #ff9900 หรือสีส้มนั่นเอง
Descendant สามารถมีได้ทั้งเป็น คลาส และ ไอดี กล่าวคือ เราสามารถกำหนด div ให้มี คลาส หรือไอดีแล้วก็เขียน css แบบ Descendant ตามได้ เช่น
ตัวอย่างที่ 2
div#navigation h1 {
color: #ff9900;
}ในกรณีนี้ h1 ในหน้านั้นๆ จะแสดงผลเป็นสีส้มก็ต่อเมื่ออยู่ใน div#navigation เท่านั้น ถือได้ว่าเรามีลักษณะารเขียน CSS ที่เป็น ID Selector เข้ามาผสมผสานอีกแบบ ไม่เพียงแค่ id เท่านั้น เรายังสามารถใช้ คลาส (.) ทดแทนได้ หากไม่ต้องการใช้ ไอดี (#) หากใครยังสงสัยว่าต่างกันยังไง เดี๋ยวผมจะกลับมาเขียนเรื่อง Class Selector และ ID Selector อีกรอบครับ
เป็นบทควาที่ดีครับ อ่านแล้วทำให้เข้าใจตัว css มากครับ ขอบคุณมากครับ มีแหล่งความรู้ดี ๆ ที่สมควรจะอ่านให้เกิดรอยยักในสมองของเรา
สุ้ๆ สุ้ตายยคร้าบบ
^-^ Yo Yo
รอบทความอันต่อไปคับพี่ อยากรู้เหมือนกันว่าไอ้ที่พี่อธิบายไว้ใน board มันเรียกว่าอะไร
กลับมาแล้วเหรอครับพี่
ปล. พี่พรครับ โดเมน mcmsu.com เป็นอะไรอ่ะครับ
มีเด็กเขียนเกี่ยวกับเรื่องนี้จะลงอยู่นะ แต่อาจารย์เขียนแล้วก็ยกไปละกัน
รอย้าย DNS ใหม่ หวะไอซ์