CSS con thứ N:Hướng dẫn đầy đủ

Bộ chọn CSS:nth-child () áp dụng một kiểu cho các phần tử ở một vị trí cụ thể trong một nhóm. Thông thường, bộ chọn:nth-child () được sử dụng để tạo kiểu cho các mục danh sách cụ thể, chẳng hạn như mọi mục thứ hai hoặc thứ ba.

Khi thiết kế một trang web, bạn có thể chỉ muốn áp dụng một kiểu cho một tập hợp các phần tử được chọn trong vùng chứa. Ví dụ:bạn có thể chỉ muốn áp dụng một kiểu cho mọi phần tử thứ hai trong danh sách hoặc mọi hàng thứ ba trong bảng.

Đó là nơi xuất hiện của CSS:nth-child pseudo-class. Lớp giả:nth-child khớp các phần tử dựa trên vị trí của chúng trong danh sách các mục trên trang HTML.

Hướng dẫn này sẽ thảo luận, có tham chiếu đến các ví dụ, khái niệm cơ bản về lớp giả và cách bạn có thể sử dụng:lớp giả nth-con. Khi đọc xong hướng dẫn này, bạn sẽ trở thành chuyên gia trong việc sử dụng lớp giả:nth-child để chọn các phần tử trên trang web.

Lớp giả CSS

Trong CSS, bộ chọn được sử dụng để chọn các phần tử cụ thể trên trang web mà một kiểu sẽ được áp dụng. Ví dụ:một bộ chọn có thể thay đổi màu văn bản của tất cả các phần tử

trên trang web thành màu xanh lục.

Bạn có thể quyết định rằng bạn chỉ muốn áp dụng một kiểu cho một phần tử tồn tại trong một trạng thái cụ thể. Các lớp giả chỉ cho phép bạn áp dụng kiểu khi một phần tử ở trạng thái cụ thể.

CSS:nth-child Pseudo-Class

Lớp giả:nth-child áp dụng kiểu cho các phần tử trong một nhóm. Bạn có thể áp dụng kiểu cho một phần tử cụ thể dựa trên vị trí của nó hoặc nhiều phần tử. Một quy tắc phổ biến:thứ n-con là tô màu mọi phần tử ở vị trí lẻ hoặc chẵn trong danh sách.

Đây là cú pháp của:nth-child pseudo-class:

81% người tham gia cho biết họ cảm thấy tự tin hơn về triển vọng công việc công nghệ của mình sau khi tham gia một cuộc thi đào tạo. Kết hợp với bootcamp ngay hôm nay.

Sinh viên tốt nghiệp bootcamp trung bình dành ít hơn sáu tháng để chuyển đổi nghề nghiệp, từ khi bắt đầu bootcamp đến khi tìm được công việc đầu tiên của họ.

li:nth-child(2) {
	color: lightblue;
}

Hãy phân tích ví dụ này:

li đề cập đến yếu tố mà một phong cách sẽ được áp dụng.
đứa trẻ thứ n là bộ chọn được sử dụng để so khớp một phần tử.
2 là công thức được sử dụng để so khớp một phần tử bằng cách sử dụng nth-child.

Trong trường hợp này, chúng tôi đã áp dụng kiểu của mình cho mỗi phần tử

giây trong danh sách.

:Giá trị được chấp nhận của nth-child

Lớp giả:nth-child chấp nhận hai loại giá trị. Đầu tiên, lớp giả chấp nhận các giá trị từ khóa được gán công thức mặc định. Các từ khóa này là:

lẻ:Chọn các phần tử có vị trí trong danh sách là một số lẻ.
chẵn:Chọn các phần tử có vị trí trong danh sách là số chẵn.

Thứ hai, lớp giả:nth-child chấp nhận một công thức tùy chỉnh chỉ định các phần tử mà lớp giả sẽ chọn trên một trang web. Dưới đây là một vài công thức ví dụ:

