พิวด็อกลาส nth-of-type

พิวด็อกลาส nth-of-type เลือกองค์ประกอบ ที่เป็นลูกลำดับที่ n ของประเภทที่กำหนด

นั่นคือ ถ้าฉันเขียน h2:nth-of-type(4) - จะพบ h2 ตัวที่ 4 ในพ่อแม่ (ต่างจาก nth-child ซึ่งจะหาเฉพาะ h2 ที่เป็น องค์ประกอบลำดับที่ 4 ในพ่อแม่)

ไวยากรณ์

ตัวเลือก:nth-of-type(เลข | odd | even | นิพจน์){

}

ค่า

ค่า	คำอธิบาย
เลข	จำนวนเต็มบวกเริ่มจาก `1` กำหนดลำดับขององค์ประกอบ ที่ต้องการเลือก การนับลำดับองค์ประกอบเริ่มจาก `1`
`odd`	องค์ประกอบลำดับคี่
`even`	องค์ประกอบลำดับคู่
นิพจน์	สามารถเขียนนิพจน์พิเศษด้วยตัวอักษร n ซึ่งแทนจำนวนเต็มทั้งหมดตั้งแต่ศูนย์ (ไม่ใช่หนึ่ง) ถึงอนันต์ ดังนั้น `2n` - หมายถึงทุกเลขคู่ (เริ่มจากลำดับที่สอง) ทำความเข้าใจได้อย่างไร? แทนค่าใน `n` ด้วย ตัวเลขตั้งแต่ `0` เป็นต้นไป: ถ้า n = 0 แล้ว 2n จะได้ 0 - ไม่มีองค์ประกอบดังกล่าว (การนับองค์ประกอบเริ่มจาก 1) ถ้า n = 1 แล้ว 2n จะได้ 2 - องค์ประกอบลำดับที่สอง, ถ้า n = 2, 2n ได้ 4 - องค์ประกอบลำดับที่สี่ ถ้าเขียน 3n - นี่จะ เป็นทุกองค์ประกอบลำดับที่สาม (เริ่มจากลำดับที่สาม) เป็นต้น

ตัวอย่าง

หา h2 ที่เป็น h2 ตัวที่ 2 ในพ่อแม่:

<div>
	<h2>หัวเรื่อง</h2>
	<p>ย่อหน้า</p>
	
	<h2>หัวเรื่อง</h2>
	<p>ย่อหน้า</p>
	
	<h2>หัวเรื่อง</h2>
	<p>ย่อหน้า</p>
</div>

h2:nth-of-type(2) {
	color: red;
}

ตัวอย่าง

หา h2 ลำดับคู่ทั้งหมด:

<div>
	<h2>หัวเรื่อง</h2>
	<p>ย่อหน้า</p>
	
	<h2>หัวเรื่อง</h2>
	<p>ย่อหน้า</p>
	
	<h2>หัวเรื่อง</h2>
	<p>ย่อหน้า</p>
	
	<h2>หัวเรื่อง</h2>
	<p>ย่อหน้า</p>
	
	<h2>หัวเรื่อง</h2>
	<p>ย่อหน้า</p>
</div>

h2:nth-of-type(even) {
	color: red;
}

ตัวอย่าง

หา h2 ลำดับคี่ทั้งหมด:

<div>
	<h2>หัวเรื่อง</h2>
	<p>ย่อหน้า</p>
	
	<h2>หัวเรื่อง</h2>
	<p>ย่อหน้า</p>
	
	<h2>หัวเรื่อง</h2>
	<p>ย่อหน้า</p>
	
	<h2>หัวเรื่อง</h2>
	<p>ย่อหน้า</p>
	
	<h2>หัวเรื่อง</h2>
	<p>ย่อหน้า</p>
</div>

h2:nth-of-type(odd) {
	color: red;
}