Giả lớp nth-of-type

Giả lớp nth-of-type chọn một phần tử, là phần tử con thứ n của kiểu được chỉ định.

Tức là, nếu tôi viết h2:nth-of-type(4) - nó sẽ tìm thấy h2 thứ 4 trong phần tử cha (khác với nth-child, mà chỉ tìm thấy h2 nào là phần tử thứ 4 trong phần tử cha).

Cú pháp

cssbộ_chọn:nth-of-type(số | odd | even | biểu_thức){

}

Giá trị

Giá trị	Mô tả
số	Số nguyên dương bắt đầu từ `1`. Chỉ định số thứ tự của phần tử mà chúng ta muốn áp dụng. Đánh số phần tử bắt đầu từ `1`.
`odd`	Các phần tử lẻ.
`even`	Các phần tử chẵn.
biểu_thức	Có thể tạo các biểu thức đặc biệt với chữ cái n, biểu thị tất cả các số nguyên từ không (không phải từ một) đến vô cùng. Vậy `2n` - có nghĩa là tất cả các số chẵn (bắt đầu từ số thứ hai). Hiểu điều này như thế nào? Thay thế `n` lần lượt bằng các số từ `0` trở đi: nếu n = 0, thì 2n cho ra 0 - không có phần tử như vậy (đánh số phần tử bắt đầu từ 1), nếu n = 1, thì 2n cho ra 2 - phần tử thứ hai, nếu n = 2, 2n cho ra 4 - phần tử thứ tư. Nếu viết 3n - đây sẽ là mỗi phần tử thứ ba (bắt đầu từ phần tử thứ ba), và cứ thế.

Ví dụ

Tìm h2 là h2 thứ 2 trong phần tử cha:

html<div>
  <h2>tiêu đề</h2>
  <p>đoạn văn</p>
  
  <h2>tiêu đề</h2>
  <p>đoạn văn</p>
  
  <h2>tiêu đề</h2>
  <p>đoạn văn</p>
</div>

cssh2:nth-of-type(2) {
  color: red;
}

Результат:

Ví dụ

Tìm tất cả các h2 chẵn:

html<div>
  <h2>tiêu đề</h2>
  <p>đoạn văn</p>
  
  <h2>tiêu đề</h2>
  <p>đoạn văn</p>
  
  <h2>tiêu đề</h2>
  <p>đoạn văn</p>
  
  <h2>tiêu đề</h2>
  <p>đoạn văn</p>
  
  <h2>tiêu đề</h2>
  <p>đoạn văn</p>
</div>

cssh2:nth-of-type(even) {
  color: red;
}

Результат:

Ví dụ

Tìm tất cả các h2 lẻ:

html<div>
  <h2>tiêu đề</h2>
  <p>đoạn văn</p>
  
  <h2>tiêu đề</h2>
  <p>đoạn văn</p>
  
  <h2>tiêu đề</h2>
  <p>đoạn văn</p>
  
  <h2>tiêu đề</h2>
  <p>đoạn văn</p>
  
  <h2>tiêu đề</h2>
  <p>đoạn văn</p>
</div>

cssh2:nth-of-type(odd) {
  color: red;
}

Результат: