:first-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.
:first-of-type là lớp giả (pseudo-class) trong CSS, đại diện cho phần tử đầu tiên thuộc kiểu của nó (theo tên thẻ) trong một nhóm các phần tử anh chị em.
Try it
dt {
font-weight: bold;
}
dd {
margin: 3px;
}
dd:first-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
:first-of-type {
/* ... */
}
Ví dụ
Tạo kiểu cho đoạn văn đầu tiên
HTML
html
<h2>Heading</h2>
<p>Paragraph 1</p>
<p>Paragraph 2</p>
CSS
css
p:first-of-type {
color: red;
font-style: italic;
}
Kết quả
Các phần tử lồng nhau
Ví dụ này cho thấy cách các phần tử lồng nhau cũng có thể được chọn. Lưu ý rằng bộ chọn phổ quát (*) được ngầm hiểu khi không có bộ chọn kiểu nào được viết.
HTML
html
<article>
<div>This `div` is first!</div>
<div>This <span>nested `span` is first</span>!</div>
<div>
This <em>nested `em` is first</em>, but this <em>nested `em` is last</em>!
</div>
<div>This <span>nested `span` gets styled</span>!</div>
<p>This `p` qualifies!</p>
<div>This is the final `div`.</div>
</article>
CSS
css
article :first-of-type {
background-color: pink;
}
Kết quả
Đặc tả kỹ thuật
| Thông số kỹ thuật |
|---|
| Selectors Level 4 # first-of-type-pseudo |