Lựa chọn theo pseudo class trong CSS

• Pseudo class là gì?
• Các Pseudo class

Ngoài những cách viết selector cơ bản trong CSS đã trình bày như chọn phần tử theo thuộc tính class, theo id ... phần này trình bày thêm cách chọn phần tử có tên pseudo class.

Pseudo-Class trong CSS

Pseudo-class là tên (như focus, disabled, hover ... ) được thêm vào selector css để cho biết mã CSS sẽ áp dụng vào phần tử khi phần tử ở trạng thái nào đó của phần tử HTML (đang focus nhập dữ liệu, bị vô hiệu, đang có chuột ở trên ...). Sử dụng Pseudo-class cho phép định kiểu hiện thị phần tử mà không cần phải dùng đến JavaScript.

Một pseudo-classe thêm vào selector bằng cách viết dấu hai chấm : sau đó là tên (từ khóa) trạng thái. Ví dụ, pseudo :hover là trạng thái phần tử khi có chuột ở trên, để chọn phần tử khi ở trạng thái này bạn viết selector:hover.

Một ví dụ cụ thể sau:

<style>
    /* Phần tử p trong id=parent có màu chữ blue */
    #parent > p {
        color: blue;
    }
    /* Phần tử p trong id=parent, khi chuột phía trên có màu chữ green và gạch chân */
    #parent > p:hover {
        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>

Kết quả

Cách sử dụng tương tự cho danh sách các pseudo-class khác sau đây.

Danh sách các Pseudo-Class trong CSS

a:active { ... }

a:hover { ... }

input:focus { ... }

a:visited { ... }

input[type="checkbox"]:checked
{
    ...
}

input[type="submit"]:enabled
{
    color: green;
}

textarea:disabled { ... }

p:empty { ... }

a:link { ... } 

p:only-child { ... }

p:first-child { ... }

p:first-of-type { ... }

p:last-child { ... }

p:last-of-type { ... }

:not(p) { ... }

p:nth-child(2) { ... }

p:nth-last-child(2) { ... }