สามารถนับได้ และเลขลำดับจะเป็นอันดับที่สาม (ลูกคนที่สามของผู้ปกครอง - ในการจัดสไตล์องค์ประกอบเหล่านี้ เราจำเป็นต้องใช้คลาสหลอก :ลูกคนที่ n.

มาดูตัวอย่างกัน:

ส่วนหัว h2 แรกของแท็ก body

• หนึ่ง
• สอง
• สาม

ส่วนหัว h2 ที่สองของแท็ก body

:ลูกคนที่ nเราจัดสไตล์องค์ประกอบ

และ

ซึ่งมีองค์ประกอบลูกลำดับเฉพาะภายในองค์ประกอบหลัก

ผลลัพธ์ของตัวอย่างของเรา:

จัดแต่งทรงผมตามคำสำคัญ

เป็นค่าคลาสหลอก :เด็กคนที่ n()ซึ่งอาจรวมถึงไม่เพียงแต่หมายเลขลำดับขององค์ประกอบย่อยที่ต้องจัดสไตล์ แต่ยังรวมไปถึงคีย์เวิร์ดที่สามารถกำหนดองค์ประกอบทั้งกลุ่มได้ คุณสามารถใช้สองค่าสำหรับคำหลัก:

• คู่ (องค์ประกอบคู่)
• คี่ (องค์ประกอบคี่)

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

มาสร้างตารางง่ายๆ สองตารางที่มีคลาสสไตล์ที่แตกต่างกันเป็นตัวอย่าง และเห็นภาพความแตกต่างในการใช้ค่าคีย์เวิร์ดหลอกคลาส :ลูกคนที่ nสำหรับองค์ประกอบ HTML ซึ่งกำหนดแถวของตาราง:

มูลค่าคู่ (คู่)

1 บรรทัด	ตำแหน่ง	ปริมาณ
2 บรรทัด
3 บรรทัด
4 บรรทัด
5 บรรทัด

ค่าแปลก

1 บรรทัด	ตำแหน่ง	ปริมาณ
2 บรรทัด
3 บรรทัด
4 บรรทัด
5 บรรทัด

ในตัวอย่างนี้ใช้คลาสหลอก :เด็กคนที่ n()เรามีสไตล์ สม่ำเสมอแถวของตารางแรก (elements ) และ แปลกในตารางที่สอง

จัดแต่งทรงผมโดยใช้สูตรทางคณิตศาสตร์อย่างง่าย

คลาสหลอก :เด็กคนที่ n()ช่วยให้คุณสามารถเลือกองค์ประกอบคู่คี่หรือลูกด้วยหมายเลขซีเรียลที่แน่นอน แต่ยังเลือกองค์ประกอบลูกที่ระบุโดยสูตรทางคณิตศาสตร์เบื้องต้นด้วย ลองดูที่ตัวเลือกต่อไปนี้และทำความเข้าใจว่ารายการนี้หมายถึงอะไร:

td:ลูกคนที่ n(4n+2)

) ภายในบรรทัด โดยเริ่มจากเซลล์ตารางที่สอง จะมีสไตล์:

• 4น– ทุกองค์ประกอบที่สี่
• 2

ในสูตร คุณสามารถใช้ค่าที่มีเครื่องหมายลบได้ แต่โดยทั่วไปไม่จำเป็น:

td: เด็กคนที่ n (4n-1)( สีพื้นหลัง: สีฟ้าอ่อน; /* กำหนดสีพื้นหลัง */ )

ตัวเลือกนี้หมายความว่าทุกๆ เซลล์ตารางที่สี่ ( ) ภายในแถว โดยเริ่มจากเซลล์ที่สามของตาราง (ไม่มีเซลล์ -1 ด้วยเหตุผลวัตถุประสงค์ ดังนั้นจึงมีการเลื่อนไปทางซ้าย) จะมีสไตล์:

• 4น– ทุกองค์ประกอบที่สี่
• -1 – องค์ประกอบใดที่จะเริ่มต้นด้วย

ลองดูตัวอย่างการใช้งาน:

1	2	3	4	5	6	7	8	9	10	11	12	13	14
2
3
4

