Pseudo-classes (class giả) trong CSS là những từ khóa được thêm vào selector để chỉ định trạng thái đặc biệt của phần tử HTML mà không cần sửa đổi HTML trực tiếp. Các class giả cho phép bạn chọn các phần tử dựa trên trạng thái của chúng (như khi người dùng di chuột qua, phần tử đầu tiên trong danh sách, hoặc khi một liên kết đã được truy cập). Chúng rất hữu ích trong việc tạo các hiệu ứng tương tác và nâng cao tính linh hoạt khi viết CSS.

Bài viết này sẽ giúp bạn hiểu cách sử dụng các CSS pseudo-classes thông dụng, đồng thời kèm theo ví dụ cụ thể để minh họa.

1. :hover - Trạng thái khi di chuột

Pseudo-class :hover được sử dụng để thay đổi kiểu của một phần tử khi người dùng di chuột qua nó.

Cú pháp:

css
selector:hover {
    /* Quy tắc CSS khi di chuột qua phần tử */
}

Ví dụ:

html
Thử online
<style>
a:hover {
    color: red;
    text-decoration: underline;
}
</style>
<a href="#">Liên kết</a>

Giải thích:

  • Khi người dùng di chuột qua liên kết, màu văn bản sẽ chuyển sang đỏ và có gạch chân.

2. :active - Trạng thái khi phần tử được nhấp

Pseudo-class :active được áp dụng khi người dùng đang nhấn chuột xuống một phần tử (trong lúc nhấp chuột).

Cú pháp:

css
selector:active {
    /* Quy tắc CSS khi phần tử đang được nhấp */
}

Ví dụ:

html
Thử online
<style>
a:active {
    color: green;
}
</style>
<a href="https://codetuthub.com" target="_blank">Liên kết</a>

Giải thích:

  • Khi người dùng nhấn chuột xuống liên kết, màu văn bản sẽ chuyển sang màu xanh lá cây.

3. :focus - Trạng thái khi phần tử được lấy nét (focus)

Pseudo-class :focus được áp dụng khi một phần tử đang có trạng thái focus, thường sử dụng cho các phần tử nhập liệu như input, textarea, hoặc các liên kết.

Cú pháp:

css
selector:focus {
    /* Quy tắc CSS khi phần tử có trạng thái focus */
}

Ví dụ:

html
Thử online
<style>
input:focus {
    border: 2px solid blue;
    background-color: lightyellow;
}
</style>
<input type="text" placeholder="Nhập dữ liệu">

Giải thích:

  • Khi người dùng nhấp chuột hoặc di chuyển đến phần tử nhập liệu, khung viền của ô sẽ chuyển thành màu xanh dương và nền sẽ đổi sang màu vàng nhạt.

4. :nth-child() - Chọn phần tử con dựa trên chỉ số

Pseudo-class :nth-child() cho phép bạn chọn một phần tử con dựa trên vị trí của nó trong danh sách các phần tử cùng cấp.

Cú pháp:

css
selector:nth-child(n) {
    /* Quy tắc CSS cho phần tử con n */
}
  • n có thể là một số nguyên hoặc một công thức. Một số giá trị phổ biến cho n bao gồm:
    • :nth-child(2) chọn phần tử con thứ hai.
    • :nth-child(odd) chọn các phần tử con có vị trí lẻ (1, 3, 5,...).
    • :nth-child(even) chọn các phần tử con có vị trí chẵn (2, 4, 6,...).

Ví dụ:

html
Thử online
<style>
li:nth-child(odd) {
    background-color: lightblue;
}

li:nth-child(2) {
    font-weight: bold;
}
</style>
<ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
</ul>

Giải thích:

  • Các mục có vị trí lẻ sẽ có nền màu xanh nhạt, và mục thứ hai sẽ được bôi đậm.

5. :first-child - Chọn phần tử con đầu tiên

Pseudo-class :first-child chọn phần tử con đầu tiên trong số các phần tử cùng cấp của nó.

Cú pháp:

css
selector:first-child {
    /* Quy tắc CSS cho phần tử con đầu tiên */
}

Ví dụ:

html
Thử online
<style>
li:first-child {
    color: red;
}
</style>
<ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ul>

Giải thích:

  • Mục "Item 1" sẽ có màu đỏ vì nó là phần tử con đầu tiên trong danh sách.

