จัดสไตล์ <p> ที่เป็น First Child ของ Parent ด้วย :first-child

ใช้ :first-child เพื่อจัดสไตล์ <p> ที่เป็นลูกคนแรกของ Parent โดยตรง

ตัวอย่าง

<!DOCTYPE html>
<html>
<head>
    <style>
        p:first-child {
            background-color: orange;
        }
    </style>
</head>
<body>
    <h1>Heading</h1>
    <p>This is demo text.</p>
    <div>
        <p>This is demo text, with the first child of its parent div.</p>
        <p>This is demo text, but not the first child.</p>
    </div>
</body>
</html>

ผลลัพธ์: <p> ตัวแรกใน <body> และ <p> ตัวแรกใน <div> จะมีพื้นหลังส้ม