Hướng dẫn nth-of-type trong css

Question

Trang chủ
Tham khảo
CSS
CSS3
:nth-of-type(n)

Nội dung chính Show

Định nghĩa và sử dụng
Cấu trúc
Trình duyệt hỗ trợ
1) Bộ chọn :nth-of-type(n) trong CSS
2) Cách sử dụng bộ chọn :nth-of-type(n) trong CSS
3) Một số ví dụ
Definition and Usage
Browser Support
More Examples

Định nghĩa và sử dụng

":nth-of-type(n)" chọn thành phần thứ "n", gốc tính được tính từ thành phần đầu tiên trở đi.
Thứ tự "n" được tính cho tất cả các thành phần cùng cấp.
Giá trị "n" có thể là số, keyword hay công thức.

Cấu trúc

:nth-of-type(n) {
    property: value; 
}

Ví dụ

HTML viết:

<html>
<head></head>
<body>
<p>Thành phần độc lập thứ nhất</p>
<p>Thành phần độc lập thứ 2</p>
<p>Thành phần độc lập thứ 3</p>
<p>Thành phần độc lập thứ 4</p>
<p>Thành phần độc lập thứ 5</p>
<p>Thành phần độc lập thứ 6</p>

<div>
    <p>Thành phần thứ nhất</p>
    <p>Thành phần thứ 2</p>
    <p>Thành phần thứ 3</p>
    <p>Thành phần thứ 4</p>
    <p>Thành phần thứ 5</p>
    <p>Thành phần thứ 6</p>
</div>

<div>
    <h4>Thành phần thứ nhất</h4>
    <div>Thành phần thứ 2</div>
    <p>Thành phần thứ 3</p>
    <p>Thành phần thứ 4</p>
    <p>Thành phần thứ 5</p>
    <p>Thành phần thứ 6</p>
</div>

<div>
    <h4>Thành phần thứ nhất</h4>
    <ul>
        <li>ul cùng cấp với p, nên tất cả li bên trong đều được coi là thành phần thứ 2</li>
        <li>ul cùng cấp với p, nên tất cả li bên trong đều được coi là thành phần thứ 2</li>
    </ul>
    <p>Thành phần thứ 3</p>
    <p>Thành phần thứ 4</p>
    <p>Thành phần thứ 5</p>
    <p>Thành phần thứ 6</p>
</div>
</body>
</html>

Hiển thị trình duyệt khi chưa có CSS:

Thành phần độc lập thứ nhất

Thành phần độc lập thứ 2

Thành phần độc lập thứ 3

Thành phần độc lập thứ 4

Thành phần độc lập thứ 5

Thành phần độc lập thứ 6

Thành phần thứ nhất

Thành phần thứ 2

Thành phần thứ 3

Thành phần thứ 4

Thành phần thứ 5

Thành phần thứ 6

Thành phần thứ nhất

Thành phần thứ 2

Thành phần thứ 3

Thành phần thứ 4

Thành phần thứ 5

Thành phần thứ 6

Thành phần thứ nhất

ul cùng cấp với p, nên tất cả li bên trong đều được coi là thành phần thứ 2
ul cùng cấp với p, nên tất cả li bên trong đều được coi là thành phần thứ 2

Thành phần thứ 3

Thành phần thứ 4

Thành phần thứ 5

Thành phần thứ 6

CSS viết:

p:nth-of-type(3){
    color: blue;
}

Hiển thị trình duyệt khi đã có css:

Thành phần độc lập thứ nhất

Thành phần độc lập thứ 2

Thành phần độc lập thứ 3

Thành phần độc lập thứ 4

Thành phần độc lập thứ 5

Thành phần độc lập thứ 6

Thành phần thứ nhất

Thành phần thứ 2

Thành phần thứ 3

Thành phần thứ 4

Thành phần thứ 5

Thành phần thứ 6

Thành phần thứ nhất

Thành phần thứ 2

Thành phần thứ 3

Thành phần thứ 4

Thành phần thứ 5

Thành phần thứ 6

Thành phần thứ nhất

ul cùng cấp với p, nên tất cả li bên trong đều được coi là thành phần thứ 2
ul cùng cấp với p, nên tất cả li bên trong đều được coi là thành phần thứ 2

Thành phần thứ 3

Thành phần thứ 4

Thành phần thứ 5

Thành phần thứ 6

Ta thấy những thành phần <p> ở vị trí thứ 3 đều đã được chọn.

Trình duyệt hỗ trợ

":nth-of-type(n)" được hỗ trợ trong đa số các trình duyệt, ngoài trừ trình duyệt Internet Explorer 8 trở xuống.

1) Bộ chọn :nth-of-type(n) trong CSS

- Bộ chọn :nth-of-type(n) dùng để chọn những phần tử là phần tử con (thuộc một kiểu nào đó) thứ n của cha nó.

2) Cách sử dụng bộ chọn :nth-of-type(n) trong CSS

- Để sử dụng bộ chọn :nth-of-type(n), ta dùng cú pháp như sau:

:nth-of-type(n){
    các khai báo định dạng CSS
}

3) Một số ví dụ

- Chọn những phần tử <p> là phần tử có kiểu <p> thứ ba bên trong cha nó.

p:nth-of-type(3){
    border:1px solid black;
}

Xem ví dụ

p:nth-of-type(odd){
    border:1px solid black;
}
p:nth-of-type(even){
    border:1px solid red;
}

Xem ví dụ

p:nth-of-type(2n + 0){
    border:1px solid black;
}

Xem ví dụ

Example

How to use the :nth-of-type() selector:

/* Selects the second element of div siblings */
div:nth-of-type(2) {
background: red;
}

/* Selects the second li element in a list */
li:nth-of-type(2) {
background: lightgreen;
}

/* Selects every third element among any group of siblings */
:nth-of-type(3) {
background: yellow;
}

Try it Yourself »

More "Try it Yourself" examples below.

Definition and Usage

The :nth-of-type(n) selector matches every element that is the nth child, of the same type (tag name), of its parent.

n can be a number, a keyword (odd or even), or a formula (like an + b).

Tip: Look at the :nth-child() selector to select the element that is the nth child, regardless of type, of its parent.

Version:	CSS3

Browser Support

The numbers in the table specifies the first browser version that fully supports the selector.

Selector
:nth-of-type()	4.0	9.0	3.5	3.2	9.6

CSS Syntax

:nth-of-type(number) {
css declarations;
} Demo

More Examples

Example

Odd and even are keywords that can be used to match child elements whose index is odd or even (the index of the first child is 1).

Here, we specify two different background colors for odd and even p elements:

p:nth-of-type(odd) {
background: red;
}

p:nth-of-type(even) {
background: blue;
}

Try it Yourself »

Example

Using a formula (an + b). Description: a represents a cycle size, n is a counter (starts at 0), and b is an offset value.

Here, we specify a background color for all p elements whose index is a multiple of 3 (will select the third, sixth, ninth, etc):

p:nth-of-type(3n+0) {
background: red;
}

Try it Yourself »

Example

Here, we specify a background color for all p elements whose index is a multiple of 3. Then we subtract 1 (will select the second, fifth, eight, etc):

p:nth-of-type(3n-1) {
background: red;
}

Try it Yourself »

programming css