Bài 26: Pseudo-classes trong CSS


Pseudo-classes là gì?

Pseudo-Class để xác định trạng thái đặc biệt của một phần tử.
Ví dụ, nó có thể sử dụng để:

  • Định dạng cho một phần tử khi người dùng di chuột qua nó
  • Đị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ị 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;
}

/* di chuyển 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:linka: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. Pseudo-class không phân biệt chữ hoa chữ thường.

Pseudo-classes và CSS Classes

Pseudo-classes có thể kết hợp với CSS classes:
Khi bạn di chuyển chuột vào đường link trong ví dụ, màu sắc sẽ thay đổi:


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

Di chuyển 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;
}

CSS – The :first-child Pseudo-class

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

CSS – The :lang Pseudo-class

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>Văn bản <q lang="no">Trích dẫn</q>Văn bản.</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 di chuyển 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ố

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ó thể bạn sẽ thích…

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *

EnglishVietnamese