:last-of-type
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
Lớp giả CSS :last-of-type đại diện cho phần tử cuối cùng thuộc kiểu của nó (tên thẻ) trong một nhóm các phần tử anh em.
Try it
dt {
font-weight: bold;
}
dd {
margin: 3px;
}
dd:last-of-type {
border: 2px solid orange;
}
<dl>
<dt>Vegetables:</dt>
<dd>1. Tomatoes</dd>
<dd>2. Cucumbers</dd>
<dd>3. Mushrooms</dd>
<dt>Fruits:</dt>
<dd>4. Apples</dd>
<dd>5. Mangos</dd>
<dd>6. Pears</dd>
<dd>7. Oranges</dd>
</dl>
Cú pháp
css
:last-of-type {
/* ... */
}
Ví dụ
Tạo kiểu cho đoạn văn cuối cùng
HTML
html
<h2>Heading</h2>
<p>Paragraph 1</p>
<p>Paragraph 2</p>
CSS
css
p:last-of-type {
color: red;
font-style: italic;
}
Kết quả
Phần tử lồng nhau
Ví dụ này minh họa cách các phần tử lồng nhau cũng có thể được nhắm tới. Lưu ý rằng bộ chọn toàn cục (*) được ngầm định khi không có bộ chọn đơn giản nào được viết.
HTML
html
<article>
<div>This `div` is first.</div>
<div>This <span>nested `span` is last</span>!</div>
<div>
This <em>nested `em` is first</em>, but this <em>nested `em` is last</em>!
</div>
<p>This `p` qualifies!</p>
<div>This is the final `div`!</div>
</article>
CSS
css
article :last-of-type {
background-color: pink;
}
Kết quả
Phần tử có nhiều bộ chọn
Ví dụ HTML này chứa các phần tử lồng nhau thuộc nhiều kiểu khác nhau. CSS chứa cả bộ chọn theo kiểu và bộ chọn theo lớp.
HTML
html
<p>This `p` is not selected.</p>
<p>This `p` is not selected either.</p>
<p>
This `p` is last `p` element of its parent e.g. `body` selected by `p` type
selector.
</p>
<div class="container">
<div class="item">This `div` is not selected.</div>
<div class="item">This `div` is not selected either.</div>
<div class="item">
This `div` is last `div` element of its parent `div` selected by `.container
.item` class selector.
</div>
<p class="item">
This `p` is last `p` element of its parent `div` selected by `.container
.item` class selector.
</p>
</div>
CSS
css
p:last-of-type {
background: skyblue;
}
.container .item:last-of-type {
color: red;
font-weight: bold;
}
Kết quả
<div> cuối cùng và <p> cuối cùng đều có màu đỏ và in đậm vì .item:last-of-type chọn phần tử cuối của mỗi kiểu nếu phần tử cuối đó cũng có lớp item.
Đặc tả
| Specification |
|---|
| Selectors Level 4 # last-of-type-pseudo |