Pesudo class trong CSS

Pesudo class là các lớp giả cho phép bạn nhắm mục tiêu và tạo kiểu cho các trạng thái động của một phần tử như hover, active, focus cũng như các phần tử đang tồn tại trong DOM tree mà không cần thêm bất kỳ ID hoặc class và chúng.

Ví dụ: Nhắm mục tiêu các phần tử con đầu tiên (first child) hoặc cuối cùng (last child).

Một pesudo class bắt đầu bằng dấu hai chấm (:).

Cú pháp của nó như sau:

selector:pseudo-class { property: value; }

Phần sau đây, bạn sẽ được học, tìm hiểu về các pesudo class được sử dụng phổ biến nhất.

Sử dụng pesudo class cho thẻ <a> có thể được dùng theo những cách khác nhau:

Các pesudo class này cho phép bạn tạo kiểu cho các liên kết không được truy cập khác với những liên kết đã được truy cập.

Kỹ thuật tạo kiểu phổ biến nhất là xóa gạch chân khỏi các liên kết đã truy cập.

HTML:

<a href="https:/elib.vn/" class"">Học lập trình</a>

CSS:

a:link {
    color: blue;
}
a:visited {
    text-decoration: none;
}

Hoặc đổi màu cho link đã truy cập.

a:link {
    color: blue;
}
a:visited {
    color: brown;
}

Một số pesudo class là động – chúng được áp dụng dựa theo tương tác của người dùng với liên kết như khi hover hoặc là focus, v.v.

HTML:

<a href="https://elib.vn/">Học lập trình</a>

CSS:

a:visited {
    color: brown;
}
a:hover {
    color: red;
}
a:active {
    color: gray;
}
a:focus {
    color: yellow;
}

Các pesudo class này thay đổi cách các liên kết được hiển thị để đáp ứng với các hành động của người dùng.

• :hover áp dụng khi người dùng di con trỏ lên phần tử, nhưng không chọn nó.
• :active áp dụng khi phần tử được kích hoạt hoặc click vào.
• :focus áp dụng khi phần tử được focus (tập trung) vào

Lưu ý: Để làm cho các lớp giả này hoạt động hoàn hảo, bạn phải xác định chúng theo thứ tự chính xác -:link,:visited,:hover,:active,:focus.

Lớp giả :first-child sẽ khớp với một phần tử là phần tử con đầu tiên của một số phần tử khác.

Bộ chọn ol li:first-child trong ví dụ bên dưới sẽ nhắm đến phần tử <li> đầu tiên trong <ol>. Sau đó, áp dụng các thuộc tính CSS cho nó.

HTML:

<ol>
    <li>Khóa học Java</li>
    <li>Khóa học PHP</li>
    <li>Khóa học Python</li>
</ol>

CSS:

ol li:first-child {
    text-transform: uppercase;
}

Thử chạy ví dụ trên, bạn sẽ text thấy thẻ li đầu tiên đã được chuyển đổi thành chữ viết HOA.

Lưu ý: Để làm cho :first-child hoạt động trong IE 8 và các phiên bản cũ hơn thì, <!DOCTYPE> phải được khai báo ở đầu tài liệu.

Lớp giả :last-child khớp với một phần tử con cuối cùng của phần tử nào đó.

Bộ chọn ul li:last-child trong ví dụ dưới đây sẽ chọn đến phần tử <li> cuối cùng trong phần tử <ul>, sau đó, áp dụng các quy tắc css cho nó.

HTML:

<ul>
    <li>Khóa học Java</li>
    <li>Khóa học PHP</li>
    <li>Khóa học Python</li>
</ul>

CSS:

ul li:last-child {
    text-transform: uppercase;
}

Lưu ý: Bộ chọn CSS :last-child không hoạt động trong IE 8 và các phiên bản cũ hơn. Nó được hỗ trợ trong IE 9 trở lên.

Trong phiên bản CSS3, có một lớp giả mới :nth-child cho phép bạn nhắm mục tiêu một hoặc nhiều phần tử con cụ thể của một phần tử cha nhất định.

Cú pháp cơ bản của bộ chọn này có thể được đưa ra với :nth-child(N)

Trong đó N là đối số, có thể là số, từ khóa even (chẵn) hoặc odd (lẻ) hoặc biểu thức có dạng xn + y trong đó x và y là các số nguyên (ví dụ: 1n, 2n, 2n + 1,…)

HTML:

<table>
    <tr>
        <th>STT</th>
        <th>Họ và tên</th>
        <th>Email</th>
    </tr>
    <tr>
        <td>1</td>
        <td>Vi Đại Doanh</td>
        <td>vidaidoanh@mail.com</td>
    </tr>
    <tr>
        <td>2</td>
        <td>Hoàng Công Việt</td>
        <td>hoangcongviet@mail.com</td>
    </tr>
    <tr>
        <td>3</td>
        <td>Trần Văn Hải</td>
        <td>tranvanhai@mail.com</td>
    </tr>
    <tr>
        <td>4</td>
        <td>Nguyễn Linh Trang</td>
        <td>nguyenlinhtrang@mail.com</td>
    </tr>
</table>

CSS:

table{
    margin: 30px;
    border-collapse: collapse;
}
table tr{
    border-bottom: 1px solid #666;
}
table tr th, table tr td{
    padding: 10px;
}
table tr:nth-child(2n) td{
    background: #f2f2f2;
}

Các quy tắc CSS trong ví dụ trên chỉ đơn giản làm thay đổi background của hàng chẵn (Bảng này có 5 hàng, bao gồm cả tiêu đề) mà không cần thêm vào phần tử <tr> đó class nào cả.

Mẹo: Bộ chọn CSS :nth-child(N) rất hữu ích trong các trường hợp bạn phải chọn các phần tử xuất hiện bên trong cây tài liệu trong một khoảng hoặc mẫu cụ thể như ở vị trí chẵn hoặc lẻ, v.v.

Peseudo-class :lang cho phép xây dựng các bộ chọn dựa trên cài đặt ngôn ngữ cho các thẻ cụ thể.

Lớp giả :lang trong ví dụ dưới đây xác định dấu ngoặc kép cho phần tử <q>.

HTML:

<p><q lang="no">Ai cũng nên học lập trình!</q> - Steve Jobs.</p>

CSS:

q:lang(no) {
    quotes: "~" "~";
}

Lưu ý: IE8 trở về trước không hỗ trợ :lang. IE 8 có hỗ trợ nếu <!DOCTYPE> được chỉ định.

Bạn hoàn toàn có thể kết hợp Pesudo class với CSS class để định dạng cho các phần tử của website.

HTML:

<a class="red" href="https://elib.vn/">Học lập trình</a>

CSS:

a.red:link {
    color: #ff0000;
}

Trên đây là bài viết của eLib.VN về Pesudo class trong CSS. Các pesudo class rất hữu ích khi bạn chỉ muốn thực hiện thay đổi trên CSS mà không muốn thêm thắt vào HTML. Nó sẽ giúp bạn tiết kiệm thời gian làm việc, tránh được nhiều lỗi phát sinh khi lập trình web đấy.