HTML/CSS | Pseudo-classes selectors

Học HTML, CSS từ Zero Tới Hero

Pseudo-classes selectors

Selector Ví dụ Giải thích
:hover p:hover Chọn các thẻ <p> khi di chuột qua
:active a:active Chọn các thẻ <a> khi nhấn chuột xuống
:link a:link Chọn các thẻ <a> có liên kết chưa truy cập
:visited a:visited Chọn các thẻ <a> có liên kết đã truy cập
:empty div:empty Chọn các thẻ <div> không có nội dung
:target #home:target Chọn thẻ có id="home" khi trên URLhash tương ứng. VD: https://domain.com/#home

Child selectors

Selector Ví dụ Giải thích
:first-child p:first-child Chọn các thẻ <p> là thẻ con đầu tiên
:last-child p:last-child Chọn các thẻ <p> là thẻ con cuối cùng
:nth-child(n) p:nth-child(2) Chọn các thẻ <p> là thẻ con thứ hai
:nth-last-child(n) p:nth-last-child(2) Chọn các thẻ <p> là thẻ con thứ hai, tính từ cuối lên
:only-child p:only-child Chọn các thẻ <p> là thẻ con duy nhất

Type selectors

Selector Ví dụ Giải thích
:first-of-type p:first-of-type Chọn các thẻ <p> đầu tiên trong thẻ cha
:last-of-type p:last-of-type Chọn các thẻ <p> cuối cùng trong thẻ cha
:nth-of-type(n) p:nth-of-type(2) Chọn các thẻ <p> thứ hai trong thẻ cha
:nth-last-of-type(n) p:nth-last-of-type(2) Chọn các thẻ <p> thứ hai trong thẻ cha, tính từ cuối lên
:only-of-type p:only-of-type Chọn các thẻ <p> duy nhất trong thẻ cha

Not selector

:not(selector) được hiểu là lớp giả phủ định, các selector bên trong cặp dấu ngoặc đơn sẽ bị loại trừ và CSS sẽ không được áp dụng cho các selector đó.

Selector Ví dụ Giải thích
:not(selector) .highlight:not(p) Chọn các thẻ có class="highlight" và không phải là thẻ <p>

Tra cứu các CSS Pseudo-classes: W3Schools CSS Pseudo-classes.

Ví dụ:

  • :hover: Chọn một phần tử khi người dùng di chuột qua nó.

  • a:hover {
      color: red;
    }
    
  • :active: Chọn một phần tử vào thời điểm mà nó đang được kích hoạt (ví dụ: khi người dùng nhấp chuột vào một liên kết).

  • a:active {
      color: blue;
    }
    
  • :focus: Chọn một phần tử khi nó nhận được sự chú ý (focus), thường xảy ra khi người dùng nhấp chuột vào phần tử hoặc sử dụng phím Tab để chuyển đến phần tử đó.

  • input:focus {
      border-color: green;
    }
    
  • :nth-child(n): Chọn các phần tử dựa trên vị trí của chúng trong nhóm các anh chị em. n có thể là một số hoặc một từ khóa (odd, even).

  • li:nth-child(odd) {
      background-color: #f0f0f0;
    }
    
  • :nth-of-type(n): Chọn các phần tử dựa trên vị trí của chúng trong nhóm các phần tử có cùng kiểu (tag).

  • p:nth-of-type(2) {
      font-weight: bold;
    }
    
  • :first-child: Chọn phần tử đầu tiên trong nhóm các anh chị em.

  • p:first-child {
      font-size: 20px;
    }
    
  • :last-child: Chọn phần tử cuối cùng trong nhóm các anh chị em.

  • p:last-child {
      font-size: 20px;
    }
    
  • :first-of-type: Chọn phần tử đầu tiên trong nhóm các phần tử có cùng kiểu.

  • p:first-of-type {
      color: red;
    }
    
  • :last-of-type: Chọn phần tử cuối cùng trong nhóm các phần tử có cùng kiểu.

  • p:last-of-type {
      color: blue;
    }
    
  • :only-child: Chọn phần tử nếu nó là phần tử duy nhất trong nhóm các anh chị em.

  • p:only-child {
      color: green;
    }
    
  • :only-of-type: Chọn phần tử nếu nó là phần tử duy nhất của kiểu đó trong nhóm các anh chị em.

  • p:only-of-type {
      color: purple;
    }
    
  • :not(selector): Chọn các phần tử không khớp với selector đã cho.

  • p:not(.special) {
      color: gray;
    }
    
  • :checked: Chọn các phần tử đầu vào (input) được chọn hoặc được kiểm tra.

  • input:checked {
      background-color: yellow;
    }
    
  • :disabled: Chọn các phần tử đầu vào (input) bị vô hiệu hóa.

  • input:disabled {
      background-color: lightgray;
    }
    
  • :enabled: Chọn các phần tử đầu vào (input) được kích hoạt.

  • input:enabled {
      background-color: white;
    }
    
  • :empty: Chọn các phần tử không có con.

  • p:empty {
      display: none;
    }
    
  • :link: Chọn các liên kết (anchor) chưa được truy cập.

  • a:link {
      color: blue;
    }
    
  • :visited: Chọn các liên kết (anchor) đã được truy cập.

  • a:visited {
      color: purple;
    }
    
  • :target: Chọn phần tử mà đích (target) URL đang trỏ tới.

  • #section1:target {
      background-color: yellow;
    }

Nhận xét

Mới hơn Cũ hơn