:nth-child (6):Chọn phần tử thứ sáu trong danh sách.
:nth-child (n + 2):Chọn phần tử thứ hai và tất cả các phần tử tiếp theo.
:nth-child (4n):Chọn tất cả các phần tử là bội số của 4.

n bằng với vị trí mà một mục xuất hiện trong danh sách.

Bây giờ chúng ta đã biết những điều cơ bản về lớp giả:nth-child, chúng ta có thể khám phá một vài ví dụ về lớp giả đang hoạt động.

Ví dụ về CSS:nth-child

Hãy xem qua hai ví dụ về:lớp giả nth-child.

:Bảng thứ n

Một cách sử dụng phổ biến của:lớp giả nth-child là chọn các hàng trong bảng.

Giả sử chúng ta đang thiết kế một trang web cho một câu lạc bộ nấu ăn địa phương. Câu lạc bộ đã yêu cầu chúng tôi đặt một bảng cho trang web của họ với công thức cho sô cô la nóng có gia vị đặc biệt của họ . Câu lạc bộ muốn mọi hàng thứ hai trong bảng được đánh dấu bằng màu hồng nóng, đây là màu chính của câu lạc bộ.

Chúng tôi có thể tạo bảng này bằng mã sau:

<html>

<table>
  <tr>
    <th>Ingredient</th>
    <th>Quantity</th>
  </tr>
  <tr>
    <td>Skimmed Milk</td>
    <td>250 mls</td>
  </tr>
  <tr>
    <td>75% Dark Chocolate</td>
    <td>Two squares (10g)</td>
  </tr>
  <tr>
    <td>Cinnamon</td>
    <td>A pinch</td>
  </tr>
  <tr>
    <td>Honey</td>
    <td>1 tsp</td>
  </tr>
</table>

<style>
  tr:nth-child(even) {
      background-color: hotpink;
  }
</style>

CSS con thứ N:Hướng dẫn đầy đủ nút trong trình chỉnh sửa mã ở trên để xem đầu ra của mã HTML / CSS của chúng tôi.

Chúng tôi đã xác định một bảng có hai cột và năm hàng (một trong số đó là hàng tiêu đề). Cột đầu tiên lưu trữ danh sách các thành phần được sử dụng để làm sô cô la nóng tẩm gia vị. Cột thứ hai của chúng tôi lưu trữ số lượng của từng thành phần được sử dụng.

Để tìm hiểu thêm về cách tạo bảng trong HTML, hãy đọc hướng dẫn của chúng tôi về bảng HTML.

Trong tệp CSS của chúng tôi, chúng tôi đã sử dụng lớp giả:nth-child để áp dụng một kiểu cho mọi hàng được đánh số chẵn trong bảng của chúng tôi.

Các tr bộ chọn được sử dụng để chọn tất cả các hàng trong bảng (được biểu thị bằng thẻ trong HTML) và lớp giả:nth-child (chẵn) chọn mọi hàng trong bảng có số ID chẵn. Đối với mỗi hàng trong bảng được đánh số chẵn, màu nền của hàng trong bảng được đặt thành màu hồng nóng.

:Danh sách thứ n

Một cách sử dụng phổ biến khác của:lớp giả nth-child là đánh dấu các mục trong danh sách.

Giả sử chúng ta được yêu cầu tập hợp một danh sách tên của từng thành viên trong câu lạc bộ nấu ăn. Văn bản cho ba cái tên đầu tiên trong danh sách phải xuất hiện bằng màu xanh lam nhạt, vì họ đang nắm giữ các danh hiệu trong câu lạc bộ.

Chúng tôi có thể tạo danh sách này bằng mã sau:

<html>

<ul>
	<li>Chad Bakersfield</li>
	<li>Laura Patel</li>
	<li>Eddie Mahoney</li>
	<li>Edna Jamieson</li>
	<li>Lesley Spencer</li>
	<li>James Moffat</li>
	<li>Olivia Lindsay</li>
<ul>

<style>
  li:nth-child(-n+3) {
      color: lightblue;
  }
</style>