Descendant selectors ของ CSS

หลายคนอาจจะไม่ค่อยสนใจเท่าไหร่ว่า ลักษณะการเขียน CSS Selector ที่ใช้อยู่นั้นมันเรียกว่าการเขียนแบบไหน รู้แค่เพียงว่ามันใช้ประโยชน์ อย่างไรและเขียนแบบนี้แล้วแสดงผลแบบนั้นเป็นสำคัญ โดยหลักๆ แล้ว Class Selector (.) และ ID Selector (#) มักจะถูกนำมาใช้งานมากและบ่อยที่สุดก็น่าจะว่าได้ แล้ว Selector แบบอื่นที่เราเห็นหละ มันเรียกว่าอย่างไร มีหลักการใช้งานยังไงกันบ้าง

ตอนนี้ผมจะขอยกตัวอย่างการเขียน CSS ในการควบคุมการแสดงผลของ Navigation แล้วขออธิบายเป็นลำดับไปนะครับ โดยในที่นี้อยากจะเน้นไปที่การเขียน CSS แบบ Descendant selectors เป็นหลัก แต่ไม่ได้หมายความว่าผมจะละเลยการอธิบายเรื่องราวการเขียน CSS ในรูปแบบอื่นๆ ไป

Descendant selectors คือการเขียน CSS แบบสืบทอดคุณสมบัติตามแบบฉบับลูกหลานของ Element ใดๆ ที่อยู่ภายใต้ Element หลักที่เราสั่งงาน เช่นตัวอย่างต่อไปนี้จะแสดงถึง h1 ซึ่งเป็น ลูกของ div จะทำงานก็ต่อเมื่อ อยู่ใน div เท่านั้น

ตัวอย่างที่ 1

จะเห็นได้ว่า h1 นั้นแสดงผลออกมาเป็นสี #ff9900 หรือสีส้มนั่นเอง

Descendant สามารถมีได้ทั้งเป็น คลาส และ ไอดี กล่าวคือ เราสามารถกำหนด div ให้มี คลาส หรือไอดีแล้วก็เขียน css แบบ Descendant ตามได้ เช่น

ตัวอย่างที่ 2

ในกรณีนี้ h1 ในหน้านั้นๆ จะแสดงผลเป็นสีส้มก็ต่อเมื่ออยู่ใน div#navigation เท่านั้น ถือได้ว่าเรามีลักษณะารเขียน CSS ที่เป็น ID Selector เข้ามาผสมผสานอีกแบบ ไม่เพียงแค่ id เท่านั้น เรายังสามารถใช้ คลาส (.) ทดแทนได้ หากไม่ต้องการใช้ ไอดี (#) หากใครยังสงสัยว่าต่างกันยังไง เดี๋ยวผมจะกลับมาเขียนเรื่อง Class Selector และ ID Selector อีกรอบครับ

Back to Top

0 Responses to Descendant selectors ของ CSS

  1. IcEsTea

    กลับมาแล้วเหรอครับพี่

     

     

     

     
    ปล. พี่พรครับ โดเมน mcmsu.com เป็นอะไรอ่ะครับ

    Reply

  2. พร อันทะ

    รอย้าย DNS ใหม่ หวะไอซ์

    Reply

  3. RookieDZ

    รอบทความอันต่อไปคับพี่ อยากรู้เหมือนกันว่าไอ้ที่พี่อธิบายไว้ใน board มันเรียกว่าอะไร

    Reply

  4. radiz

    มีเด็กเขียนเกี่ยวกับเรื่องนี้จะลงอยู่นะ แต่อาจารย์เขียนแล้วก็ยกไปละกัน

    Reply

  5. อัง

    ^-^ Yo Yo

    Reply

  6. arm

    สุ้ๆ สุ้ตายยคร้าบบ

    Reply

  7. jommann

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

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

Connect with Facebook

Back to Top