:first-child Pseudo Class trong CSS

:first-child Pseudo Class trong CSS được sử dụng để thêm style đặc biệt cho một phần tử mà là phần tử con đầu tiên của phần tử khác.

Để :first-child làm việc trong IE, bạn phải đặt <!DOCTYPE> tại phần đầu của tài liệu.

Bạn cần ghi nhớ rằng:

Các tên được sử dụng cho Pseudo Class là không phân biệt kiểu chữ.
Pseudo Class là khác với các Class khác trong CSS, tuy nhiên chúng có thể kết hợp với nhau.

Ví dụ :first-child Pseudo Class trong CSS

Để làm thụt dòng đoạn văn đầu tiên trong các phần tử <div>, bạn có thể sử dụng :first-child Pseudo Class trong CSS như sau:

<html>
   <head>
      <style type="text/css">
         div > p:first-child {
            text-indent: 25px;
         }
      </style>
   </head>
   <body>
   
      <div>
         <p>Doan van thu 1. Doan van nay se bi thut dau dong (thuoc tinh text-indent).</p>
         <p>Doan van thu 2. Doan van nay se khong bi thut dau dong.</p>
      </div>
      <p>Phan tu p phai la phan tu con DAU TIEN trong the div thi moi bi tac dong boi thuoc tinh 
      text-indent, cac doan van khac se khong bi anh huong:</p>
      
      <div>
         <h3>Vi du khac</h3>
         <p>Doan van dau tien trong the div. Doan van nay khong bi anh huong. Vi no khong phai la phan tu con DAU TIEN.</p>
      </div>
      
   </body>
</html>

Quảng cáo

Kết quả là:

Đã có app VietJack trên điện thoại, giải bài tập SGK, SBT Soạn văn, Văn mẫu, Thi online, Bài giảng....miễn phí. Tải ngay ứng dụng trên Android và iOS.

Theo dõi chúng tôi miễn phí trên mạng xã hội facebook và youtube:

Follow fanpage của team https://www.facebook.com/vietjackteam/ hoặc facebook cá nhân Nguyễn Thanh Tuyền https://www.facebook.com/tuyen.vietjack để tiếp tục theo dõi các loạt bài mới nhất về Java,C,C++,Javascript,HTML,Python,Database,Mobile.... mới nhất của chúng tôi.

Bài học CSS phổ biến khác tại vietjack.com: