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 URL có hash 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;
}