6.DIRECT CHILD SELECTOR
จะมีผลเฉพาะ Element ที่อยู่ภายในโดยตรงเท่านั้น
มันเป็นการบอกว่า <me>Teg ที่ซ้อนอยู่ภายใน <div>Tagเท่านั้นที่จะถูกทำให้เป็นสีฟ้า ซึ่งวิธีนี้ Direct Child Selector อาจะดูคล้ายกับวิธีที่เคยพูดมาแล้วในเรื่องที่ 4 Contextural Selector จากตัวอย่างต่อไปจะให้เห็นความแตกต่างของสองตัวนี้
- แบบ Cotextual จะมีผลกับทุก Elelment ที่อยู่ภายในทั้งหมด โดยไม่สนใจว่า Element นั้นจะอยู่ภายในสิ่งอื่นอีกหรือไม่ เช่น CSS นี้ จะทำให้พารากราฟในตัวอย่างนี้เป็นสีเดียวกันทั้งหมด
- แบบ Direct Child จะมีผลเฉพาะส่วนที่เป็นของตัวเองเท่านั้น ดังนั้นจะมีเฉพาะสองพารากราฟแรกเท่านั้นส่วน Hello world 3 จะไม่มีผล
7.ADJACENT SIBLING SELECTOR
เฉพาะ Element ที่วางติดกันเท่านั้น เช่นใน ตัวอย่าง <h1> และ <h2> ที่อยู่ติดกันเท่านั้น ที่จะถูกทำให้เป็นสีฟ้า ต่างจาก Direct Child Selector (ข้อ 6 ) ที่ตัวหนึ่งเป็นแม่และอีกตัวหนึ่งเป็นลูก แต่กรณีนี้ทั้งสอง Tag เป็นอิสระต่อกัน
8.UNIVERSAL SELECTOR
หมายถึง Element ใดๆ ก็ได้ใช้สัญลักษณ์ * ตัวอย่างเช่น ต้องการให้ทุก Element ต้องเริ่มที่ตำแหน่ง 0 และไม่มีการเว้นช่องว่างใด้ๆ การกำหนดเช่นนี้ เนื่องจากทุกๆ Tag มีค่า Default จากระบบอยู่ และจะนำมาใช้ทันทีหากไม่มีการกำหนดค่าให้ใหม่ ดังนั้นหากเราต้องการที่จะให้ทุกๆ Tag มีค่าเริ่มต้นตามที่เรากำหนดเอง และปรับเปลี่ยนใหม่ทีหลังเพื่อเปลี่ยนเฉพาะบางส่วนที่ต้องการ
ตัวอย่างเช่น ต้องการให้ทุก Element ภายใต้ Box นั้นเป็นแบบเดียวกันทั้งหมด
9.ATTRIBUTE SELECTOR
เป็น Selector ที่บอกรายละเอียด Attribute ประกอบเข้าไป โดยส่วนของ Attribute แต่ละตัวจะอยู่ภายในวงเล็บ [ ] การกำหนดแบบนี้มีผู้ใช้งานค่อนข้างน้อย
- กำหนดอย่างกว้างๆเพื่อ ให้มีผลกับหลายๆ Element
- กำหนดอย่างชัดเจนทั้งหมดลงไป เพื่อให้ มีผลกับ Tag เฉพาะอัน
- กำหนดโดยใช้สัญลักษณ์
เป็นอย่างไรกันบ้างครับ หลังจากที่ได้ลองดูหลักการ Syntax ทั้ง 9 อันของ CSS มันไม่ยากเลยใช้ไหมครับ ฮ่าๆ ลองไปปรับใช้ดูครับ” มือโปรล้วนเป็นมือใหม่มาก่อนทั้งนั้น” สำหรับบทความนี้ก็ขอจบเพียงเท่านี้ขอบคุณที่เข้ามารับชม แล้วเจอกันบทความต่อไป
