:first-child Pseudo Class trong CSS

Trang trước
Trang sau  

: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ông cụ giáo viên (2048.VN)

Tạo- trộn đề thi miễn phí từ file PDF, Word, Giao bài nhanh chóng, Hoàn toàn Free

Tạo đề, số hóa đề thi từ PDF/Word/Excel Nhập đề nhanh, trích xuất nội dung tự động. Trộn đề thành nhiều mã, Download/In đề thi offline Tạo nhiều mã đề khác nhau, xuất file hoặc in dễ dàng. Quản lý lớp học Theo dõi học sinh, điểm số và kết quả học tập trực quan. Giao bài tập, tổ chức thi kiểm tra trực tuyến Giao bài, chấm điểm và thống kê kết quả ngay trên hệ thống.
Khám phá công cụ
Trang trước
Trang sau  
Bài viết liên quan