Sử dụng: nth-of-type (n) với bảng
Để làm cho bảng dễ đọc hơn, thường là hữu ích khi tạo kiểu cho các hàng có màu nền xen kẽ. Một trong những cách phổ biến nhất để tạo kiểu bảng là đặt màu nền của mỗi hàng khác. Điều này thường được gọi là "sọc vằn".
Bạn có thể thực hiện điều này là bằng cách thiết lập mọi hàng khác với một lớp CSS và sau đó xác định kiểu cho lớp đó. Điều này làm việc nhưng không phải là cách tốt nhất hoặc hiệu quả nhất để đi về nó.
Khi sử dụng phương pháp này, mỗi khi bạn cần chỉnh sửa bảng đó, bạn có thể phải chỉnh sửa từng hàng trong bảng để đảm bảo mỗi hàng phù hợp với các thay đổi. Ví dụ, nếu bạn chèn một hàng mới vào bảng của bạn, mọi hàng khác bên dưới nó cần phải thay đổi lớp.
CSS giúp dễ dàng tạo kiểu bảng bằng các sọc vằn. Bạn không cần phải thêm bất kỳ thuộc tính HTML hoặc lớp CSS bổ sung nào, bạn chỉ cần sử dụng bộ chọn CSS : n-of-type (n).
Bộ chọn: n-of-type (n) là một lớp giả cấu trúc trong CSS cho phép bạn tạo kiểu các phần tử dựa trên các mối quan hệ của chúng với các phần tử cha và anh chị em. Bạn có thể sử dụng nó để chọn một hoặc nhiều phần tử dựa trên thứ tự nguồn của chúng. Nói cách khác, nó có thể khớp với mọi phần tử là con thứ n của một kiểu cha mẹ cụ thể.
Chữ n có thể là một từ khóa (chẳng hạn như lẻ hoặc chẵn), một số hoặc một công thức.
Ví dụ: để tạo kiểu cho mỗi thẻ đoạn khác bằng màu nền màu vàng, tài liệu CSS của bạn sẽ bao gồm:
p: nth-of-type (lẻ) {
nền: màu vàng;
}
Bắt đầu với bảng HTML của bạn
Đầu tiên, tạo bảng của bạn như bạn thường viết nó trong HTML. Không thêm bất kỳ lớp đặc biệt nào vào các hàng hoặc cột.
Trong biểu định kiểu của bạn, thêm CSS sau:
tr: nth-of-type (lẻ) {
màu nền: #ccc;
}
Điều này sẽ tạo kiểu cho mỗi hàng khác với màu nền xám bắt đầu bằng hàng đầu tiên.
Các cột thay thế kiểu theo cùng một cách
Bạn có thể làm cùng một kiểu tạo kiểu cho các cột trong bảng của bạn. Để làm như vậy, chỉ cần thay đổi tr trong lớp CSS của bạn thành td. Ví dụ:
td: nth-of-type (lẻ) {
màu nền: #ccc;
}
Sử dụng Công thức trong bộ chọn thứ n (kiểu)
Cú pháp cho công thức được sử dụng trong công cụ chọn là + b.
a là số đại diện cho chu kỳ hoặc kích thước chỉ mục.
n thực sự là chữ cái "n" và đại diện cho một bộ đếm, với 0.
+ là toán tử, cũng có thể là "-"
b là một số nguyên và đại diện cho giá trị bù trừ — ví dụ, số lượng hàng xuống nên bộ chọn bắt đầu áp dụng màu nền. Điều này là bắt buộc nếu một toán tử được bao gồm trong công thức.
Ví dụ: nếu bạn muốn đặt màu nền cho mỗi hàng thứ 3, công thức của bạn sẽ là 3n + 0. CSS của bạn có thể trông giống như sau:
tr: nth-of-type (3n + 0) {
nền: slategray;
}
Công cụ hữu ích để sử dụng bộ chọn loại thứ n
Nếu bạn cảm thấy hơi khó chịu bởi khía cạnh công thức của việc sử dụng bộ chọn loại thứ nse-of-type, hãy thử trang web thử nghiệm thứ năm như một công cụ hữu ích có thể giúp bạn xác định cú pháp để đạt được giao diện bạn muốn. Sử dụng trình đơn thả xuống để chọn loại thứ n (bạn cũng có thể thử nghiệm với các lớp giả khác ở đây, chẳng hạn như nth-child).