Giới thiệu về pseudo-classes

1.1 Pseudo-classes

Pseudo-classes trong CSS là những từ khóa đặc biệt được thêm vào selectors để xác định trạng thái hoặc vị trí trong cây tài liệu. Chúng cho phép bạn tùy chỉnh style của các phần tử dựa trên trạng thái hoặc mối quan hệ với các phần tử khác mà không cần thêm classes hoặc IDs vào mã HTML.

Các khái niệm chính của pseudo-classes

1. Xác định trạng thái của phần tử:
   • Pseudo-classes có thể chỉ ra trạng thái của phần tử, như khi chuột di qua, tiêu điểm hoặc khi được kích hoạt
2. Xác định vị trí của phần tử:
   • Pseudo-classes có thể chỉ ra vị trí của phần tử so với phần tử gốc hoặc các phần tử khác, như phần tử đầu tiên hoặc cuối cùng
3. Các trường hợp đặc biệt và nhóm logic:
   • Pseudo-classes cũng có thể xác định các trường hợp đặc biệt, như phần tử đầu tiên của loại hoặc phần tử lẻ/chẵn

Cách sử dụng pseudo-classes

Pseudo-classes được thêm vào selectors bằng cách sử dụng dấu hai chấm (:). Chúng có thể được sử dụng với selectors phần tử, classes, IDs và các selectors khác.

Cú pháp:

    
      selector:pseudo-class {
        thuộc tính: giá trị;
      }
    
  

Ví dụ sử dụng

1. Selector phần tử với pseudo-class

Trong ví dụ này, tất cả các đoạn văn đầu tiên (<p>) trong phần tử cha sẽ được in đậm:

    
      p:first-of-type {
        font-weight: bold;
      }
    
  

2. Selector class với pseudo-class

Trong ví dụ này, nền của tất cả các phần tử có class .button sẽ chuyển sang màu xanh khi chuột di qua:

    
      .button:hover {
        background-color: blue;
      }
    
  

3. Selectors kết hợp với pseudo-classes

Trong ví dụ này, tất cả các đoạn văn chẵn (<p>) trong phần tử có class .container sẽ có màu đỏ:

    
      .container > p:nth-child(2n) {
          color: red;
      }
    
  

1.2 Ví dụ về pseudo-classes và cách áp dụng

1. Pseudo-classes xác định trạng thái

Pseudo-classes xác định trạng thái của phần tử cho phép thay đổi style của nó dựa trên sự tương tác của người dùng hoặc trạng thái của phần tử.

    
      a:link {
        color: blue;
      }

      a:visited {
        color: purple;
      }

      a:hover {
        color: red;
      }

      a:active {
        color: green;
      }
    
  

2. Pseudo-classes xác định vị trí

Pseudo-classes xác định vị trí của phần tử cho phép áp dụng style cho các phần tử dựa trên vị trí của chúng trong cấu trúc DOM.

    
      li:first-child {
          font-style: italic;
      }

      li:last-child {
          font-style: italic;
      }

      li:nth-child(odd) {
          background-color: #f0f0f0;
      }

      li:nth-child(even) {
          background-color: #ffffff;
      }
    
  

3. Pseudo-classes cho các nhóm logic

Những pseudo-classes này cho phép tuỳ chỉnh style của phần tử dựa trên các nhóm logic hoặc loại của chúng.

    
      input:checked {
        background-color: yellow;
      }

      input:disabled {
        background-color: grey;
      }

      input:enabled {
        background-color: white;
      }