1. Lớp giả là gì?
Lớp giả được sử dụng để xác định trạng thái đặc biệt của một phần tử
Ví dụ, nó có thể được sử dụng để:
- Tạo kiểu cho một phần tử khi người dùng di chuột qua nó
- Phong cách các liên kết được truy cập và không được truy cập khác nhau
- Tạo kiểu cho một phần tử khi nó được lấy nét
Cú pháp:
selector:pseudo-class {
property: value;
}
Các loại lớp giả cơ bản:
:active – Chọn liên kết hoạt động
:checked – Chọn mọi phần tử <input> đã kiểm tra
:disabled – Chọn mọi phần tử <inout> đã bị vô hiệu hóa
:empty – Chọn một phần tử <p> không có nội dung
:enabled – Chọn mọi phần tử <input> đã bật
:first-child – Chọn mọi phần tử <p> là phần tử con đầu tiên của phần tử mẹ của nó
:first-of-type – Chọn mọi phần tử <p> là phần tử <p> đầu tiên của phần tử chính của nó
:focus – Chọn phần tử <input> có tiêu điểm
:hover – Chọn các liên kết khi di chuột qua
:in-range – Chọn các phần tử <input> có giá trị trong một phạm vi được chỉ định
:invalid – Chọn tất cả các phần tử <input> có giá trị không hợp lệ
:lang(language) – Chọn mọi phần tử <p> có giá trị thuộc tính lang bắt đầu bằng “it”
:last-child – Chọn mọi phần tử <p> là phần tử con cuối cùng của phần tử gốc của nó
:last-of-type – Chọn mọi phần tử <p> là phần tử <p> cuối cùng của phần tử chính của nó
:link – Chọn tất cả các liên kết không được truy cập
:not(selector) – Chọn mọi phần tử không phải là phần tử <p>
:nth-child(n) – Chọn mọi phần tử <p> là phần tử con thứ hai của phần tử mẹ của nó
:nth-last-child(n) – Chọn mọi phần tử <p> là phần tử con thứ hai của phần tử mẹ của nó, tính từ phần tử cuối cùng
:nth-last-of-type(n) – Chọn mọi phần tử <p> là phần tử <p> thứ hai của phần tử mẹ của nó, tính từ phần tử con cuối cùng
:nth-of-type(n) – Chọn mọi phần tử <p> là phần tử <p> thứ hai của phần tử chính của nó
:only-of-type – Chọn mọi phần tử <p> là phần tử <p> duy nhất của chính nó
:only-child – Chọn mọi phần tử <p> là phần tử con duy nhất của phần tử mẹ của nó
:optional – Chọn các phần tử <input> không có thuộc tính “required”
:out-of-range – Chọn các phần tử <input> có giá trị bên ngoài một phạm vi được chỉ định
:read-only – Chọn các phần tử <input> có chỉ định thuộc tính “readonly”
:read-write – Chọn các phần tử <input> không có thuộc tính “readonly”
:required – Chọn các phần tử <input> có chỉ định thuộc tính “required”
:root – Chọn phần tử gốc của tài liệu
:target – Chọn phần tử đang hoạt động hiện tại (được nhấp vào URL chứa tên liên kết đó)
:valid – Chọn tất cả các phần tử <input> có giá trị hợp lệ
:visited – Chọn tất cả các liên kết đã truy cập
1.1 Tạo kiểu cho liên kết
Các liên kết có thể được hiển thị theo nhiều cách khác nhau
Ví dụ:
Lưu ý: a:hover PHẢI đứng sau a:link và a:visited trong định nghĩa CSS để có hiệu quả! a:active PHẢI đứng sau a:hover trong CSS để có hiệu quả! Tên lớp giả không phân biệt chữ hoa chữ thường
1.2 Lớp giả và lớp HTML
Các lớp giả có thể được kết hợp với các lớp HTML
Ví dụ:
Bạn cũng có thể di chuột qua một phần tử <div> để hiển thị phần tử <p>
Ví dụ:
2. Phần tử giả là gì ?
Phần tử giả trong CSS được sử dụng để tạo kiểu cho các phần cụ thể của phần tử
Ví dụ, nó có thể được sử dụng để:
- Định kiểu chữ cái đầu tiên hoặc dòng, của một phần tử
- Chèn nội dung trước hoặc sau nội dung của một phần tử
Cú pháp:
selector::pseudo-element {
property: value;
}
Các phần tử giả cơ bản:
::after
::before
::first-letter
::fist-line
::marker
::selection
2.1 Phần tử giả ::after
Phần tử giả ::after có thể được sử dụng để chèn một số nội dung vào sau nội dung của một phần tử
Ví dụ:
Ở đây, tôi chèn một hình ảnh sau nội dung của mỗi phần tử <h1>
2.2 Phần tử giả ::before
Phần tử giả ::before có thể được sử dụng để chèn một số nội dung vào trước nội dung của một phần tử
Ví dụ:
Ở đây, tôi chèn một hình ảnh trước nội dung của mỗi phần tử <h1>
2.3 Phần tử giả ::first-letter
Phần tử giả ::first-letter được sử dụng để thêm một kiểu đặc biệt vào chữ cái đầu tiên của văn bản
Ví dụ:
Ở đây, tôi dạng chữ cái đầu tiên của văn bản trong tất cả các phần tử <p>
Lưu ý: Phần tử giả ::first-letter chỉ có thể được áp dụng cho các phần tử cấp khối
Các thuộc tính sau áp dụng cho phần tử giả ::first-letter pseudo- element:
- font properties
- color properties
- background properties
- margin properties
- padding properties
- border properties
- text-decoration
- vertical-align (chỉ khi giá trị của “float” là “none”)
- text-transform
- line-height
- float
- clear
2.4 Phần tử giả ::marker
Phần tử giả ::marker chọn các điểm đánh dấu của các mục danh sách
Ví dụ:
Ở đây, tôi tạo kiểu cho các điểm đánh dấu của các mục danh sách
2.5 Phần tử giả ::selection
Phần tử giả ::selection khớp với phần của phần tử được người dùng chọn
Các thuộc tính CSS sau đây có thể được áp dụng cho ::selection: color, background, cursor, và outline
Ví dụ:
Ở đây, tôi làm cho văn bản đã chọn có màu đỏ trên nền vàng
2.6 Phần tử giả và các lớp HTML
Phần tử giả có thể được kết hợp với các lớp HTML
Ví dụ:
Ở đây, tôi khiến cho đoạn văn có class = “intro” sẽ hiển thị chữ cái đầu tiên là màu đỏ và có kích thước lớn hơn
Một số phần tử giả cũng có thể được kết hợp
Ví dụ:
Ở đây, chữ cái đầu tiên của đoạn văn sẽ có màu đỏ, với kích thước phông chữ lớn xx. Phần còn lại của dòng đầu tiên sẽ có màu xanh lam và có chữ hoa nhỏ. Phần còn lại của đoạn văn sẽ có kích thước và màu phông chữ mặc định
