Pesudo class trong CSS – Tự học CSS

Posted on by adminChuyên mục:Kiến thức Internet

Bộ chọn lớp giả CSS (Pesudo class Selector) khớp với các thành phần dựa trên một điều kiện bổ sung và không nhất thiết phải được định nghĩa trong DOM tree.

Pesudo class trong CSSPesudo class trong CSS

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 tiềm năng những thành phần con tiên phong ( first child ) hoặc ở đầu cuối ( 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à khám phá về những pesudo class được sử dụng thông dụng nhất .

2. Pesudo class với thẻ a

Sử dụng pesudo class cho thẻ hoàn toàn có thể được dùng theo những cách khác nhau :
Các pesudo class này được cho phép bạn tạo kiểu cho những link không được truy vấn khác với những link đã được truy vấn .
Kỹ thuật tạo kiểu phổ cập nhất là xóa gạch chân khỏi những link đã truy vấn .
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 vấn .

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

Một số pesudo class là động – chúng được vận dụng dựa theo tương tác của người dùng với link 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 biến hóa cách những link được hiển thị để cung ứng với những hành vi 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
      . Sau đó, áp dụng các thuộc tính CSS cho nó.

    • HTML :

      
    
    1. Khóa học Java
      2. 
    
    2. Khóa học PHP
      3. 
    
    3. Khóa học Python
      4.

    CSS :

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

    Thử chạy ví dụ trên, bạn sẽ text thấy thẻ li tiên phong đã được quy đổ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ử
      , sau đó, áp dụng các quy tắc css cho nó.

    • 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 hoàn toàn có thể được đưa ra với : nth-child ( N )
    Trong đó N là đối số, hoàn toàn 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à những số nguyên ( ví dụ : 1 n, 2 n, 2 n + 1, … )
    HTML :

    
    
    
        STT
        Họ và tên
        Email
    
    
    
    
        1
        Vi Đại Doanh
        [email protected]
    
    
    
    
        2
        Hoàng Công Việt
        [email protected]
    
    
    
    
        3
        Trần Văn Hải
        [email protected]
    
    
    
    
        4
        Nguyễn Linh Trang
        [email protected]

    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ử

    đó 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.

    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 quay trở lại trước không tương hỗ : lang. IE 8 có tương hỗ nếu được chỉ định .

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

    Bạn trọn vẹn hoàn toàn có thể phối hợp Pesudo class với CSS class để định dạng cho những thành phần của website .
    HTML :

    Học lập trình

    CSS :

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

    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 ngân sách và chi phí thời hạn thao tác, tránh được nhiều lỗi phát sinh khi lập trình web đấy .

    Học tiếp: Pesudo element trong CSS

    Đọc thêm: Căn chỉnh trong CSS (CSS Align)

    admin