Liên hệ
Ủng hộ, đăng ký theo dõi kênh

Pseudo-Class trong CSS3

Sử dụng Pseudo-Class để chọn ra phần tử trong CSS3 với các Pseudo-Class hay dùng như :first-child :last-child

Pseudo-Class

Kỹ thuật pseudo-class cho phép định kiểu phần tử, các phần của phần tử trong cây HTML mà không cần phải dùng đến JavaScript

Một pseudo-classe bắt đầu bởi dấu hai chấm :

Ví dụ pseudo-class hay dùng là :first-child:last-child

:first-child chọn ra phần tử con đầu tiên trong các phần tử

Ví dụ thiết lập định dạng cho đoạn văn thứ nhất trong khối có id là parent

<style>
    #parent p:first-child {
        color: green;
        text-decoration: underline;
    }
</style>

<div id="parent">
    <p>Đoạn văn thứ nhất</p>
    <p>Đoạn văn thứ hai</p>
    <p>Đoạn văn thứ ba</p>
</div>

Đoạn văn thứ nhất

Đoạn văn thứ hai

Đoạn văn thứ ba

Danh sách các Pseudo-Class

Selector Ví dụ Diễn tả ví dụ
:active a:active Chọn link trạng thái active
:checked input:checked Chọn phần tử <input> có trạng thái checked
:disabled input:disabled Chọn các phần tử <input> trạng thái disabled
:empty p:empty chọn các phần tử <p> không chứa phần tử con
:enabled input:enabled Chọn các phần tử <input> trạng thái enabled
:first-child p:first-child Chọn các phần tử là phần tử con đầu tiên của <p>
:first-of-type p:first-of-type Chọn mọi phần tử <p> mà nó là phần tử đầu tiên trong phần tử cha.
:focus input:focus Chọn phần tử <input> đang là focus
:hover a:hover Chọn phần tử a mà chuột ở phía trên
:last-child p:last-child Chọn phần tử <p> là phần tử cuối cùng trong phần tử cha
:last-of-type p:last-of-type Chọn phần tử <p> là phần tử cuối cùng trong phần tử cha
:link a:link Các link chưa được truy cập
:not(selector) :not(p) Chọn mọi phần tử không phải <p>
:nth-child(n) p:nth-child(2) Chọn ra mọi phần tử <p> là phần tử thứ 2 trong phần tử cha.
:nth-last-child(n) p:nth-last-child(2) Chọn mọi phần tử <p> là phần tử con thứ 2 của phần tử cha, đếm từ dưới lên
:only-child p:only-child Chọn mọi <p> là phần tử con của phần tử cha
:visited a:visited Chọn các link đã truy cập

Vui lòng đăng ký ủng hộ kênh