การสร้าง 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คำสั่งนี้ในโอกาสต่อไปนะครับ
