จะเลือก TD ตัวแรกและตัวสุดท้ายในแถวได้อย่างไร?

คุณจะเลือกคนแรกและคนสุดท้ายTDในแถวได้อย่างไร?

tr > td[0],
tr > td[-1] {
/* styles */
}

คุณสามารถใช้:first-childและ:last-childตัวเลือกหลอก:

tr td:first-child,
tr td:last-child {
    /* styles */
}

สิ่งนี้จะทำงานในเบราว์เซอร์หลัก ๆ ทั้งหมด แต่ IE7 มีปัญหาบางอย่างเมื่อมีการเพิ่มองค์ประกอบแบบไดนามิก (และจะไม่ทำงานใน IE6)

คุณสามารถใช้ตัวอย่างต่อไปนี้:

  tr td:first-child {text-decoration: underline;}
  tr td:last-child {color: red;}

ใช้คลาส pseudo ต่อไปนี้:

: ลูกคนแรก หมายถึง "เลือกองค์ประกอบนี้ถ้าลูกคนแรกของผู้ปกครอง"

: last-childหมายถึง "เลือกองค์ประกอบนี้ถ้าเป็นลูกสุดท้ายของ parent"

โหนดองค์ประกอบ (แท็ก HTML) เท่านั้นที่ได้รับผลกระทบ pseudo-classes เหล่านี้จะไม่สนใจโหนดข้อความ

คุณสามารถใช้: ลูกคนแรกและ: ลูกคนโต pseudo-selectors :

tr td:first-child{
    color:red;
}
tr td:last-child {
    color:green
}

หรือคุณสามารถใช้วิธีอื่นเช่น

// To first child 
tr td:nth-child(1){
    color:red;
}

// To last child 
tr td:nth-last-child(1){
    color:green;
}

ทั้งสองวิธีทำงานได้อย่างสมบูรณ์แบบ

หากคุณใช้ sass (scss) คุณสามารถใช้ตัวอย่างต่อไปนี้:

tr > td{
   /* styles for all td*/
   &:first-child{
     /* styles for first */ 
   }
   &:last-child{
    /* styles for last*/
   }
 }

หากแถวนั้นมีthแท็กนำหน้า (หรือต่อท้าย) บางส่วนก่อนหน้าtdคุณควรใช้:first-of-typeและ:last-of-typeตัวเลือก มิฉะนั้นtdจะไม่ถูกเลือกก่อนหากไม่ใช่องค์ประกอบแรกของแถว

สิ่งนี้ให้:

td:first-of-type, td:last-of-type {
    /* styles */
}