CSS - Pseudo Classes

Pseudo-class là gì?

Xin chào các nhà thuật sĩ CSS tương lai! Hôm nay, chúng ta sẽ khám phá thế giới kỳ diệu của CSS pseudo-classes. Đừng để từ ngữ sang trọng này làm bạn hoảng sợ - tôi hứa rằng nó không phức tạp như bạn nghĩ. Thực tế, một khi bạn làm quen với nó, bạn sẽ sử dụng pseudo-classes như một chuyên gia trong tích tắc!

Vậy pseudo-class là gì? Hãy tưởng tượng bạn có một siêu năng lực cho phép bạn định dạng các yếu tố trên trang web của mình dựa trên trạng thái hoặc điều kiện của chúng. Đó chính là điều mà pseudo-classes làm! Chúng cho phép bạn áp dụng các样式 vào các yếu tố dựa trên những điều như người dùng có đang di chuột qua chúng hay không, chúng có phải là con đầu tiên trong danh sách hay không, hoặc thậm chí là ngôn ngữ của trang.

Cú pháp

Trước khi chúng ta nhảy vào các pseudo-classes cụ thể, hãy nhanh chóng xem qua cú pháp. Nó thực sự rất đơn giản:

selector:pseudo-class {
property: value;
}

Thấy dấu phẩy than (:) sau bộ chọn không? Đó là cách bạn biết rằng mình đang làm việc với một pseudo-class. Dễ dàng phải không?

Pseudo-Class Hover

Hãy bắt đầu với một trong những pseudo-classes phổ biến và thú vị nhất: :hover. Em nhỏ này cho phép bạn thay đổi style của một yếu tố khi người dùng di chuột qua nó. Đó như một phép thuật!

<button class="my-button">Di chuột qua tôi!</button>

.my-button {
background-color: blue;
color: white;
padding: 10px 20px;
border: none;
cursor: pointer;
}

.my-button:hover {
background-color: lightblue;
color: black;
}

Trong ví dụ này, nút của chúng ta bắt đầu bằng màu xanh lam với chữ trắng. Nhưng khi bạn di chuột qua nó - poof! - nó thay đổi thành màu xanh lam nhạt với chữ đen. Hãy thử và xem phép thuật xảy ra!

Pseudo-Class Active

Tiếp theo là pseudo-class :active. Pseudo-class này được kích hoạt khi một yếu tố đang được kích hoạt bởi người dùng, như khi họ đang nhấp vào một nút.

<button class="my-button">Nhấp vào tôi!</button>

.my-button {
background-color: blue;
color: white;
padding: 10px 20px;
border: none;
cursor: pointer;
}

.my-button:active {
background-color: darkblue;
transform: scale(0.95);
}

Bây giờ, khi bạn nhấp và giữ nút, nó sẽ chuyển thành màu xanh lam đậm và thu nhỏ nhẹ. Như thể nút đang nói, "Hey, tôi đang bị nhấp!"

Pseudo-Class Focus

Pseudo-class :focus rất hữu ích cho việc cải thiện khả năng truy cập. Nó được áp dụng khi một yếu tố nhận được focus, điều này có thể xảy ra khi người dùng nhấp vào một trường nhập liệu hoặc di chuyển tab đến nó.

<input type="text" class="my-input" placeholder="Nhập gì đó...">

.my-input {
border: 2px solid #ccc;
padding: 5px;
}

.my-input:focus {
border-color: blue;
outline: none;
box-shadow: 0 0 5px rgba(0, 0, 255, 0.5);
}

Với CSS này, khi trường nhập liệu được focus, nó có viền xanh lam và ánh sáng xanh lam nhẹ. Đây là cách tuyệt vời để hướng dẫn người dùng của bạn qua các biểu mẫu!

Pseudo-Class nth Child

Bây giờ, hãy thử một chút phức tạp hơn với pseudo-class :nth-child(). Pseudo-class này cho phép bạn chọn các yếu tố dựa trên vị trí của chúng trong một nhóm anh em.

<ul class="my-list">
<li>Đầu tiên</li>
<li>Thứ hai</li>
<li>Thứ ba</li>
<li>Thứ tư</li>
<li>Thứ năm</li>
</ul>

.my-list li:nth-child(odd) {
background-color: #f2f2f2;
}

.my-list li:nth-child(3n) {
color: blue;
}

