CSS Nth Child:คู่มือฉบับสมบูรณ์

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

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

นั่นคือที่มาของ CSS :nth-child pseudo-class :nth-child pseudo-class จะจับคู่องค์ประกอบตามตำแหน่งในรายการของไอเท็มในหน้า HTML

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

คลาสหลอก CSS

ใน CSS ตัวเลือกจะใช้เพื่อเลือกองค์ประกอบเฉพาะบนหน้าเว็บที่ควรใช้สไตล์ ตัวอย่างเช่น ตัวเลือกอาจเปลี่ยนสีข้อความขององค์ประกอบ

ทั้งหมดบนหน้าเว็บเป็นสีเขียว

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

CSS :nth-child Pseudo-Class

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

นี่คือไวยากรณ์ของ :nth-child pseudo-class:

81% ของผู้เข้าร่วมกล่าวว่าพวกเขารู้สึกมั่นใจมากขึ้นเกี่ยวกับโอกาสในการทำงานด้านเทคโนโลยีหลังจากเข้าร่วม bootcamp จับคู่กับ Bootcamp วันนี้

ผู้สำเร็จการศึกษาจากหลักสูตร bootcamp โดยเฉลี่ยใช้เวลาน้อยกว่าหกเดือนในการเปลี่ยนอาชีพ ตั้งแต่เริ่มต้น bootcamp ไปจนถึงหางานแรก

li:nth-child(2) {
	color: lightblue;
}

มาทำลายตัวอย่างนี้กัน:

ลี หมายถึงองค์ประกอบที่ควรใช้สไตล์
ลูกคนที่สอง เป็นตัวเลือกที่ใช้จับคู่องค์ประกอบ
2 เป็นสูตรที่ใช้จับคู่องค์ประกอบโดยใช้ nth-child

ในกรณีนี้ เราใช้สไตล์ของเรากับทุก ๆ วินาที

องค์ประกอบในรายการ

:nth-child ค่าที่ยอมรับ

pseudo-class :nth-child ยอมรับค่าสองประเภท ขั้นแรก คลาสหลอกยอมรับค่าคีย์เวิร์ดซึ่งกำหนดสูตรเริ่มต้นไว้ คีย์เวิร์ดเหล่านี้คือ:

คี่:เลือกองค์ประกอบที่มีตำแหน่งในรายการเป็นเลขคี่
คู่:เลือกองค์ประกอบที่มีตำแหน่งในรายการเป็นเลขคู่

ประการที่สอง :nth-child pseudo-class ยอมรับสูตรที่กำหนดเองซึ่งระบุองค์ประกอบที่คลาสหลอกควรเลือกบนหน้าเว็บ ต่อไปนี้คือตัวอย่างสูตรบางส่วน:

:nth-child(6):เลือกองค์ประกอบที่หกในรายการ
:nth-child(n+2):เลือกองค์ประกอบที่สองและองค์ประกอบที่ตามมาทั้งหมด
:nth-child(4n):เลือกองค์ประกอบทั้งหมดที่เป็นผลคูณของ 4

น เท่ากับตำแหน่งที่รายการปรากฏในรายการ

ตอนนี้เรารู้พื้นฐานของ :nth-child pseudo-class แล้ว เราสามารถสำรวจบางตัวอย่างของ pseudo-class ได้

CSS :nth-child ตัวอย่าง

มาดูสองตัวอย่างของ :nth-child pseudo-class

:nth-ลูกตาราง

การใช้งานทั่วไปของ :nth-child pseudo-class คือการเลือกแถวในตาราง

สมมติว่าเรากำลังออกแบบเว็บไซต์สำหรับชมรมทำอาหารในท้องถิ่น สโมสรขอให้เราจัดโต๊ะสำหรับเว็บไซต์พร้อมสูตร ช็อกโกแลตร้อนรสเผ็ด พิเศษของพวกเขา . สโมสรต้องการให้ทุกแถวที่สองในตารางเน้นด้วยสีชมพูร้อนซึ่งเป็นสีหลักของไม้กอล์ฟ

เราสามารถสร้างตารางนี้โดยใช้รหัสต่อไปนี้:

<html>

<table>
  <tr>
    <th>Ingredient</th>
    <th>Quantity</th>
  </tr>
  <tr>
    <td>Skimmed Milk</td>
    <td>250 mls</td>
  </tr>
  <tr>
    <td>75% Dark Chocolate</td>
    <td>Two squares (10g)</td>
  </tr>
  <tr>
    <td>Cinnamon</td>
    <td>A pinch</td>
  </tr>
  <tr>
    <td>Honey</td>
    <td>1 tsp</td>
  </tr>
</table>

<style>
  tr:nth-child(even) {
      background-color: hotpink;
  }
</style>

CSS Nth Child:คู่มือฉบับสมบูรณ์ ปุ่มในตัวแก้ไขโค้ดด้านบนเพื่อดูผลลัพธ์ของโค้ด HTML/CSS

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

หากต้องการเรียนรู้เพิ่มเติมเกี่ยวกับวิธีการสร้างตารางใน HTML โปรดอ่านคำแนะนำเกี่ยวกับตาราง HTML

ในไฟล์ CSS เราใช้ :nth-child pseudo-class เพื่อนำสไตล์ไปใช้กับแถวที่เป็นเลขคู่ทุกแถวในตารางของเรา

tr selector ใช้สำหรับเลือกแถวของตารางทั้งหมด (แสดงโดยแท็ก ใน HTML) และ :nth-child(even) คลาสเทียมจะเลือกทุกแถวของตารางด้วยหมายเลข ID คู่ สำหรับแถวตารางที่มีเลขคู่แต่ละแถว สีพื้นหลังของแถวตารางจะถูกตั้งค่าเป็นสีชมพูร้อน

:nth-รายการลูก

การใช้งานทั่วไปของ :nth-child pseudo-class คือการเน้นรายการในรายการ

สมมุติว่าเราถูกขอให้รวบรวมรายชื่อสมาชิกแต่ละคนในชมรมทำอาหาร ข้อความสำหรับสามชื่อแรกในรายการควรปรากฏเป็นสีฟ้าอ่อน เนื่องจากมีชื่ออยู่ในคลับ

เราสามารถสร้างรายการนี้โดยใช้รหัสต่อไปนี้:

<html>

<ul>
	<li>Chad Bakersfield</li>
	<li>Laura Patel</li>
	<li>Eddie Mahoney</li>
	<li>Edna Jamieson</li>
	<li>Lesley Spencer</li>
	<li>James Moffat</li>
	<li>Olivia Lindsay</li>
<ul>

<style>
  li:nth-child(-n+3) {
      color: lightblue;
  }
</style>

เราใช้แท็ก

เพื่อเพิ่มชื่อเจ็ดชื่อในรายการ โดยแต่ละแท็ก
มีชื่อ

ในโค้ด CSS เราใช้ :nth-child selector เพื่อเลือกแท็ก
สามแท็กแรกในรายการของเรา โดยเฉพาะเราใช้สูตร -n+3 ซึ่งช่วยให้เราเลือกสามชื่อแรกได้ จากนั้น สีของข้อความสำหรับองค์ประกอบ
ที่เลือกก็เปลี่ยนเป็นสีน้ำเงินอ่อน

หากคุณต้องการเรียนรู้เพิ่มเติมเกี่ยวกับรายการ โปรดดูคู่มือรายการ HTML ของเรา

บทสรุป

ตัวเลือก :nth-child ให้คุณเลือกองค์ประกอบตามตำแหน่งในกลุ่มซึ่งคุณสามารถใช้สไตล์ CSS ได้

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

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