การ Selector Div เฉพาะที่เราต้องการด้วยคำสั่งตระกูล child

css-selector

การสร้าง Div ทั่วไป

โดยปกติการใส่ค่าของ css ในแต่ละ div ก็จะเป็นการใส่ค่าตามชื่อ คลาส หรือ ไอดี ของ div นั้นๆ เช่น

.item { 
     background-color: black; 
} 

 
div ที่มีชื่อคลาสว่า item ทุก div ก็จะมีสีพื้นหลังเป็นสีดำทั้งหมด แต่ถ้าเกิดเราอย่างให้เฉพาะบางคลาสใน item ให้เป็นสีอื่นโดยไม่ต้องสร้างคลาสใหม่ขึ้นมา เราจะทำได้อย่างไร?

คำตอบคือ คำสั่งในตระกูล child นั้นเอง ซึ่งจะมีหลากหลายคำสั่งให้นำมาประยุกต์ใช้ได้ดังนี้

 

คำสั่ง first-child

เป็นคำสั่งที่ใช้สำหรับเลือกคลาสชื่อ item เฉพาะที่เป็นอันแรกสุดเท่านั้น

.item:first-child { 
     background-color: red; 
} 

 

คำสั่ง last-child

เป็นคำสั่งที่ใช้สำหรับเลือกคลาสชื่อ item เฉพาะที่เป็นอันท้ายสุดเท่านั้น

.item:last-child { 
     background-color: red; 
} 

 

คำสั่ง nth-child(even)

เป็นคำสั่งที่ใช้สำหรับเลือกคลาสชื่อ item เฉพาะที่เป็นเลขคู่ คือ 2,4,… เท่านั้น

.item:nth-child(even) { 
     background-color: red; 
} 

 

คำสั่ง nth-child(odd),

เป็นคำสั่งที่ใช้สำหรับเลือกคลาสชื่อ item เฉพาะที่เป็นเลขคี่ คือ 1,3,… เท่านั้น

.item:nth-child(odd) { 
     background-color: red; 
} 

 

คำสั่ง nth-child(3),

เป็นคำสั่งที่ใช้สำหรับเลือกคลาสชื่อ item เฉพาะตำแหน่งที่ระบุในวงเล็บเท่านั้น

.item:nth-child(3) { 
     background-color: red; 
} 

 

คำสั่ง nth-child(3n+1),

เป็นคำสั่งที่ใช้สำหรับเลือกคลาสชื่อ item เฉพาะตามสูตรที่กำหนดเท่านั้น

.item:nth-child(3n+1) { 
     background-color: red; 
} 

ตามตัวอย่าง 3n+1 หมายถึง

  • 3×0+1 = 1
  • 3×1+1 = 4
  • 3×2+1 = 7
  • 3x…+1 = …

ซึ่งในคำสั่งนี้จะสามารถปรับเปลี่ยนและประยุกต์ใช้ได้หลากหลายตามสูตรที่เรากำหนดนั้นเอง
 

เพิ่มเติม

ในส่วน tag บางตัวเช่น p หรือ i ถ้ามารวมกันบางครั้งจะทำให้nารใช้ nth-child มีการเลือกที่ผิดพลาดขึ้นได้ เราสามารถใช้ nth-of-type แทนได้ โดยปกติใน 2คำสั่งนี้จะใช้ได้คล้ายๆกัน ไว้จะมาอธิบายความแตกต่างของ 2คำสั่งนี้ในโอกาสต่อไปนะครับ

โดย: [K] Narongchai Suphiratwanich

นักพัฒนาเว็บไซต์ด้วยระบบเวิร์ดเพรส เป็นผู้ช่วยให้กับ Mennstudio และ เปิดธุรกิจเล็กๆ อยู่ในอำเภอปาย

สอบถาม & พูดคุย