Các Pseudo-Element trong CSS

Các Pseudo-Element là gì?

Pseudo-element trong CSS được dùng để định dạng một phần đặc biệt của phần tử. Ví dụ chúng được sử dụng để:

• Định dạng chữ hoặc dòng đầu tiên của phần tử
• Chèn nội dung vào trước hoặc sau nội dung của phần tử

Cú pháp

Cú pháp của các pseudo-element:

selector::pseudo-element {
    property:value;
}

Chú ý dấu hai chấm kép – ::first-line và :first-line. Dấu hai chấm kép thay thế cho dấu hai chám đơn cho các pseudo-element trong CSS3. Đây là một cải tiến của W3C để phân biệt giữa pseudo-classes và pseudo-elements.

Cú pháp dấu hai chấm đơn được sử dụng cho cả pseudo-classes và pseudo-elements trong CSS2, CSS1. Đối với tính tương thích ngược, cú pháp dấu hai chấm đơn chấp nhận được cho các pseudo-element trong CSS1 và CSS2.

Pseudo-element ::first-line

Pseudo-element ::first-line được sử dụng để thêm định dạng đặc biệt cho dòng đầu tiên của văn bản. Ví dụ dưới đây định dạng dòng đầu tiên của văn bản trong tất cả phần tử <p>:

p::first-line {
    color: #ff0000;
    font-variant: small-caps;
}

Lưu ý: pseudo-element ::first-line có thể được chấp nhận cho phần tử block-level. Thuộc tính dưới đây được chấp nhận cho pseudo-element ::first-line:

• các thuộc tính font
• các thuộc tính color
• các thuộc tính background
• word-spacing
• letter-spacing
• text-decoration
• vertical-align
• text-transform
• line-height
• clear

Pseudo-element ::first-letter

Pseudo-element ::first-letter được sử dụng để thêm một định dạng đặc biệt vào chữ đầu tiên của văn bản. Ví dụ dưới đây định dạng chữ đầu tiên của văn bản trong tất cả phần tử <p>:

p::first-letter {
    color: #ff0000;
    font-size: xx-large;
}

Lưu ý: pseudo-element ::first-letter có thể được chấp nhận cho phần tử block-level. Thuộc tính dưới đây được chấp nhận cho pseudo- element ::first-letter:

• các thuộc tính font
• các thuộc tính color
• các thuộc tính background
• margin properties
• padding properties
• border properties
• text-decoration
• vertical-align (only if “float” is “none”)
• text-transform
• line-height
• float
• clear

Pseudo-elements và CSS Classes

Các Pseudo-element có thể kết hợp với các CSS class:

p.intro::first-letter {
    color: #ff0000;
    font-size:200%;
}

Ví dụ trên sẽ hiển thị chữ đầu tiên của đoạn văn với class=”intro”, chữ màu đỏ và có kích cỡ lớn.

Nhiều Pseudo-element

Mộ số pseudo-element có thể được kết hợp với nhau. Trong ví dụ bên dưới, chữ đầu tiên của đoạn văn sẽ có màu đỏ, cỡ chữ là xx-large. Phần còn lại của dòng đầu tiên có màu xanh, chữ in hoa thường. Phần còn lại của đoạn văn sẽ có cỡ chữ và màu chữ mặc định.

p::first-letter {
    color: #ff0000;
    font-size: xx-large;
}

p::first-line {
    color: #0000ff;
    font-variant: small-caps;
}

Pseudo-element ::before trong CSS

Pseudo-element ::before có thể được sử dụng để thêm vài nội dụng vào trước nội dng của phần tử. Ví dụ dưới đây thêm một ảnh vào trước nội dụng vào mỗi phần tử <h1>:

h1::before {
    content: url(smiley.gif);
}

Pseudo-element ::after trong CSS

Pseudo-element ::after có thể được sử dụng để thêm vài nội dung sau nội dung của phần tử. Ví dụ dưới đây thêm một ảnh sau nội dung mỗi phần tử <h1>:

h1::after {
    content: url(smiley.gif);
}

Pseudo-element ::selection trong CSS

Pseudo-element ::selection phù hợp với phần của một phần tử được chọn bởi một người dùng.

Thuộc tính CSS sau đây có thể được chấp nhận đó là ::selection: color, background, cursor, và outline. Ví dụ dưới đây làm cho văn bản được chọn màu đỏ trên nền màu vàng:

::selection {
    color: red; 
    background: yellow;
}

Các phần tử Pseudo trong CSS

Các Pseudo Class trong CSS