Bài 40: Lựa chọn theo pseudo class trong CSS

Ngày đăng: 1/5/2023 8:45:33 AM

Pseudo-Class trong CSS

Pseudo-class là tên (như focus, disabled, hover ... ) được thêm vào selector css để cho biết mã CSS sẽ áp dụng vào phần tử khi phần tử ở trạng thái nào đó của phần tử HTML (đang focus nhập dữ liệu, bị vô hiệu, đang có chuột ở trên ...). Sử dụng Pseudo-class cho phép định kiểu hiện thị phần tử mà không cần phải dùng đến JavaScript.

Một pseudo-classe thêm vào selector bằng cách viết dấu hai chấm : sau đó là tên (từ khóa) trạng thái. Ví dụ, pseudo :hover là trạng thái phần tử khi có chuột ở trên, để chọn phần tử khi ở trạng thái này bạn viết selector:hover.

Một ví dụ cụ thể sau:

 <style>
     /* Phần tử p trong id=parent có màu chữ blue */
     #parent > p {
         color: blue;
     }
     /* Phần tử p trong id=parent, khi chuột phía trên có màu chữ green và gạch chân */
     #parent > p:hover {
         color: green;
         text-decoration: underline;
     }
 </style>
 
 <div id="parent">
     <p>Đoạn văn thứ nhất</p>
     <p>Đoạn văn thứ hai</p>
     <p>Đoạn văn thứ ba</p>
 </div>

Kết quả

Đoạn văn thứ nhất

Đoạn văn thứ hai

Đoạn văn thứ ba

Cách sử dụng tương tự cho danh sách các pseudo-class khác sau đây.

Danh sách các Pseudo-Class trong CSS

Pseudo-Class	Ví dụ	Diễn tả ví dụ
:active	a:active { ... }	Chọn khi phần tử active (giai đoạn thẻ a từ nhấn chuột đến trước nhả chuột)
:hover	a:hover { ... }	Chọn phần tử a mà chuột ở phía trên
:focus	input:focus { ... }	Chọn phần tử đang là focus (đang nhận nhập liệu từ người dùng).
:visited	a:visited { ... }	Chọn các thẻ a và đã từng truy cập (có trong lịch sử truy cập của trình duyệt).
:checked	input[type="checkbox"]:checked { ... }	Điều khiển Radio (<input type="radio">), CheckBox (<input type="checkbox">) như đã biết (xem thẻ HTML <input>) người dùng có thể chuyển trạng thái của nó (chọn/không chọn). Khi người dùng chọn thì nó ở trạng thái checked
:enabled	input[type="submit"]:enabled { color: green; }	Chọn các phần tử trạng thái enabled (có thể nhận tương tác của người dùng), chủ yếu áp dụng các phần tử control trong FORM
:disabled	textarea:disabled { ... }	Chọn khi phần tử bị vô hiệu. Các phần tử khi bị vô hiệu không tiếp nhận tương tác của người dùng thì nó ở trạng thái disabled, đặc biệt là các phần tử control như <input>, <textarea>, <button>, <select>
:empty	p:empty { ... }	chọn các phần tử <p> không chứa phần tử con nào, không có text
:link	a:link { ... }	Chọn phần tử có link truy cập được (thẻ a có thuộc tinh href, nếu không có href sẽ không được chọn)
:only-child	p:only-child { ... }	Chọn phần tử (ví dụ <p>) là phần tử con duy nhất của phần tử cha
:first-child	p:first-child { ... }	Chọn các phần tử (ví dụ <p>) là phần tử con đầu tiên trong phần tử cha của nó.
:first-of-type	p:first-of-type { ... }	Chọn phần tử (ví dụ <p>) mà nó là phần tử đầu tiên (trong danh sách các phần tử cùng loại, cùng cha - không cần phải là con đầu tiên của cha)
:last-child	p:last-child { ... }	Chọn phần tử (ví dụ <p>) là phần tử cuối cùng trong phần tử cha của nó
:last-of-type	p:last-of-type { ... }	Chọn phần tử <p> là phần tử cuối cùng trong phần tử cha
:not(selector)	:not(p) { ... }	Phủ định của selector, chọn các phần tử không xác định được bởi selector.
:nth-child(n)	p:nth-child(2) { ... }	`n = số nguyên cụ thể`: Chọn phần tử theo thứ tự của nó trong phần tử chứa. (Chọn ra mọi phần tử <p> là phần tử thứ 2 trong phần tử cha) `n = even` : Chọn các phần tử có thứ tự chẵn `n = odd` : Chọn các phần tử có thứ tự lẻ `n = an+b` : a, b là số nguyên (ví dụ `2n+1`), lúc này n sẽ chạy từ 0 (0, 1, 2 ...) và công thức `an + b` có giá trị bao nhiêu thì lấy ra phần tử có chỉ số thứ tự từng đó trong phần tử cha. Ví dụ, bạn muốn lấy ra các phần tử (1,4,7, ... cách nhau 3) thì viết `:nth-child(3n+1)`
:nth-last-child(n)	p:nth-last-child(2) { ... }	Chọn phần tử theo thứ tự các tập các phần tử cùng loại của nó trong phần tử chứa. Áp dụng đúng công thức n giống :nth-child(n)