Pesudo class trong CSS - Học hỏi Net

1. Pesudo class là gì?

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.

2. Pesudo class với thẻ a

Sử dụng pesudo class cho thẻ 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:

Học lập trình

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:

Học lập trình

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.

3. Pesudo class :first-child

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ử

đầu tiên trong

HTML:


    Khóa học Java
    Khóa học PHP
    Khóa học Python

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ì, phải được khai báo ở đầu tài liệu.

4. Pesudo class :last-child

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ử

cuối cùng trong phần tử

HTML:


    Khóa học Java
    Khóa học PHP
    Khóa học Python

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.

5. Pesudo class :nth-child

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:


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

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

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ử

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.

6. Pesudo class :lang

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ử .

HTML:

Ai cũng nên học lập trình! - Steve Jobs.

CSS:

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

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

7. Kết hợp Pesudo class với CSS class

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:

Học lập trình

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.