Hướng dẫn css get last child element - css lấy phần tử con cuối cùng

Thử nó

Cú pháp

Ví dụ

Ví dụ cơ bản

HTML

<div>
  <p>This text isn't selected.p>
  <p>This text is selected!p>
div>

<div>
  <p>This text isn't selected.p>
  <h2>This text isn't selected: it's not a `p`.h2>
div>

CSS

p:last-child {
  color: lime;
  background-color: black;
  padding: 5px;
}

Kết quả

Tạo kiểu một danh sách

HTML

<ul>
  <li>Item 1li>
  <li>Item 2li>
  <li>
    Item 3
    <ul>
      <li>Item 3.1li>
      <li>Item 3.2li>
      <li>Item 3.3li>
    ul>
  li>
ul>

CSS

ul li {
  color: blue;
}

ul li:last-child {
  border: 1px solid red;
  color: red;
}

Kết quả

Bảng BCD chỉ tải trong trình duyệt

Thử nó

Cú pháp

Phân loại giả

p:last-child {
  color: lime;
  background-color: black;
  padding: 5px;
}

:nth-last-child(  [ of  ]? )

Giá trị từ khóa

p:last-child {
  color: lime;
  background-color: black;
  padding: 5px;
}

Đại diện cho các yếu tố có vị trí số trong một loạt anh chị em là lẻ: 1, 3, 5, v.v., đếm từ cuối.

p:last-child {
  color: lime;
  background-color: black;
  padding: 5px;
}

Đại diện cho các yếu tố có vị trí số trong một loạt các anh chị em thậm chí là: 2, 4, 6, v.v., đếm từ cuối.

Ký hiệu chức năng

p:last-child {
  color: lime;
  background-color: black;
  padding: 5px;
}

Đại diện cho các yếu tố có vị trí số trong một loạt các anh chị em phù hợp với mẫu

p:last-child {
  color: lime;
  background-color: black;
  padding: 5px;
}

p:last-child {
  color: lime;
  background-color: black;
  padding: 5px;
}

p:last-child {
  color: lime;
  background-color: black;
  padding: 5px;
}

p:last-child {
  color: lime;
  background-color: black;
  padding: 5px;
}

p:last-child {
  color: lime;
  background-color: black;
  padding: 5px;
}

<ul>
  <li>Item 1li>
  <li>Item 2li>
  <li>
    Item 3
    <ul>
      <li>Item 3.1li>
      <li>Item 3.2li>
      <li>Item 3.3li>
    ul>
  li>
ul>

Ví dụ

Ví dụ bộ chọn

<ul>
  <li>Item 1li>
  <li>Item 2li>
  <li>
    Item 3
    <ul>
      <li>Item 3.1li>
      <li>Item 3.2li>
      <li>Item 3.3li>
    ul>
  li>
ul>

<ul>
  <li>Item 1li>
  <li>Item 2li>
  <li>
    Item 3
    <ul>
      <li>Item 3.1li>
      <li>Item 3.2li>
      <li>Item 3.3li>
    ul>
  li>
ul>

Đại diện cho các hàng lẻ của một bảng HTML: 1, 3, 5, v.v., đếm từ cuối.

<ul>
  <li>Item 1li>
  <li>Item 2li>
  <li>
    Item 3
    <ul>
      <li>Item 3.1li>
      <li>Item 3.2li>
      <li>Item 3.3li>
    ul>
  li>
ul>

<ul>
  <li>Item 1li>
  <li>Item 2li>
  <li>
    Item 3
    <ul>
      <li>Item 3.1li>
      <li>Item 3.2li>
      <li>Item 3.3li>
    ul>
  li>
ul>

Đại diện cho các hàng chẵn của một bảng HTML: 2, 4, 6, v.v., đếm từ cuối.

<ul>
  <li>Item 1li>
  <li>Item 2li>
  <li>
    Item 3
    <ul>
      <li>Item 3.1li>
      <li>Item 3.2li>
      <li>Item 3.3li>
    ul>
  li>
ul>

Đại diện cho yếu tố thứ bảy, đếm từ cuối.

<ul>
  <li>Item 1li>
  <li>Item 2li>
  <li>
    Item 3
    <ul>
      <li>Item 3.1li>
      <li>Item 3.2li>
      <li>Item 3.3li>
    ul>
  li>
ul>

Đại diện cho các yếu tố 5, 10, 15, v.v., đếm từ cuối.

<ul>
  <li>Item 1li>
  <li>Item 2li>
  <li>
    Item 3
    <ul>
      <li>Item 3.1li>
      <li>Item 3.2li>
      <li>Item 3.3li>
    ul>
  li>
ul>

Đại diện cho các yếu tố 4, 7, 10, 13, v.v., đếm từ cuối.

<ul>
  <li>Item 1li>
  <li>Item 2li>
  <li>
    Item 3
    <ul>
      <li>Item 3.1li>
      <li>Item 3.2li>
      <li>Item 3.3li>
    ul>
  li>
ul>

Đại diện cho ba yếu tố cuối cùng trong số một nhóm anh chị em.

<ul>
  <li>Item 1li>
  <li>Item 2li>
  <li>
    Item 3
    <ul>
      <li>Item 3.1li>
      <li>Item 3.2li>
      <li>Item 3.3li>
    ul>
  li>
ul>

ul li {
  color: blue;
}

ul li:last-child {
  border: 1px solid red;
  color: red;
}

Đại diện cho mọi yếu tố

ul li {
  color: blue;
}

ul li:last-child {
  border: 1px solid red;
  color: red;
}

ul li {
  color: blue;
}

ul li:last-child {
  border: 1px solid red;
  color: red;
}

ul li {
  color: blue;
}

ul li:last-child {
  border: 1px solid red;
  color: red;
}

ul li {
  color: blue;
}

ul li:last-child {
  border: 1px solid red;
  color: red;
}

Đại diện cho mỗi

ul li {
  color: blue;
}

ul li:last-child {
  border: 1px solid red;
  color: red;
}

Ví dụ bảng

HTML

<table>
  <tbody>
    <tr>
      <td>First linetd>
    tr>
    <tr>
      <td>Second linetd>
    tr>
    <tr>
      <td>Third linetd>
    tr>
    <tr>
      <td>Fourth linetd>
    tr>
    <tr>
      <td>Fifth linetd>
    tr>
  tbody>
table>

CSS

table {
  border: 1px solid blue;
}

/* Selects the last three elements */
tr:nth-last-child(-n + 3) {
  background-color: pink;
}

/* Selects every element starting from the second to last item */
tr:nth-last-child(n + 2) {
  color: blue;
}

/* Select only the last second element */
tr:nth-last-child(2) {
  font-weight: 600;
}

Kết quả

Truy vấn số lượng

Một yếu tố kiểu truy vấn số lượng tùy thuộc vào số lượng trong số chúng có. Trong ví dụ này, danh sách các mục chuyển sang màu đỏ khi có ít nhất ba trong số chúng trong một danh sách nhất định. Điều này được thực hiện bằng cách kết hợp các khả năng của lớp giả pseudo và tổ hợp anh chị em chung.

HTML

<h4>A list of four items (styled):h4>
<ol>
  <li>Oneli>
  <li>Twoli>
  <li>Threeli>
  <li>Fourli>
ol>

<h4>A list of two items (unstyled):h4>
<ol>
  <li>Oneli>
  <li>Twoli>
ol>

CSS

/* If there are at least three list items,
   style them all */
li:nth-last-child(n + 3),
li:nth-last-child(3) ~ li {
  color: red;
}

Kết quả

Xem thêm