เลือกองค์ประกอบทุก Nth ใน CSS

242

เป็นไปได้ที่จะเลือกพูดทุกองค์ประกอบที่สี่ในชุดองค์ประกอบหรือไม่?

เช่นฉันมี 16 <div>องค์ประกอบ ... ฉันสามารถเขียนบางอย่างเช่น

div:nth-child(4),
div:nth-child(8),
div:nth-child(12),
div:nth-child(16)

มีวิธีที่ดีกว่าในการทำเช่นนี้?

css css-selectors

— Derek Adair
แหล่งที่มา

1

หวังว่าทุกคนยังมีชีวิตอยู่เพียงแค่สำหรับมือใหม่และไม่ใช่มือใหม่แม้แต่เลือกจำนวนทุกองค์ประกอบ n และสิ่งที่ยุ่งยากมากขึ้น: nthmaster.com

— gengns

419

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

นี่คือวิธีที่คุณจะเขียนรายการตัวเลือกด้านบนใหม่:

div:nth-child(4n)

สำหรับคำอธิบายเกี่ยวกับวิธีการแสดงออกทางคณิตศาสตร์เหล่านี้ทำงานให้ดูคำตอบของฉันคำถามนี้เช่นเดียวกับสเป็ค

divโปรดทราบว่าคำตอบนี้อนุมานว่าทั้งหมดขององค์ประกอบของเด็กภายในองค์ประกอบหลักเดียวกันเป็นประเภทองค์ประกอบเดียวกัน หากคุณมีองค์ประกอบอื่น ๆ ประเภทต่าง ๆ เช่นh1หรือpคุณจะต้องใช้:nth-of-type()แทน:nth-child()เพื่อให้แน่ใจว่าคุณนับdivองค์ประกอบเท่านั้น:

<body>
  <h1></h1>
  <div>1</div>  <div>2</div>
  <div>3</div>  <div>4</div>
  <h2></h2>
  <div>5</div>  <div>6</div>
  <div>7</div>  <div>8</div>
  <h2></h2>
  <div>9</div>  <div>10</div>
  <div>11</div> <div>12</div>
  <h2></h2>
  <div>13</div> <div>14</div>
  <div>15</div> <div>16</div>
</body>

สำหรับทุกอย่างอื่น (คลาส, คุณสมบัติ, หรือการรวมกันของสิ่งเหล่านี้) ที่คุณกำลังมองหาเด็กที่ n ที่ตรงกับตัวเลือกโดยพลการคุณจะไม่สามารถทำได้ด้วยตัวเลือก CSS ที่แท้จริง ดูคำตอบของฉันสำหรับคำถามนี้

โดยวิธีการที่มีไม่มากของความแตกต่างระหว่าง 4n และ 4n + 4 :nth-child()เกี่ยวกับการ หากคุณใช้nตัวแปรมันจะเริ่มนับที่ 0 นี่คือสิ่งที่แต่ละตัวเลือกจะจับคู่:

:nth-child(4n)

4(0) = 0
4(1) = 4
4(2) = 8
4(3) = 12
4(4) = 16
...

:nth-child(4n+4)

4(0) + 4 = 0  + 4 = 4
4(1) + 4 = 4  + 4 = 8
4(2) + 4 = 8  + 4 = 12
4(3) + 4 = 12 + 4 = 16
4(4) + 4 = 16 + 4 = 20
...

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

— BoltClock
แหล่งที่มา

tr td:nth-child(4)ฉันคิดว่าฉันจะเพิ่มถ้าคุณกำลังทำอะไรบางอย่างเช่นเฉพาะที่สี่แล้วคุณจะต้องมีอะไรบางอย่างเช่น สังเกตการขาด n ในวงเล็บ

— WORMSS

2

โปรดทราบ: มันใช้งานได้เฉพาะกับตัวเลือกองค์ประกอบ (div, td, img ฯลฯ ) ไม่ใช่ตัวเลือกคลาสเช่น.

— this

1

ฉันสร้างสาธิตการโต้ตอบที่จะมองเห็นได้อธิบายวิธีการที่ n-เด็ก (n) การทำงาน: xengravity.com/demo/nth-child ฉันพบว่าข้อมูลจำเพาะของ W3 นั้นน่ากลัวเป็นพิเศษสำหรับผู้เริ่มต้นที่อนุญาตให้ใช้ไวยากรณ์ โดยเฉพาะส่วน 'สแกนเนอร์คำศัพท์' ของพวกเขา

— xengravity

1

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

— BoltClock

1

ฉันได้สร้างเครื่องมือที่คล้ายกันสำหรับการเล่นกับนิพจน์ที่ n-child: salman-w.googlecode.com/svn/trunk/css/…

— Salman A

24

div:nth-child(4n+4)

ดู: http://css-tricks.com/how-nth-child-works/

— Tomalak
แหล่งที่มา

12

ลองสิ่งนี้

div:nth-child(4n+4)

— มาร์โค
แหล่งที่มา

10

คุณต้องการอาร์กิวเมนต์ที่ถูกต้องสำหรับnth-childคลาสหลอก

อาร์กิวเมนต์ที่ควรจะเป็นในรูปแบบของan + bเพื่อให้ตรงกับทุก^วันเด็กที่เริ่มต้นจากข
ทั้งสองaและbเป็นจำนวนเต็มเสริมและทั้งคู่อาจเป็นศูนย์หรือลบ
- ถ้าaเป็นศูนย์แล้วไม่มี"ทุก^วันเด็ก"ประโยค
- ถ้าเป็นลบจับคู่แล้วจะทำถอยหลังเริ่มต้นจากab
- ถ้าbเป็นศูนย์หรือเชิงลบแล้วมันเป็นไปได้ที่จะเขียนแสดงออกเทียบเท่าใช้ในเชิงบวกbเช่นเป็นเช่นเดียวกับ4n+0 4n+4ในทำนองเดียวกันเป็นเช่นเดียวกับ4n-14n+3

ตัวอย่าง:

เลือกลูกคนที่ 4 (4, 8, 12, ... )

li:nth-child(4n) {
  background: yellow;
}

<ol>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
</ol>

ขยายตัวอย่างข้อมูล

เลือกลูกคนที่ 4 ทุกคนเริ่มจาก 1 (1, 5, 9, ... )

แสดงตัวอย่างโค้ด

li:nth-child(4n+1) {
  background: yellow;
}

<ol>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
</ol>

ขยายตัวอย่างข้อมูล

เลือกเด็กที่ 3 และ 4 จากกลุ่ม 4 (3 และ 4, 7 และ 8, 11 และ 12, ... )

แสดงตัวอย่างโค้ด

/* two selectors are required */
li:nth-child(4n+3),
li:nth-child(4n+4) {
  background: yellow;
}

<ol>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
</ol>

ขยายตัวอย่างข้อมูล

เลือก 4 รายการแรก (4, 3, 2, 1)

แสดงตัวอย่างโค้ด

/* when a is negative then matching is done backwards  */
li:nth-child(-n+4) {
  background: yellow;
}

<ol>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
</ol>

ขยายตัวอย่างข้อมูล

— ซัลมาน
แหล่งที่มา