Code24h.com

CSS

07/09/2018, 14:39

Pseudo-classes trong CSS

Pseudo-classes là gì? Một pseudo-classes được sử dụng để xác định trạng thái đặc biệt của một phần tử. Ví dụ, chúng có thể được sử dụng để: Định dạng một phần tử khi người dùng rê chuột vào đó Định dạng đường dẫn khi đã và chưa được click vào Định dạng một ...

Pseudo-classes là gì?

Một pseudo-classes được sử dụng để xác định trạng thái đặc biệt của một phần tử. Ví dụ, chúng có thể được sử dụng để:

Định dạng một phần tử khi người dùng rê chuột vào đó
Định dạng đường dẫn khi đã và chưa được click vào
Định dạng một phần tử khi muốn gây chú ý vào đó

Cú pháp

Cú pháp của pseudo-classes là:

selector:pseudo-class {
    property:value;
}

Anchor Pseudo-classes

Đường dẫn có thể được hiển thị bằng nhiều cách khác nhau:

/* đường dẫn khi chưa click */
a:link {
    color: #FF0000;
}

/* dường dẫn đã click */
a:visited {
    color: #00FF00;
}

/* rê chuột vào đường dẫn */
a:hover {
    color: #FF00FF;
}

/* đường dẫn đã chọn */
a:active {
    color: #0000FF;
}

Lưu ý: a:hover phải xuất hiện sau a:link và a:visited trong định nghĩa của CSs để tạo ra hiệu ứng. a:active phải xuất hiện sau a:hover trong định nghĩa của CSS để tạo hiệu ứng. Tên Pseudo-class không phân biệt chữ hoa chữ thường.

Các Pseudo-class và CSS Class

Pseudo-classes có thể kết hợp với CSS classes:

Ví dụ khi bạn rê chuột vào đường link, màu sắc sẽ thay đổi:

a.highlight:hover {
    color: #ff0000;
}

Di chuột vào <div>

Một ví dụ sử dụng pseudo-class :hover trong phần tử <div>:

div:hover {
    background-color: blue;
}

Di chuyển chuột đơn giản

Di chuyển chuột vào phần tử <div> để hiển thị một phần tử <p> (như để giải thích cho một điều gì đó)

p {
    display: none;
    background-color: yellow;
    padding: 20px;
}

div:hover p {
    display: block;
}

Pseudo-class :first-child trong CSS

Pseudo-class :first-child kết nối một phần tử đặc biệt là “con đầu tiên” của phần tử khác.

Phần tử <p> đầu tiên phù hợp

Trong ví dụ dưới đây, bộ chọn một vài phần tử <p> là “con đầu tiên” phù hợp của vài phần tử:

p:first-child {
    color: blue;
}

Phần tử <i> đầu tiên phù hợp với tất cả phần tử <p>

Trong ví dụ dưới đây, bộ chọn phần tử <i> đầu tiên phù hợp với tất cả phần tử <p>:

p i:first-child {
    color: blue;
}

Tất cả phần tử <i> phù hợp với tất cả “con đầu tiên” phần tử <p>

Trong ví dụ dưới đây, bộ chọn tất cả phần tử <i> phù hợp trong phần tử <p> là “con đầu tiên” của phần tử khác:

p:first-child i {
    color: blue;
}

Pseudo-class :lang trong CSS

Pseudo-class :lang cho phép bạn định nghĩa một quy tắc đặc biệt cho các ngôn ngữ khác. Ví dụ bên dưới, :lang định xác định dấu nhắc cho phần tử <q> với lang=”no”:

<html>
<head>
<style>
q:lang(no) {
    quotes: "~" "~";
}
</style>
</head>

<body>
<p>Some text <q lang="no">A quote in a paragraph</q> Some text.</p>
</body>
</html>