Pseudo-classes của cấu trúc

3.1 Pseudo-class :first-child

Pseudo-classes của cấu trúc trong CSS cho phép chọn và định dạng các phần tử dựa trên vị trí của chúng trong cây tài liệu. Điều này đặc biệt hữu ích để tạo ra các kiểu dáng chi tiết hơn, áp dụng cho các phần tử cụ thể. Hãy xem xét các pseudo-classes :first-child, :last-child, :nth-child và :nth-of-type.

Pseudo-class :first-child chọn phần tử con đầu tiên của cha nó. Điều này hữu ích cho việ định dạng phần tử đầu tiên trong một nhóm các phần tử giống nhau, chẳng hạn như danh sách hoặc đoạn văn.

Cú pháp:

    
      selector:first-child {
        properties: values;
      }
    
  

Ví dụ sử dụng

Trong ví dụ này, phần tử đầu tiên của danh sách được định dạng chữ đậm và màu đỏ, và đoạn văn đầu tiên bên trong div được chuyển thành chữ hoa:

    
      /* Định dạng phần tử đầu tiên của danh sách */

      li:first-child {
        font-weight: bold;
        color: red;
      }

      /* Định dạng đoạn văn đầu tiên trong div */

      div p:first-child {
        text-transform: uppercase;
      }
    
  

3.2 Pseudo-class :last-child

Pseudo-class :last-child chọn phần tử con cuối cùng của cha nó. Nó được sử dụng để định dạng phần tử cuối cùng trong một nhóm các phần tử giống nhau.

Cú pháp:

    
      selector:last-child {
        properties: values;
      }
    
  

Ví dụ sử dụng

Trong ví dụ này, phần tử cuối cùng của danh sách được định dạng chữ nghiêng và màu xanh, và đoạn văn cuối cùng bên trong div được gạch chân:

    
      /* Định dạng phần tử cuối cùng của danh sách */

      li:last-child {
        font-style: italic;
        color: blue;
      }

      /* Định dạng đoạn văn cuối cùng trong div */

      div p:last-child {
        text-decoration: underline;
      }
    
  

3.3 Pseudo-class :nth-child

Pseudo-class :nth-child cho phép chọn các phần tử dựa trên vị trí của chúng trong nhóm. Nó chấp nhận đối số xác định phần tử nào sẽ được chọn. Đối số có thể là một số, từ khóa hoặc biểu thức.

Cú pháp:

    
      selectornth-child(argument) {
        properties: values;
      }
    
  

Đối số:

• Số: chọn phần tử ở vị trí chỉ định
• Từ khóa: odd (lẻ) và even (chẵn)
• Biểu thức: định dạng an+b, trong đó a và b là số

Ví dụ 1: Chọn phần tử lẻ

Trong ví dụ này, tất cả các phần tử lẻ của danh sách được định dạng với nền màu xám nhạt:

    
      /* Định dạng phần tử lẻ của danh sách */

      li:nth-child(odd) {
        background-color: #f0f0f0;
      }
    
  

Ví dụ 2: Chọn phần tử ở vị trí xác định

Trong ví dụ này, phần tử thứ ba của danh sách được định dạng chữ đậm và màu xanh lá:

    
      /* Định dạng phần tử thứ ba của danh sách */

      li:nth-child(3) {
        font-weight: bold;
        color: green;
      }
    
  

Ví dụ 3: Sử dụng biểu thức

Trong ví dụ này, mỗi phần tử thứ hai, bắt đầu từ phần tử đầu tiên, được định dạng với nền màu xám nhạt:

    
      /* Định dạng mỗi phần tử thứ hai, bắt đầu từ phần tử đầu tiên */

      li:nth-child(2n+1) {
        background-color: #e0e0e0;
      }
    
  

3.4 Pseudo-class :nth-of-type

Pseudo-class :nth-of-type giống như :nth-child, nhưng nó chọn các phần tử dựa trên loại của chúng trong số các phần tử con của cha chung. Điều này cho phép chọn các loại phần tử cụ thể, ngay cả khi chúng không phải là con đầu tiên của cha chúng.

Cú pháp:

    
      selector:nth-of-type(argument) {
        properties: values;
      }
    
  

Đối số:

• Số: chọn phần tử ở vị trí chỉ định trong các phần tử cùng loại
• Từ khóa: odd (lẻ) và even (chẵn)
• Biểu thức: định dạng an+b, trong đó a và b là số

Ví dụ 1: Chọn đoạn văn chẵn

Trong ví dụ này, tất cả các đoạn văn chẵn được định dạng với nền màu xám nhạt:

    
      /* Định dạng đoạn văn chẵn */

      p:nth-of-type(even) {
        background-color: #d0d0d0;
      }
    
  

Ví dụ 2: Chọn phần tử ở vị trí xác định trong số cùng loại

Trong ví dụ này, tiêu đề thứ hai h2 được tăng kích thước và có màu cam:

    
      /* Định dạng tiêu đề h2 thứ hai */

      h2:nth-of-type(2) {
        font-size: 2em;
        color: orange;
      }
    
  

Ví dụ 3: Sử dụng biểu thức

Trong ví dụ này, mỗi phần tử thứ ba trong danh sách, bắt đầu từ phần tử thứ hai, được định dạng với nền màu xám nhạt:

    
      /* Định dạng mỗi phần tử thứ ba trong danh sách, bắt đầu từ phần tử thứ hai */

      li:nth-of-type(3n+2) {
        background-color: #c0c0c0;
      }