CSS :nth-of-type() โปรไซเจอร์

กำหนดและวิธีใช้

CSS :nth-of-type(n) โดยมีชื่อแบบองค์ประกอบเดียวกัน (ตามแบบนามทางเทคนิค) n โปรไซโมไพล์เป็นการเลือกองค์ประกอบที่เป็นลูกขององค์ประกอบพ่อที่เป็น

n สามารถเป็นตัวเลข/ดัชนี หรือ คำที่ใช้เรียก (odd หรือ even) หรือ สูตร (เช่น an + b)

คำแนะนำ:ดู :nth-child() โปรไซโมไพล์เป็นการเลือกองค์ประกอบที่เป็นลูกขององค์ประกอบพ่อที่เป็น n เป็นองค์ประกอบลูกขององค์ประกอบใดๆ ไม่ว่าชื่อองค์ประกอบเท่าไร

ตัวอย่าง

ตัวอย่าง 1

ทางใช้ :nth-of-type() เลือกตัวตัวเลือก:

/* เลือกองค์ประกอบที่เป็น div พี่น้องที่สอง */
div:nth-of-type(2) {
  background: red;
}
/* เลือกองค์ประกอบ li ที่เป็นลูกที่สองในรายการ */
li:nth-of-type(2) {
  background: lightgreen;
}
/* เลือกองค์ประกอบที่เป็นฉันท์ที่สามในแต่ละกลุ่มพี่น้อง */
:nth-of-type(3) {
  background: yellow;
}

ลองเดาเอง

ตัวอย่าง 2

odd และ even เป็นคำที่ใช้เพื่อตรวจสอบองค์ประกอบที่ดัชนีเป็นฉันท์หรือฉันท์แบบคู่ (องค์ประกอบลูกแรกมีดัชนี 1)

ที่นี่ เรากำหนดสีพื้นหลังที่แตกต่างกันสำหรับองค์ประกอบ <p> ที่ดัชนีเป็นฉันท์หรือฉันท์แบบคู่:

p:nth-of-type(odd) {
  background: red;
}
p:nth-of-type(even) {
  background: blue;
}

ลองเดาเอง

ตัวอย่าง 3

ใช้สูตร (an + b) รายละเอียด:a หมายถึงค่าเลขทศนิยมเพิ่มเติม หรือหลายค่าเลขทศนิยมเพิ่มเติม ที่เริ่มต้นด้วย 0b เป็นค่าเลขทศนิยมเพิ่มเติม

ที่นี่ เรากำหนดสีพื้นหลังสำหรับองค์ประกอบ <p> ที่ดัชนีเป็นเลขทศนิยมเท่ากับ 3 (จะเลือกชิ้นที่สาม หก แปด และอื่นๆ):

p:nth-of-type(3n+0) {
  background: red;
}

ลองเดาเอง

ตัวอย่าง 4

ที่นี่ เรากำหนดสีพื้นหลังสำหรับองค์ประกอบ <p> ที่ดัชนีเป็นเลขทศนิยมเท่ากับ 3 หลังจากที่ลบ 1 (จะเลือกชิ้นที่สอง ห้า แปด และอื่นๆ):

p:nth-of-type(3n-1) {
  background: red;
}

ลองเดาเอง

ระบบการเขียน CSS

:nth-of-type(index | ฉันท์ | ฉันท์แบบคู่ | an+b) {
  declarations ของ css;
}

รายละเอียดเทคนิค

การสนับสนุนของบราวเซอร์

ตัวเลขในตารางชี้ถึงเวอร์ชันบราวเซอร์แรกที่สนับสนุนโปรไซโมไพล์นี้เต็มทั้งหมด。