CSS Pseudo class

21/05/2019

Bài sau » « Bài trước

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>

Hover vào dòng text này để show thẻ <p>

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

SelectorExampleExample description
:activea:activeChọn link đang được active
:checkedinput:checkedChọn tất cả checked <input>
:disabledinput:disabledChọn tất cả disabled <input>
:emptyp:emptyChọn tất cả thẻ <p> không có phần tử con
:enabledinput:enabledChọn tất cả enabled <input>
:first-childp:first-childChọn thẻ <p> đầu tiên trong list phần tử của cha nó.
:first-of-typep:first-of-typeChọn thẻ <p> đầu tiên trong list phần tử của cha nó.
:focusinput:focusChọn thẻ <input> đang được focus
:hovera:hoverChọn thẻ link đang được di chuột lên (mouse over)
:in-rangeinput:in-rangeChọn các thẻ <input> có giá trị trong phạm vi được chỉ định
:invalidinput:invalidChọ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-childp:last-childChọn thẻ <p> cuối cùng trong list phần tử của cha nó.
:last-of-typep:last-of-typeChọn thẻ <p> cuối cùng trong list phần tử của cha nó.
:linka:linkChọ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-typep:only-of-typeChọ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-childp:only-childChọn thẻ <p> duy nhất trong list phần tử của cha nó.
:optionalinput:optionalChọn thẻ <input> với không có thuộc tính "required"
:out-of-rangeinput:out-of-rangeChọn thẻ <input> với giá trị nằm ngoài range.
:read-onlyinput:read-onlyChọn thẻ <input> với thuộc tính "readonly" 
:read-writeinput:read-writeChọn thẻ <input> mà không có thuộc tính "readonly"
:requiredinput:requiredchọn thẻ <input> có thuộc tính "required"
:rootrootChọn phần root của document
:target#news:targetChọn phần tử #news đang active (đã click chuột vào)
:validinput:validChọn tất cả thẻ <input> với giá trị hợp lệ
:visiteda:visitedChọn tất cả visited links
Bài sau » « Bài trước
Back to top