Chọn phần tử con đầu tiên

Thuộc phần Thành thạo CSS trong hành trình HTML của Coddy. Bài học 13 trên 43.

Lớp giả :first-child chọn phần tử đầu tiên trong một nhóm phần tử cùng cấp.

Ví dụ:

<section>
  <p>This paragraph will be blue and bold.</p>
  <p>This paragraph will have default styling.</p>
</section>

Mọi đoạn văn là phần tử con đầu tiên trong phần tử cha sẽ có màu xanh dương và chữ in đậm.

p:first-child {
  color: blue;
  font-weight: bold;
}

Bạn có thể kết hợp và áp dụng các bộ chọn hậu duệ, con và các bộ chọn khác để nhắm đến phần tử cụ thể hơn. Đây là một ví dụ khác:

div:first-child h1 {
 color: red;
}

Thao tác này chọn phần tử div đầu tiên trong số các phần tử cùng cấp, rồi đổi màu chữ của thẻ <h1> bên trong thành màu đỏ.

Thử thách

Dễ

Tạo quy tắc CSS nhắm đến mục đầu tiên (<li>) trong bất kỳ danh sách không thứ tự nào (<ul>) và định dạng mục đó như sau:

Màu chữ xanh dương
Màu nền vàng nhạt
Lề đệm bên trái 10 pixel

Tự làm thử

<!DOCTYPE html>
<html>
<head>
    <title>Targeting the First Child</title>
  <style>
    /* Write your CSS rule here */
    
  </style>
</head>
<body>
  <h2>Grocery List</h2>
  <ul>
    <li>Fresh Apples</li>
    <li>Organic Bananas</li>
    <li>Whole Wheat Bread</li>
  </ul>
  
  <h2>To-Do List for the Day</h2>
  <ul>
    <li>Complete coding challenge</li>
    <li>Go for a walk in the park</li>
  </ul>
</body>
</html>