Trong ví dụ này, chúng ta đang định dạng mỗi mục lẻ với nền màu xám nhạt, và mỗi mục thứ ba với chữ xanh lam. Đó như thể tạo một mẫu trong danh sách của bạn!

Pseudo-Class First-Child

Pseudo-class :first-child chọn ra yếu tố đầu tiên trong một nhóm anh em. Nó rất hữu ích để dành sự quan tâm đặc biệt cho mục đầu tiên trong danh sách hoặc đoạn đầu tiên trong một bài viết.

<div class="container">
<p>Tôi là đoạn đầu tiên!</p>
<p>Tôi chỉ là một đoạn bình thường.</p>
<p>Tôi cũng vậy!</p>
</div>

.container p:first-child {
font-weight: bold;
color: blue;
}

Bây giờ đoạn đầu tiên nổi bật hơn so với các đoạn khác. Như thể cấp một thẻ VIP cho yếu tố đầu tiên của bạn!

Pseudo-Class Last-Child

Như bạn có thể đoán, :last-child là ngược lại với :first-child. Nó chọn ra yếu tố cuối cùng trong một nhóm anh em.

<ul class="my-list">
<li>Mục đầu tiên</li>
<li>Mục thứ hai</li>
<li>Mục thứ ba</li>
<li>Mục cuối cùng!</li>
</ul>

.my-list li:last-child {
font-style: italic;
color: green;
}

Với CSS này, mục cuối cùng trong danh sách có chữ nghiêng và màu xanh lá. Đây là cách tuyệt vời để kết thúc mọi thứ!

Pseudo-Class Lang

Pseudo-class :lang là một chút chuyên nghiệp hơn. Nó cho phép bạn chọn các yếu tố dựa trên ngôn ngữ của tài liệu hoặc yếu tố.

<p lang="en">Hello, World!</p>
<p lang="fr">Bonjour, le Monde!</p>
<p lang="es">¡Hola, Mundo!</p>

p:lang(en) {
color: blue;
}

p:lang(fr) {
color: red;
}

p:lang(es) {
color: green;
}

CSS này sẽ màu hóa mỗi lời chào dựa trên ngôn ngữ của chúng. Đó như thể tạo một mã màu đa ngôn ngữ cho trang web của bạn!

Pseudo-Class Not

Cuối cùng, hãy xem xét pseudo-class :not(). Pseudo-class này khác một chút - nó chọn các yếu tố KHÔNG khớp với bộ chọn bạn chỉ định.

<div class="container">
<p>Tôi là một đoạn.</p>
<p class="special">Tôi là một đoạn đặc biệt!</p>
<p>Tôi là một đoạn khác.</p>
</div>

.container p:not(.special) {
color: gray;
}

Trong trường hợp này, tất cả các đoạn ngoại trừ đoạn có lớp "special" sẽ được màu xám. Như thể nói, "Định dạng mọi thứ ngoại trừ điều này!"

Danh sách các Pseudo-Classes CSS

Có rất nhiều pseudo-classes khác nhau trong CSS. Dưới đây là bảng một số phổ biến:

Pseudo-Class	Mô tả
:hover	Chọn một yếu tố khi con trỏ chuột di chuột qua nó
:active	Chọn một yếu tố khi nó đang được kích hoạt
:focus	Chọn một yếu tố khi nó có focus
:nth-child()	Chọn các yếu tố dựa trên vị trí của chúng trong một nhóm anh em
:first-child	Chọn con đầu tiên trong một nhóm anh em
:last-child	Chọn con cuối cùng trong một nhóm anh em
:lang()	Chọn các yếu tố dựa trên ngôn ngữ
:not()	Chọn các yếu tố không khớp với một bộ chọn
:link	Chọn các liên kết chưa được truy cập
:visited	Chọn các liên kết đã được truy cập
:checked	Chọn các yếu tố đầu vào đã được chọn
:disabled	Chọn các yếu tố đã bị vô hiệu hóa
:empty	Chọn các yếu tố không có con

Và thế là bạn đã cùng chúng tôi hành trình qua thế giới của CSS pseudo-classes, từ cơ bản đến một số kỹ thuật nâng cao. Nhớ rằng, chìa khóa để thành thạo chúng là thực hành. Vậy hãy thử nghiệm các pseudo-classes này trong các dự án của riêng bạn. Trước khi bạn biết, bạn sẽ tạo ra các trang web tương tác, phản hồi với các hành động của người dùng theo nhiều cách tuyệt vời. Chúc bạn may mắn với mã code của bạn!

Credits: Image by storyset