ในตัวอย่างนี้ โดยใช้ pseudo-class:nth-child เราได้เลือกและจัดสไตล์ทุก ๆ เซลล์ตารางที่สี่ ( ) ภายในแถว โดยเริ่มจากเซลล์ตารางที่สอง ผลลัพธ์ของตัวอย่างของเรา:

basicweb.ru

ตัวเลือกลูกที่ n ของ CSS ทำงานอย่างไร

ใน CSS มีตัวเลือกหรือตัวเลือกหลอกเพื่อให้แม่นยำยิ่งขึ้นเรียกว่า nth-child ตัวอย่างการใช้งาน:

Ul li:nth-child(3n+3) ( color: #ccc; )

CSS ข้างต้นทำสิ่งต่อไปนี้: ใช้สไตล์กับทุก ๆ สามรายการในรายการที่ไม่เรียงลำดับ คือวันที่ 3, 6, 9, 12 เป็นต้น แต่มันทำงานอย่างไร? และยังสามารถได้รับประโยชน์อะไรบ้างจากการใช้ n-child ?

ความหมายหลักอยู่ในการแสดงออกในวงเล็บ nth-child ยอมรับคำสำคัญสองคำ: สม่ำเสมอ(แม้) และ แปลก(แปลก). ความหมายของพวกเขาชัดเจนอย่างยิ่ง แม้แต่เลือกองค์ประกอบคู่ (2, 4, 6) คี่เลือกองค์ประกอบคี่ (1, 3, 5)

ดังที่แสดงในตัวอย่างข้างต้น เด็กที่ n สามารถประมวลผลนิพจน์ได้ นิพจน์ที่ง่ายที่สุดที่เป็นไปได้คืออะไร? แค่ตัวเลข. หากคุณเขียนตัวเลขใดๆ ในวงเล็บ ระบบจะเลือกองค์ประกอบเดียว ตัวอย่างเช่น ให้เลือกองค์ประกอบที่ห้าของรายการ:

Ul li:nth-child(5) ( color: #ccc; )

กลับไปที่ตัวอย่างแรกของเรา ซึ่งเราใช้นิพจน์ (3n+3) มันทำงานอย่างไร? เหตุใดจึงเลือกทุกองค์ประกอบที่สาม? จุดทั้งหมดอยู่ในตัวแปร n ยอมรับค่าจำนวนเต็มตั้งแต่ศูนย์ขึ้นไป มาดูกันดีกว่า:

(3 x 0) + 3 = 3 = องค์ประกอบที่ 3 (3 x 1) + 3 = 6 = องค์ประกอบที่ 6 (3 x 2) + 3 = 9 = องค์ประกอบที่ 9 เป็นต้น

ทีนี้ลองนิพจน์ต่อไปนี้: nth-child(2n+1) :

(2 x 0) + 1 = 1 = องค์ประกอบที่ 1 (2 x 1) + 1 = 3 = องค์ประกอบที่ 3 (2 x 2) + 1 = 5 = องค์ประกอบที่ 5 เป็นต้น

เป็นผลให้เราได้สิ่งเดียวกันกับในกรณีของ Odd ดังนั้นจึงไม่จำเป็นต้องใช้สำนวนดังกล่าวบ่อยๆ นอกจากนี้ ตัวอย่างแรกของเรายังสามารถทำให้ง่ายขึ้นและใช้แทนนิพจน์ดั้งเดิม (3n+3) นิพจน์ (3n):

(3 x 0) + 0 = 0 = ไม่ตรงกัน (3 x 1) + 0 = 3 = องค์ประกอบที่ 3 (3 x 2) + 0 = 6 = องค์ประกอบที่ 6 เป็นต้น

อย่างที่คุณเห็น ผลลัพธ์จะเหมือนเดิม แต่คุณไม่จำเป็นต้องเขียน "+3" เรายังสามารถใช้ค่าลบในนิพจน์ได้ด้วย ตัวอย่างเช่น 4n-1:

(4 x 0) - 1 = -1 = ไม่ตรงกัน (4 x 1) - 1 = 3 = องค์ประกอบที่ 3 (4 x 2) - 1 = 7 = องค์ประกอบที่ 7 เป็นต้น

การใช้ค่าลบกับสัมประสิทธิ์ของ n ดูแปลกไปนิดหน่อยเพราะถ้าผลลัพธ์เป็นลบก็จะไม่พบค่าที่ตรงกัน คุณจะต้องเปลี่ยนนิพจน์อย่างต่อเนื่องเพื่อเพิ่มองค์ประกอบเชิงบวก ปรากฎว่าวิธีนี้สะดวกมากในการเลือกองค์ประกอบ n ตัวแรก ลองดูตัวอย่างด้วย "-n+3":

0 + 3 = 3 = องค์ประกอบที่ 3 -1 + 3 = 2 = องค์ประกอบที่ 2 -2 + 3 = 1 = องค์ประกอบที่ 1 -3 + 3 = 0 = ไม่ตรงกัน

ความเข้ากันได้ข้ามเบราว์เซอร์

nth-child เป็นหนึ่งในคุณลักษณะที่โชคร้ายที่สามารถข้ามเบราว์เซอร์ได้อย่างสมบูรณ์ ยกเว้นค่าศูนย์สัมบูรณ์ใน IE แม้แต่เวอร์ชัน 8 ก็ตาม ดังนั้น เมื่อพูดถึงการใช้งาน หากผลลัพธ์ที่คาดหวังคือเอฟเฟกต์ภาพบางอย่าง (เช่น การระบายสีแถวของตารางใดตารางหนึ่ง) นี่ก็เป็นวิธีที่เหมาะสมที่สุด แต่คุณอาจไม่ควรใช้สิ่งนี้กับสิ่งที่สำคัญกว่าซึ่งอาจส่งผลกระทบ เช่น ความถูกต้องของเค้าโครง

แน่นอน หากคุณใช้ jQuery คุณก็ไม่ต้องกังวลเกี่ยวกับเรื่องนี้ เนื่องจาก jQuery ทำงานใน Internet Explorer ได้ด้วย

และสุดท้าย

คุณสามารถเล่นกับนิพจน์ตัวเลือกที่แตกต่างกันได้ในหน้าตัวอย่าง

www.css-tricks.ru

ค่านิยม

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

ตัวอย่าง

ตัวอย่าง

ในตัวอย่างนี้ เราจะทำให้สีแดงเป็นสี li ซึ่งก็คือ ทายาทคนที่ 4ผู้ปกครอง (ที่ 4 ภายใน ol):

ผลลัพธ์ของการรันโค้ด:

ตัวอย่าง

ตอนนี้เรามาทำให้ทุกอย่างเป็นสีแดง สม่ำเสมอลี่:

ผลลัพธ์ของการรันโค้ด:

ตัวอย่าง

ตอนนี้เรามาทำให้ทุกอย่างเป็นสีแดง แปลกลี่:

ผลลัพธ์ของการรันโค้ด:

ตัวอย่าง

ตอนนี้เรามาทำให้เป็นสีแดงกันเถอะ ทุก ๆ สาม li (เริ่มจากอันที่สาม):

ผลลัพธ์ของการรันโค้ด:

ตัวอย่าง

ตัวเลือกสามารถระบุช่วงขององค์ประกอบได้ สมมติว่าคุณมีรายการองค์ประกอบ 20 รายการ และคุณต้องเลือกองค์ประกอบตั้งแต่ 7 ถึง 14 รายการ คุณสามารถทำได้เช่นนี้:

ผลลัพธ์ของการรันโค้ด:

รหัส.mu

ไวยากรณ์

คลาสหลอกที่ n-child ถูกระบุด้วยอาร์กิวเมนต์เดียว ซึ่งแสดงถึงรูปแบบสำหรับองค์ประกอบที่ตรงกัน

ค่าคำหลัก

คี่ หมายถึงองค์ประกอบที่มีตำแหน่งตัวเลขในชุดพี่น้องเป็นคี่: 1, 3, 5 เป็นต้น

เลขคู่ หมายถึงองค์ประกอบที่มีตำแหน่งตัวเลขในชุดพี่น้องเป็นเลขคู่: 2, 4, 6 เป็นต้น

สัญกรณ์ฟังก์ชัน แสดงถึงองค์ประกอบที่มีตำแหน่งตัวเลขในชุดพี่น้องที่ตรงกับรูปแบบ An+B สำหรับจำนวนเต็มบวกหรือค่าศูนย์ทุกค่าของ n ดัชนีขององค์ประกอบแรกคือ 1 ค่า A และ B ต้องเป็นทั้งคู่

ส.

ไวยากรณ์ที่เป็นทางการ :เด็กคนที่ n( ]?)

[ของ
= ที่ไหน
=

[ของ
=

[ของ
=
= ">" " " "~" " "

[ของ
=

คำอธิบาย

แปลกแม้กระทั่ง

ไวยากรณ์

:nth-child pseudo-class ใช้เพื่อเพิ่มสไตล์ให้กับองค์ประกอบตามการกำหนดหมายเลขในแผนผังองค์ประกอบ<число> | <выражение>) {...}

ค่านิยม

องค์ประกอบ: n-child (คี่ | คู่ |

คี่ หมายเลของค์ประกอบคี่ทั้งหมด

เลขคู่ทั้งหมด

number เลขลำดับขององค์ประกอบลูกที่สัมพันธ์กับพาเรนต์ การกำหนดหมายเลขเริ่มต้นจาก 1 ซึ่งจะเป็นองค์ประกอบแรกในรายการ

expression กำหนดให้เป็น an+b โดยที่ a และ b เป็นจำนวนเต็ม และ n เป็นตัวนับที่จะรับค่า 0, 1, 2 โดยอัตโนมัติ

	2134	2135	2136	2137	2138
เมื่อใช้ค่าลบ a และ b ผลลัพธ์บางอย่างอาจเป็นค่าลบหรือศูนย์ด้วย อย่างไรก็ตาม องค์ประกอบจะได้รับผลกระทบจากค่าบวกเท่านั้น เนื่องจากการกำหนดหมายเลของค์ประกอบเริ่มต้นที่ 1	16	34	62	74	57
ในตาราง 1 แสดงนิพจน์และคำสำคัญที่เป็นไปได้ และยังระบุด้วยว่าจะใช้หมายเลของค์ประกอบใด	4	69	72	56	47
HTML5 CSS3 IE Cr Op Sa Fx	7	73	79	34	86
ลูกคนที่ n	23	34	88	53	103

น้ำมัน

ทอง

ต้นไม้

หิน

ในตัวอย่างนี้ pseudo-class :nth-child ใช้เพื่อเปลี่ยนสไตล์ของแถวแรกของตาราง รวมถึงการเน้นแถวคู่ทั้งหมด (รูปที่ 1)

ในตัวอย่างนี้ pseudo-class :nth-child ใช้เพื่อเปลี่ยนสไตล์ของแถวแรกของตาราง รวมถึงการเน้นแถวคู่ทั้งหมด (รูปที่ 1)

ในตัวอย่างนี้ pseudo-class :nth-child ใช้เพื่อเปลี่ยนสไตล์ของแถวแรกของตาราง รวมถึงการเน้นแถวคู่ทั้งหมด (รูปที่ 1)

ในตัวอย่างนี้ pseudo-class :nth-child ใช้เพื่อเปลี่ยนสไตล์ของแถวแรกของตาราง รวมถึงการเน้นแถวคู่ทั้งหมด (รูปที่ 1)

ในตัวอย่างนี้ pseudo-class :nth-child ใช้เพื่อเปลี่ยนสไตล์ของแถวแรกของตาราง รวมถึงการเน้นแถวคู่ทั้งหมด (รูปที่ 1)

ฉันยินดีต้อนรับคุณสู่บล็อกของฉัน วันนี้ฉันอยากจะเขียนในหัวข้อวิธีการเลือกองค์ประกอบหลักแรกใน CSS เนื่องจากสิ่งนี้ช่วยให้คุณใช้คลาสสไตล์น้อยลง

Pseudo-class: first-child และ first-of-type ความแตกต่างคืออะไร?
เพื่อที่จะเข้าถึงองค์ประกอบแรกจากคอนเทนเนอร์หลักใน CSS จึงมีการสร้างคลาสเทียมขึ้น 2 คลาส ฉันขอแนะนำให้ดูทุกอย่างพร้อมตัวอย่างทันทีเพื่อให้คุณเข้าใจ:
}

นี่คือย่อหน้า

สมมติว่าเรามีมาร์กอัปต่อไปนี้ เป้าหมายคือแยกย่อหน้าแรกและจัดสไตล์แยกจากย่อหน้าอื่นๆ โดยไม่ต้องเพิ่มคลาสเข้าไป ซึ่งสามารถทำได้เช่นนี้:
#wrapper p:ลูกคนแรก(
}

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

ในตัวอย่างนี้ pseudo-class :nth-child ใช้เพื่อเปลี่ยนสไตล์ของแถวแรกของตาราง รวมถึงการเน้นแถวคู่ทั้งหมด (รูปที่ 1)

ในตัวอย่างนี้ pseudo-class :nth-child ใช้เพื่อเปลี่ยนสไตล์ของแถวแรกของตาราง รวมถึงการเน้นแถวคู่ทั้งหมด (รูปที่ 1)

ในตัวอย่างนี้ pseudo-class :nth-child ใช้เพื่อเปลี่ยนสไตล์ของแถวแรกของตาราง รวมถึงการเน้นแถวคู่ทั้งหมด (รูปที่ 1)

ในตัวอย่างนี้ pseudo-class :nth-child ใช้เพื่อเปลี่ยนสไตล์ของแถวแรกของตาราง รวมถึงการเน้นแถวคู่ทั้งหมด (รูปที่ 1)

ในตัวอย่างนี้ pseudo-class :nth-child ใช้เพื่อเปลี่ยนสไตล์ของแถวแรกของตาราง รวมถึงการเน้นแถวคู่ทั้งหมด (รูปที่ 1)

ตอนนี้คิดว่า: ประเภทแรกจะทำงานในกรณีนี้หรือไม่ ใช่ เนื่องจากคำนึงถึงประเภทขององค์ประกอบและจะเลือกย่อหน้าแรก ไม่ใช่องค์ประกอบแรกจากทั้งหมด ลูกคนแรกจะทำงานไหม? ลองดูสิ มันจะใช้งานไม่ได้เพราะย่อหน้าไม่ใช่องค์ประกอบแรกในพาเรนต์

โดยส่วนตัวแล้วฉันไม่เข้าใจความแตกต่างระหว่างคลาสหลอกเหล่านี้ในทันทีและสับสนมาระยะหนึ่งแล้ว แต่ตอนนี้ฉันหวังว่าฉันจะอธิบายให้คุณฟังอย่างถูกต้อง

รายละเอียดที่สำคัญอีกประการหนึ่ง

องค์ประกอบจะถูกนับจากองค์ประกอบหลักทุกประการ ดังนั้นหากคุณระบุดังนี้:

Li:ชนิดแรก(
…
}

จากนั้นรายการแรกในแท็ก body จะถูกเลือก (นั่นคือ ทั่วทั้งหน้า) ดังนั้นในรายการใดๆ รายการแรกจะมีรูปแบบแตกต่างออกไป
หากคุณเขียนแบบนี้:

#sidebar li: ประเภทแรก(
…
}

จากนั้นจะมีการเลือกเฉพาะรายการแรกของรายการในแถบด้านข้างซึ่งก็คือคอลัมน์ด้านข้างบนเว็บไซต์ของเรา

ด้วยการใช้ตัวเลือกต่างๆ ที่ฉันเขียน คุณสามารถเข้าถึงเกือบทุกองค์ประกอบบนหน้าเว็บได้ ในบทความนี้ คุณสามารถอ่านเพิ่มเติมเกี่ยวกับวิธีการทำงานกับคลาสหลอกลำดับที่ n ใน css ได้ และจะให้ตัวเลือกแก่คุณในแง่ของการเลือกองค์ประกอบ

อย่างไรก็ตามฉันลืมพูดถึงคลาสหลอกที่ตรงกันข้าม - ลูกสุดท้าย (และประเภทสุดท้ายตามลำดับ) อนุญาตให้คุณเลือกองค์ประกอบสุดท้ายจากคอนเทนเนอร์หลัก

ซึ่งคุณสามารถใช้มันได้ในทางปฏิบัติ

ฉันกำลังเขียนเกี่ยวกับคลาสหลอกเหล่านี้เพราะมันถูกใช้อย่างกระตือรือร้นเมื่อเขียนโค้ดโดยใช้ CSS ตัวอย่างเช่น บนเพจของคุณ คุณมีบล็อกโพสต์ ความคิดเห็น หรืออย่างอื่นที่คล้ายกัน และคุณมีความคิดที่จะออกแบบองค์ประกอบแรกด้วยวิธีพิเศษ หรืออาจจะเป็นอันสุดท้าย และโดยทั่วไปใครๆ ก็เป็นไปได้

คุณเพียงแค่ต้องค้นหาชื่อของบล็อกที่เก็บองค์ประกอบที่ต้องการ สมมติว่าเรากำลังจัดการกับโพสต์ยอดนิยม คอนเทนเนอร์หลักมีคลาสที่ได้รับความนิยม จากนั้นเราก็เขียนดังนี้:

ยอดนิยม li:first-of-type(
ช่องว่างด้านบน: 20px;
}

เพียงเท่านี้ รายการแรกในนั้นได้รับการเยื้องที่ด้านบน แต่คุณสามารถเพิ่มสิ่งที่คุณต้องการให้กับสไตล์ได้

นี่เป็นอีกตัวอย่างหนึ่ง ฉันมีบล็อกสีเทาที่เหมือนกันเพียงสามบล็อกในแท็กเนื้อหา มาเขียนแบบนี้กัน

คลาสหลอกสามารถใช้เพื่อเลือกองค์ประกอบเฉพาะจากรายการ ในบทช่วยสอนนี้ เราจะพูดถึง pseudo-class:nth-child สิ่งที่คุณสามารถสร้างด้วยคลาส pseudo-class นี้ และมันจะมีประโยชน์ได้อย่างไร pseudo-class:nth-child ช่วยให้คุณสามารถเลือกกลุ่มขององค์ประกอบที่มีคุณสมบัติทั่วไปได้ มักใช้เพื่อเลือกองค์ประกอบคู่หรือคี่จากกลุ่ม มักใช้เพื่อทำให้ตารางดูเหมือนม้าลายโดยให้สีพื้นหลังที่แตกต่างกันแก่แถวคู่และแถวคี่

Tr:nth-child (คี่) ( // สีพื้นหลัง ) tr:nth-child (คู่) ( // สีพื้นหลังอื่น )

pseudo-class:nth-child อีกอันหนึ่งช่วยให้คุณสามารถแบ่งองค์ประกอบที่มีคุณสมบัติทั่วไปออกเป็นกลุ่มๆ จากนั้นเลือกองค์ประกอบเฉพาะจากแต่ละกลุ่มโดยใช้ไวยากรณ์ต่อไปนี้:

Tr:เด็กที่ n (an+b) ( )

ที่นี่ กกำหนดจำนวนองค์ประกอบในกลุ่มและ ขกำหนดว่าองค์ประกอบใดจากกลุ่มจะถูกเลือก หากใช้คุณค่า 2n+1จากนั้นองค์ประกอบจะถูกแบ่งออกเป็นสองกลุ่ม และองค์ประกอบแรกของแต่ละกลุ่มจะถูกเลือก นั่นคือ องค์ประกอบที่มีหมายเลขซีเรียลคี่ หากใช้คุณค่า 2n+2จากนั้นองค์ประกอบจะถูกแบ่งออกเป็นสองกลุ่มอีกครั้ง แต่ตอนนี้องค์ประกอบที่สองของแต่ละกลุ่มจะถูกเลือกนั่นคือองค์ประกอบที่มีหมายเลขซีเรียลคู่

อีกตัวอย่างหนึ่งในการทำความเข้าใจ pseudo-class:nth-child เราจะใช้มันเพื่อเลือกทุกๆ องค์ประกอบที่สี่ เช่น ที่สี่, แปด, สิบสอง, สิบหก เป็นต้น เพื่อทำเช่นนี้ เราจะแบ่งองค์ประกอบออกเป็นกลุ่มละสี่กลุ่ม แล้วเลือกทุกๆ องค์ประกอบที่สี่

Tr:nth-child (4n+4) ( // กำหนดสไตล์ให้กับทุก ๆ องค์ประกอบที่สี่)

ด้านล่างนี้คือรายการองค์ประกอบทั้ง 10 รายการ และเราจะใช้คลาสหลอก :nth-child, :first-child และ :last-child เพื่อเลือกองค์ประกอบที่เราต้องการเน้น

การใช้ CSS:nth-child pseudo-class เพื่อเลือกองค์ประกอบเดียว

ด้วยการให้ค่า pseudo-class:nth-child เป็นตัวเลข คุณสามารถเลือกได้ว่าลูกคนใดของกลุ่มที่จะเข้าถึง:

องค์ประกอบที่ 1
องค์ประกอบที่ 2
องค์ประกอบที่ 3
องค์ประกอบที่ 4
องค์ประกอบที่ 5
องค์ประกอบที่ 6
องค์ประกอบที่ 7
องค์ประกอบที่ 8
องค์ประกอบที่ 9
องค์ประกอบที่ 10

#selector_example li:nth-child (4) ( ขนาดตัวอักษร: 150

การใช้คลาสหลอก CSS:nth-child เพื่อเลือกองค์ประกอบทั้งหมดยกเว้นห้าองค์ประกอบแรก

หากคุณให้ค่าของแบบฟอร์มแก่ pseudo-class:nth-child n+หมายเลข คุณสามารถเลือกองค์ประกอบทั้งหมดที่เริ่มต้นด้วยองค์ประกอบที่มีหมายเลขซีเรียลนี้:

องค์ประกอบที่ 1
องค์ประกอบที่ 2
องค์ประกอบที่ 3
องค์ประกอบที่ 4
องค์ประกอบที่ 5
องค์ประกอบที่ 6
องค์ประกอบที่ 7
องค์ประกอบที่ 8
องค์ประกอบที่ 9
องค์ประกอบที่ 10

#selector_example li:nth-child (n+6 ) ( ขนาดตัวอักษร: 150 - แบบอักษรน้ำหนัก: ตัวหนา ;

การใช้ CSS:nth-child pseudo-class เพื่อเลือกเฉพาะห้าองค์ประกอบแรก

เมื่อเราตั้งค่า pseudo-class:nth-child ให้เป็นค่าลบ n+หมายเลข เราเลือกองค์ประกอบทั้งหมดที่อยู่ก่อนองค์ประกอบด้วยหมายเลขซีเรียลนี้:

องค์ประกอบที่ 1
องค์ประกอบที่ 2
องค์ประกอบที่ 3
องค์ประกอบที่ 4
องค์ประกอบที่ 5
องค์ประกอบที่ 6
องค์ประกอบที่ 7
องค์ประกอบที่ 8
องค์ประกอบที่ 9
องค์ประกอบที่ 10

สี:สีเขียว; - 150 - แบบอักษรน้ำหนัก: ตัวหนา ;

การใช้ CSS:nth-child pseudo-class เพื่อเลือกทุกๆ องค์ประกอบที่สาม

pseudo-class:nth-child สามารถใช้เพื่อเลือกลำดับขององค์ประกอบโดยระบุจำนวนองค์ประกอบที่อยู่ในลำดับและหมายเลขลำดับขององค์ประกอบที่ต้องการ หากคุณตั้งค่า 3n+1ทุกองค์ประกอบที่สามจะถูกเลือก โดยเริ่มจากองค์ประกอบแรก:

องค์ประกอบที่ 1
องค์ประกอบที่ 2
องค์ประกอบที่ 3
องค์ประกอบที่ 4
องค์ประกอบที่ 5
องค์ประกอบที่ 6
องค์ประกอบที่ 7
องค์ประกอบที่ 8
องค์ประกอบที่ 9
องค์ประกอบที่ 10

#selector_example li:nth-child (-n+5 ) ( ขนาดตัวอักษร: 150 - แบบอักษรน้ำหนัก: ตัวหนา ;

การใช้ CSS:nth-child pseudo-class เพื่อเลือกเฉพาะองค์ประกอบคี่

คุณสามารถตั้งค่า pseudo-class:nth-child เป็นคี่เพื่อเลือกองค์ประกอบทั้งหมดที่มีหมายเลขลำดับคี่ นั่นคือองค์ประกอบที่หนึ่ง สาม ห้า เจ็ด เก้า ฯลฯ สะดวกมากสำหรับการตั้งค่าสีสำหรับแถวตารางที่อยู่ติดกัน

องค์ประกอบที่ 1
องค์ประกอบที่ 2
องค์ประกอบที่ 3
องค์ประกอบที่ 4
องค์ประกอบที่ 5
องค์ประกอบที่ 6
องค์ประกอบที่ 7
องค์ประกอบที่ 8
องค์ประกอบที่ 9
องค์ประกอบที่ 10

#selector_example li:nth-child (3n+1 ) ( ขนาดตัวอักษร: 150 - แบบอักษรน้ำหนัก: ตัวหนา ;

การใช้ CSS:nth-child pseudo-class เพื่อเลือกเฉพาะองค์ประกอบที่เป็นเลขคู่

ตัวอย่างนี้แสดงสิ่งเดียวกันกับตัวอย่างสุดท้าย แต่คราวนี้เลือกองค์ประกอบที่เป็นเลขคู่ทั้งหมด นั่นคือองค์ประกอบที่สอง, สี่, หก, แปด, สิบ ฯลฯ :

องค์ประกอบที่ 1
องค์ประกอบที่ 2
องค์ประกอบที่ 3
องค์ประกอบที่ 4
องค์ประกอบที่ 5
องค์ประกอบที่ 6
องค์ประกอบที่ 7
องค์ประกอบที่ 8
องค์ประกอบที่ 9
องค์ประกอบที่ 10

#selector_example li:nth-child (คี่) ( ขนาดตัวอักษร: 150 - แบบอักษรน้ำหนัก: ตัวหนา ;

การใช้ CSS:first-child pseudo-class เพื่อเลือกองค์ประกอบแรก

คลาสหลอกอื่น:first-child จะเลือกองค์ประกอบแรก:

องค์ประกอบที่ 1
องค์ประกอบที่ 2
องค์ประกอบที่ 3
องค์ประกอบที่ 4
องค์ประกอบที่ 5
องค์ประกอบที่ 6
องค์ประกอบที่ 7
องค์ประกอบที่ 8
องค์ประกอบที่ 9
องค์ประกอบที่ 10

#selector_example li:nth-child (คู่) ( ขนาดตัวอักษร: 150 - แบบอักษรน้ำหนัก: ตัวหนา ;

การใช้คลาสหลอก CSS:last-child เพื่อเลือกองค์ประกอบสุดท้าย

นอกเหนือจาก pseudo-class:first-child แล้ว ยังมี pseudo-class:last-child ซึ่งจะเลือกองค์ประกอบสุดท้ายจากกลุ่มขององค์ประกอบ:

องค์ประกอบที่ 1
องค์ประกอบที่ 2
องค์ประกอบที่ 3
องค์ประกอบที่ 4
องค์ประกอบที่ 5
องค์ประกอบที่ 6
องค์ประกอบที่ 7
องค์ประกอบที่ 8
องค์ประกอบที่ 9
องค์ประกอบที่ 10

#selector_example li:ลูกคนแรก ( ขนาดตัวอักษร: 150 - แบบอักษรน้ำหนัก: ตัวหนา ;

การใช้ CSS:nth-last-child pseudo-class เพื่อเลือกองค์ประกอบที่สองจากสุดท้าย

คุณยังสามารถใช้ pseudo-class:nth-last-child ซึ่งรวมความสามารถของ pseudo-classes:last-child และ:nth-child เพื่อเริ่มนับองค์ประกอบจากจุดสิ้นสุด นั่นคือคุณสามารถเลือกองค์ประกอบโดยการนับหมายเลขซีเรียลจากส่วนท้ายของกลุ่ม ตัวอย่างเช่น ในกลุ่มที่มีองค์ประกอบสิบองค์ประกอบ คุณสามารถเลือกองค์ประกอบที่สองจากส่วนท้ายได้:

องค์ประกอบที่ 1
องค์ประกอบที่ 2
องค์ประกอบที่ 3
องค์ประกอบที่ 4
องค์ประกอบที่ 5
องค์ประกอบที่ 6
องค์ประกอบที่ 7
องค์ประกอบที่ 8
องค์ประกอบที่ 9
องค์ประกอบที่ 10

#selector_example li:last-child ( ขนาดตัวอักษร: 150 - แบบอักษรน้ำหนัก: ตัวหนา ;

#selector_example li:nth-last-child (2) ( ขนาดตัวอักษร: