Pseudo-classes trong CSS - Fedu

CHÀO MỪNG BẠN ĐẾN VỚI THƯ VIỆN HỌC TẬP & ĐÀO TẠO CƠ BẢN

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 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>

Pseudo Classes trong CSS

Selector Ví dụ Mô tả ví dụ
:active a:active Chọn liên kết đang hoạt động
:checked input:checked Chọn mỗi phần tử <input> đã kiểm tra
:disabled input:disabled Chọn mỗi phần tử <input> bị vô hiệu
:empty p:empty Chọn mỗi phần tử <p> không có con
:enabled input:enabled Chọn mỗi phần tử <input> được bật
:first-child p:first-child Chọn tất cả các phần tử <p> đó là con đầu tiên của cha mẹ nó
:first-of-type p:first-of-type Chọn mỗi phần tử <p> là phần tử <p> đầu tiên của cha / mẹ
:focus input:focus Chọn phần tử <input> cần nhấn mạnh
:hover a:hover Chọn liên kết khi rê chuột qua
:in-range input:in-range Chọn phần tử <input> với một giá trị trong phạm vi được chỉ định
:invalid input:invalid Chọn tất cả các phần tử <input> có giá trị không hợp lệ
:lang(language) p:lang(it) Chọn mỗi phần tử <p> với một giá trị thuộc tính lang bắt đầu với “it”
:last-child p:last-child Chọn mỗi phần tử <p> là con cuối cùng của cha mẹ
:last-of-type p:last-of-type Chọn mỗi phần tử <p> là phần tử <p> cuối cùng của cha mẹ
:link a:link Chọn tất cả các liên kết chưa được click
:not(selector) :not(p) Chọn mọi phần tử không phải là một phần tử <p>
:nth-child(n) p:nth-child(2) Chọn mỗi phần tử <p> là con thứ hai của cha mẹ
:nth-last-child(n) p:nth-last-child(2) Chọn mỗi phần tử <p> là con thứ hai của cha / mẹ nó, kể từ con cuối cùng
:nth-last-of-type(n) p:nth-last-of-type(2) Chọn mỗi phần tử <p> là phần tử <p> thứ hai của cha / mẹ nó, tính từ con cuối cùng
:nth-of-type(n) p:nth-of-type(2) Chọn mỗi phần tử <p> là phần tử <p> thứ hai của cha / mẹ
:only-of-type p:only-of-type Chọn mỗi phần tử <p> là yếu tố <p> duy nhất của cha mẹ nó
:only-child p:only-child Chọn mỗi phần tử <p> là con duy nhất của cha / mẹ của nó
:optional input:optional Chọn các phần tử <input> không có thuộc tính “required”
:out-of-range input:out-of-range Chọn các phần tử <input> với một giá trị bên ngoài phạm vi được chỉ định
:read-only input:read-only Chọn các phần tử <input> với thuộc tính “readonly” được chỉ định
:read-write input:read-write Chọn các phần tử <input> mà không có thuộc tính “readonly”
:required input:required Chọn phần tử <input> với thuộc tính “required” được chỉ định
:root root Chọn phần tử gốc của tài liệu
:target #news:target Chọn phần tử #news đang hoạt động hiện tại (nhấp vào URL có chứa tên anchor đó)
:valid input:valid Chọn tất cả các phần tử <input> với giá trị hợp lệ
:visited a:visited Chọn tất cả liên kết đã truy cập

Các phần tử Pseudo trong CSS

Selector Ví dụ Mô tả ví dụ
::after p::after Chèn nội dung sau mỗi phần tử <p>
::before p::before Chèn nội dung trước mỗi phần tử <p>
::first-letter p::first-letter Chọn chữ cái đầu tiên của mỗi phần tử <p>
::first-line p::first-line Chọn dòng đầu tiên của mỗi phần tử <p>
::selection p::selection Chọn phần của một phần tử được chọn bởi người dùng