CSS Pseudo class
21/05/2019
CSS Pseudo class - Giả class trong CSS thường được dùng để xác định trạng thái đặc biệt của 1 phần tử. Nó có thể là :
- Style phần tử khi hover chuột lên
- Style visited hoặc unsivited cho thẻ <a>
- Style phần tử khi nó được focus
- Style phần tử ở vị trí cụ thể.
Cú pháp
selector:pseudo-class {
property:value;
}
Pseudo class for link
Các liên kết có thể được hiển thị theo nhiều cách khác nhau.
/* unvisited link */
a:link {
color: #FF0000;
}
/* visited link */
a:visited {
color: #00FF00;
}
/* mouse over link */
a:hover {
color: #FF00FF;
}
/* selected link */
a:active {
color: #0000FF;
}
Chú ý: Xem lại bài học CSS Links để biết thêm chi tiết.
Hover pseudo class
Hover pseudo class dùng để chỉ trạng thái của phần tử HTML khi được di chuột vào. Ta có thể CSS cho phần tử :hover theo cú pháp sau:
div:hover{
color: red;
}
Hover vào tôi!
Một ví dụ khác khi hover vào thì show 1 phần tử con.
p {
display: none;
background-color: yellow;
padding: 20px;
}
div:hover p {
display: block;
}
<div>Hover vào dòng text này để show thẻ <p>
<p>Tada! I'm supper man.</p>
</div>
Tada! I'm supper man.
Child pseudo class
:first-child pseudo class
:first-child dùng để lấy vị trí phần tử đầu tiên trong list các phần tử.
div p:first-child {
color: blue;
}
<div>
<p>Đoạn text thứ 1.</p>
<p>Đoạn text thứ 2.</p>
<p>Đoạn text thứ 3.</p>
</div>
Kết quả hiển thị :
Đoạn text thứ 1
Đoạn text thứ 2
Đoạn text thứ 3
:last-child pseudo class
:last-child dùng để lấy vị trí phần tử cuối cùng trong list các phần tử.
div p:last-child {
color: blue;
}
<div>
<p>Đoạn text thứ 1.</p>
<p>Đoạn text thứ 2.</p>
<p>Đoạn text thứ 3.</p>
</div>
Kết quả hiển thị :
Đoạn text thứ 1
Đoạn text thứ 2
Đoạn text thứ 3
:nth-child(n) pseudo class
:nth-child(n) dùng để lấy vị trí phần tử thứ n trong list các phần tử.
div p:nth-child(2) {
color: blue;
}
<div>
<p>Đoạn text thứ 1.</p>
<p>Đoạn text thứ 2.</p>
<p>Đoạn text thứ 3.</p>
</div>
Kết quả hiển thị :
Đoạn text thứ 1
Đoạn text thứ 2
Đoạn text thứ 3
Chú ý: Vị trí n bắt đầu đếm từ 1.
Tất cả CSS Pseudo class
| Selector | Example | Example description |
|---|---|---|
| :active | a:active | Chọn link đang được active |
| :checked | input:checked | Chọn tất cả checked <input> |
| :disabled | input:disabled | Chọn tất cả disabled <input> |
| :empty | p:empty | Chọn tất cả thẻ <p> không có phần tử con |
| :enabled | input:enabled | Chọn tất cả enabled <input> |
| :first-child | p:first-child | Chọn thẻ <p> đầu tiên trong list phần tử của cha nó. |
| :first-of-type | p:first-of-type | Chọn thẻ <p> đầu tiên trong list phần tử của cha nó. |
| :focus | input:focus | Chọn thẻ <input> đang được focus |
| :hover | a:hover | Chọn thẻ link đang được di chuột lên (mouse over) |
| :in-range | input:in-range | Chọn các thẻ <input> có giá trị trong phạm vi được chỉ định |
| :invalid | input:invalid | Chọn tất cả thẻ <input> có giá trị không hợp lệ. |
| :lang(language) | p:lang(it) | Chọn mọi thẻ <p> với thuộc tính lang có giá trị bắt đầu là "it" |
| :last-child | p:last-child | Chọn thẻ <p> cuối cùng trong list phần tử của cha nó. |
| :last-of-type | p:last-of-type | Chọn thẻ <p> cuối cùng trong list phần tử của cha nó. |
| :link | a:link | Chọn tất cả thẻ link có trạng thái unvisited. |
| :not(selector) | :not(p) | Chọn tất cả thẻ, trừ thẻ <p> |
| :nth-child(n) | p:nth-child(2) | Chọn thẻ <p> có vị trí thứ 2 trong list phần tử của cha nó. |
| :nth-last-child(n) | p:nth-last-child(2) | Chọn thẻ <p> có vị trí thứ 2 trong list phần tử của cha nó, đếm từ vị trí cuối cùng. |
| :nth-last-of-type(n) | p:nth-last-of-type(2) | Chọn thẻ <p> có vị trí thứ 2 trong list phần tử của cha nó, đếm từ vị trí cuối cùng. |
| :nth-of-type(n) | p:nth-of-type(2) | Chọn thẻ <p> có vị trí thứ 2 trong list phần tử của cha nó, chỉ đếm những thẻ p. |
| :only-of-type | p:only-of-type | Chọn thẻ <p> duy nhất trong list phần tử của cha nó, có thể có các phần tử khác nhưng chỉ duy nhất thẻ <p> |
| :only-child | p:only-child | Chọn thẻ <p> duy nhất trong list phần tử của cha nó. |
| :optional | input:optional | Chọn thẻ <input> với không có thuộc tính "required" |
| :out-of-range | input:out-of-range | Chọn thẻ <input> với giá trị nằm ngoài range. |
| :read-only | input:read-only | Chọn thẻ <input> với thuộc tính "readonly" |
| :read-write | input:read-write | Chọn thẻ <input> mà không có thuộc tính "readonly" |
| :required | input:required | chọn thẻ <input> có thuộc tính "required" |
| :root | root | Chọn phần root của document |
| :target | #news:target | Chọn phần tử #news đang active (đã click chuột vào) |
| :valid | input:valid | Chọn tất cả thẻ <input> với giá trị hợp lệ |
| :visited | a:visited | Chọn tất cả visited links |
