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