Lớp giả trong css

Pseudo-class là gì?


Lớp giả được sử dụng để xác định trạng thái đặc biệt của một phần tử. Ví dụ, nó có thể được sử dụng để:

  • Tạo kiểu cho một phần tử khi người dùng di chuột qua nó
  • Tạo style hiển thị cho các liên kết khi được truy cập và không được truy cập khác nhau
  • Tạo kiểu cho một phần tử khi nó được lấy focus (dấu nhắc bàn phím)
Rê chuột qua tôi

 

Cú pháp của pseudo-class

selector:pseudo-class {
  property: value;
}

Lớp giả và lớp HTML


Các lớp giả có thể được kết hợp với các lớp HTML.

Ví dụ

<style>
a.highlight:hover {
  color: #ff0000;
  font-size: 22px;</style>

Xem kết quả

Di chuột lên phần tử <div>.

Ví dụ

<style>
div {
  background-color: blue;
  color: white;
  padding: 25px;
  text-align: center;
}

div:hover {
  background-color: green;
}
</style>

Xem kết quả

Di chuột qua phần tử <div> để hiển thị phần tử <p> là một Tooltip.

Di chuột qua tôi để hiển thị phần tử <p>

Xin chào, tôi là một tooltip.

Ví dụ

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

div:hover p {
  display: block;
}
</style>

Xem kết quả

Lớp giả CSS :first-child


Lớp giả :first-child khớp với một phần tử được chỉ định là phần tử con đầu tiên của một phần tử cha.

Khớp với phần tử <p> đầu tiên

Trong ví dụ sau, bộ chọn sẽ khớp với bất kỳ phần tử <p> nào là phần tử con đầu tiên của phần tử cha.

Ví dụ

<style>
p:first-child {
  color: blue;</style>

Xem kết quả

Khớp phần tử <i> đầu tiên trong tất cả các phần tử <p>

Trong ví dụ sau, bộ chọn sẽ khớp với phần tử <i> đầu tiên trong tất cả các phần tử <p>

Ví dụ

<style>
p i:first-child {
  color: blue;</style>

Xem kết quả

Bộ chọn sẽ khớp với tất cả các phần tử <i> trong phần tử <p> là phần tử con đầu tiên của một phần tử cha.

Ví dụ

<style>
p:first-child i {
  color: blue;</style>

Xem kết quả

Lớp giả CSS :lang


Lớp giả :lang cho phép chúng ta xác định các quy tắc đặc biệt cho các ngôn ngữ khác nhau.

Trong ví dụ dưới đây, lớp :lang xác định dấu "~" cho phần tử <q> với lang="no".

Ví dụ

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

Xem kết quả

Các lớp giả trong CSS


Selector Example Example description
:active a:active Selects the active link
:checked input:checked Selects every checked <input> element
:disabled input:disabled Selects every disabled <input> element
:empty p:empty Selects every <p> element that has no children
:enabled input:enabled Selects every enabled <input> element
:first-child p:first-child Selects every <p> elements that is the first child of its parent
:first-of-type p:first-of-type Selects every <p> element that is the first <p> element of its parent
:focus input:focus Selects the <input> element that has focus
:hover a:hover Selects links on mouse over
:in-range input:in-range Selects <input> elements with a value within a specified range
:invalid input:invalid Selects all <input> elements with an invalid value
:lang(language) p:lang(it) Selects every <p> element with a lang attribute value starting with "it"
:last-child p:last-child Selects every <p> elements that is the last child of its parent
:last-of-type p:last-of-type Selects every <p> element that is the last <p> element of its parent
:link a:link Selects all unvisited links
:not(selector) :not(p) Selects every element that is not a <p> element
:nth-child(n) p:nth-child(2) Selects every <p> element that is the second child of its parent
:nth-last-child(n) p:nth-last-child(2) Selects every <p> element that is the second child of its parent, counting from the last child
:nth-last-of-type(n) p:nth-last-of-type(2) Selects every <p> element that is the second <p> element of its parent, counting from the last child
:nth-of-type(n) p:nth-of-type(2) Selects every <p> element that is the second <p> element of its parent
:only-of-type p:only-of-type Selects every <p> element that is the only <p> element of its parent
:only-child p:only-child Selects every <p> element that is the only child of its parent
:optional input:optional Selects <input> elements with no "required" attribute
:out-of-range input:out-of-range Selects <input> elements with a value outside a specified range
:read-only input:read-only Selects <input> elements with a "readonly" attribute specified
:read-write input:read-write Selects <input> elements with no "readonly" attribute
:required input:required Selects <input> elements with a "required" attribute specified
:root root Selects the document's root element
:target #news:target Selects the current active #news element (clicked on a URL containing that anchor name)
:valid input:valid Selects all <input> elements with a valid value
:visited a:visited Selects all visited links