ใช้ pseudo-class :first-child เพื่อเพิ่มสไตล์พิเศษให้กับอีเลเมนต์ที่เป็นลูกแรกของอีเลเมนต์อื่น
ตัวอย่าง
ลองรันโค้ดต่อไปนี้เพื่อเข้าใจการใช้งาน pseudo-class :first-child:
<html> <head> <style> div > p:first-child { text-indent: 25px; } </style> </head> <body> <div> <p>ย่อหน้าแรกใน div ย่อหน้านี้จะถูกเยื้องเข้า</p> <p>ย่อหน้าที่สองใน div ย่อหน้านี้จะไม่ถูกเยื้องเข้า</p> </div> <p>แต่จะไม่ตรงกับย่อหน้าใน HTML นี้:</p> <div> <h3>Heading</h3> <p>ย่อหน้าแรกภายใน div ย่อหน้านี้จะไม่ได้รับผลกระทบ</p> </div> </body> </html>