Giả lớp trạng thái

2.1 Giả lớp :hover

Giả lớp trạng thái cho phép áp dụng styles tới các phần tử dựa trên sự tương tác của người dùng hoặc trạng thái hiện tại của chúng. Các giả lớp này thường được sử dụng để cải thiện giao diện người dùng, cung cấp phản hồi trực quan khi người dùng thực hiện hành động.

Giả lớp :hover được áp dụng cho phần tử khi người dùng di chuột qua nó.

Ngữ pháp:

    
      selector:hover {
        thuộc tính: giá trị;
      }
    
  

Ví dụ:

Trong ví dụ này, liên kết thay đổi màu sắc và thêm gạch chân khi rê chuột qua, và nút thay đổi màu nền và chữ.

    
      /* Định kiểu liên kết khi rê chuột qua */

      a:hover {
        color: red;
        text-decoration: underline;
      }

      /* Định kiểu nút khi rê chuột qua */

      button:hover {
        background-color: #3498db;
        color: white;
      }
    
  

2.2 Giả lớp :focus

Giả lớp :focus được áp dụng cho phần tử khi nó nhận được focus, ví dụ, khi nhấn chuột vào phần tử form hoặc khi chuyển đến nó bằng phím Tab.

Ngữ pháp:

    
      selector:focus {
        thuộc tính: giá trị;
      }
    
  

Ví dụ:

Trong ví dụ này, trường nhập liệu thay đổi màu đường viền và bỏ đường viền ngoài khi focus, và ô văn bản thay đổi màu nền.

    
      /* Định kiểu trường nhập liệu khi focus */

      input:focus {
        border-color: blue;
        outline: none;
      }

      /* Định kiểu ô văn bản khi focus */

      textarea:focus {
        background-color: #f0f0f0;
      }
    
  

2.3 Giả lớp :active

Giả lớp :active được áp dụng cho phần tử trong thời điểm nó được kích hoạt bởi người dùng, ví dụ, khi nhấn chuột vào nút. Giả lớp này thường được sử dụng để tạo phản hồi trực quan khi nhấn vào các phần tử giao diện.

Ngữ pháp:

    
      selector:active {
        thuộc tính: giá trị;
      }
    
  

Ví dụ:

Trong ví dụ này, liên kết thay đổi màu khi nhấn, và nút thay đổi màu nền và giảm kích thước một chút, tạo hiệu ứng nhấn.

    
      /* Định kiểu liên kết khi nhấn */

      a:active {
        color: green;
      }

      /* Định kiểu nút khi nhấn */

      button:active {
        background-color: #2980b9;
        transform: scale(0.98);
      }
    
  

2.4 Giả lớp :visited

Giả lớp :visited được áp dụng cho các liên kết mà người dùng đã ghé thăm. Nó cho phép định kiểu các liên kết đã ghé thăm khác với các liên kết chưa ghé thăm.

Ngữ pháp:

    
      selector:visited {
        thuộc tính: giá trị;
      }
    
  

Ví dụ

Trong ví dụ này, liên kết đã ghé thăm thay đổi màu sang màu tím để phân biệt với các liên kết chưa ghé thăm:

    
      /* Định kiểu liên kết đã ghé thăm */

      a:visited {
        color: purple;
      }
    
  

2.5 Kết hợp giả lớp

Các giả lớp trạng thái có thể được kết hợp để tạo ra các styles tương tác phức tạp. Ví dụ, có thể áp dụng các styles khác nhau cho liên kết dựa trên trạng thái của chúng.

Ví dụ thực thi đầy đủ

Trong ví dụ này, định kiểu các liên kết thay đổi dựa trên trạng thái của chúng: trạng thái cơ bản, liên kết đã ghé thăm, liên kết khi rê chuột qua và liên kết khi nhấn:

    
      /* Định kiểu cơ bản cho liên kết */

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

      /* Định kiểu liên kết đã ghé thăm */

      a:visited {
        color: purple;
      }

      /* Định kiểu liên kết khi rê chuột qua */

      a:hover {
        color: red;
        text-decoration: underline;
      }

      /* Định kiểu liên kết khi nhấn */

      a:active {
        color: green;
      }