6. :last-child - Chọn phần tử con cuối cùng

Pseudo-class :last-child chọn phần tử con cuối cùng trong số các phần tử cùng cấp.

Cú pháp:

css
selector:last-child {
    /* Quy tắc CSS cho phần tử con cuối cùng */
}

Ví dụ:

html
Thử online
<style>
li:last-child {
    color: green;
}
</style>
<ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ul>

Giải thích:

  • Mục "Item 3" sẽ có màu xanh lá cây vì nó là phần tử con cuối cùng trong danh sách.

7. :nth-of-type() - Chọn phần tử theo kiểu và vị trí

Pseudo-class :nth-of-type() hoạt động giống như :nth-child(), nhưng nó chỉ chọn các phần tử dựa trên kiểu của phần tử.

Cú pháp:

css
selector:nth-of-type(n) {
    /* Quy tắc CSS cho phần tử n trong cùng một kiểu */
}

Ví dụ:

html
Thử online
<style>
p:nth-of-type(2) {
    color: blue;
}
</style>
<div>
    <p>Đoạn văn 1</p>
    <p>Đoạn văn 2</p>
    <span>Span 1</span>
    <p>Đoạn văn 3</p>
</div>

Giải thích:

  • Chỉ đoạn văn thứ hai (<p>Đoạn văn 2</p>) sẽ có màu xanh dương, mặc dù có một phần tử <span> chen giữa.

8. :only-child - Chọn phần tử con duy nhất

Pseudo-class :only-child chọn phần tử nếu nó là phần tử con duy nhất của phần tử cha.

Cú pháp:

css
selector:only-child {
    /* Quy tắc CSS cho phần tử con duy nhất */
}

Ví dụ:

html
Thử online
<style>
p:only-child {
    color: orange;
}
</style>
<div>
    <p>Đoạn văn duy nhất</p>
</div>
<div>
    <p>Đoạn văn 1</p>
    <p>Đoạn văn 2</p>
</div>

Giải thích:

  • Chỉ đoạn văn trong phần tử đầu tiên sẽ có màu cam, vì nó là phần tử con duy nhất của phần tử cha <div>.

9. :not() - Loại trừ phần tử

Pseudo-class :not() được sử dụng để chọn các phần tử không khớp với selector được chỉ định.

Cú pháp:

css
selector:not(sub-selector) {
    /* Quy tắc CSS cho các phần tử không khớp với sub-selector */
}

Ví dụ:

html
Thử online
<style>
p:not(.highlight) {
    color: gray;
}
</style>
<p class="highlight">Đoạn văn 1</p>
<p>Đoạn văn 2</p>
<p>Đoạn văn 3</p>

Giải thích:

  • Tất cả các đoạn văn không có class highlight sẽ có màu xám.

10. :visited và :link - Trạng thái của liên kết

  • :link áp dụng cho các liên kết chưa được người dùng nhấp vào.
  • :visited áp dụng cho các liên kết đã được truy cập.

Cú pháp:

css
a:link {
    /* Quy tắc CSS cho liên kết chưa được truy cập */
}

a:visited {
    /* Quy tắc CSS cho liên kết đã được truy cập */
}

Ví dụ:

html
Thử online
<style>
a:link {
    color: blue;
}

a:visited {
    color: purple;
}
</style>
<a href="https://codetuthub.com">Example Link</a>

Giải thích:

  • Liên kết sẽ có màu xanh dương khi chưa được nhấp và sẽ chuyển thành màu tím sau khi đã truy cập.

11. Các pseudo-classes phổ biến khác

  • :disabled: Chọn các phần tử không hoạt động (disabled), như nút hoặc trường nhập liệu.
  • :enabled: Chọn các phần tử có thể tương tác được.
  • :checked: Chọn các phần tử checkbox hoặc radio button đang được chọn.
  • :empty: Chọn các phần tử không có nội dung con (text hoặc các phần tử khác).

Kết luận

Pseudo-classes trong CSS cung cấp cách tiếp cận hiệu quả để thay đổi kiểu dựa trên trạng thái hoặc vị trí của các phần tử mà không cần thêm class vào HTML. Việc nắm vững các pseudo-classes sẽ giúp bạn làm phong phú giao diện trang web và tạo ra các hiệu ứng tương tác động mà không cần thay đổi mã HTML phức tạp.