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;
}
Nhận xét