Các Pseudo-Element trong CSS - Fedu

CHÀO MỪNG BẠN ĐẾN VỚI THƯ VIỆN HỌC TẬP & ĐÀO TẠO CƠ BẢN

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

Selector Ví dụ Mô tả ví dụ
::after p::after Chèn nội dung sau mỗi phần tử <p>
::before p::before Chèn nội dung trước mỗi phần tử <p>
::first-letter p::first-letter Chọn chữ cái đầu tiên của mỗi phần tử <p>
::first-line p::first-line Chọn dòng đầu tiên của mỗi phần tử <p>
::selection p::selection Chọn phần của một phần tử được chọn bởi người dùng

Các Pseudo Class trong CSS

Selector Ví dụ Mô tả ví dụ
:active a:active Chọn liên kết đang hoạt động
:checked input:checked Chọn mỗi phần tử <input> đã kiểm tra
:disabled input:disabled Chọn mỗi phần tử <input> bị vô hiệu
:empty p:empty Chọn mỗi phần tử <p> không có con
:enabled input:enabled Chọn mỗi phần tử <input> được bật
:first-child p:first-child Chọn tất cả các phần tử <p> đó là con đầu tiên của cha mẹ nó
:first-of-type p:first-of-type Chọn mỗi phần tử <p> là phần tử <p> đầu tiên của cha / mẹ
:focus input:focus Chọn phần tử <input> cần nhấn mạnh
:hover a:hover Chọn liên kết khi rê chuột qua
:in-range input:in-range Chọn phần tử <input> với một giá trị trong phạm vi được chỉ định
:invalid input:invalid Chọn tất cả các phần tử <input> có giá trị không hợp lệ
:lang(language) p:lang(it) Chọn mỗi phần tử <p> với một giá trị thuộc tính lang bắt đầu với “it”
:last-child p:last-child Chọn mỗi phần tử <p> là con cuối cùng của cha mẹ
:last-of-type p:last-of-type Chọn mỗi phần tử <p> là phần tử <p> cuối cùng của cha mẹ
:link a:link Chọn tất cả các liên kết chưa được click
:not(selector) :not(p) Chọn mọi phần tử không phải là một phần tử <p>
:nth-child(n) p:nth-child(2) Chọn mỗi phần tử <p> là con thứ hai của cha mẹ
:nth-last-child(n) p:nth-last-child(2) Chọn mỗi phần tử <p> là con thứ hai của cha / mẹ nó, kể từ con cuối cùng
:nth-last-of-type(n) p:nth-last-of-type(2) Chọn mỗi phần tử <p> là phần tử <p> thứ hai của cha / mẹ nó, tính từ con cuối cùng
:nth-of-type(n) p:nth-of-type(2) Chọn mỗi phần tử <p> là phần tử <p> thứ hai của cha / mẹ
:only-of-type p:only-of-type Chọn mỗi phần tử <p> là yếu tố <p> duy nhất của cha mẹ nó
:only-child p:only-child Chọn mỗi phần tử <p> là con duy nhất của cha / mẹ của nó
:optional input:optional Chọn các phần tử <input> không có thuộc tính “required”
:out-of-range input:out-of-range Chọn các phần tử <input> với một giá trị bên ngoài phạm vi được chỉ định
:read-only input:read-only Chọn các phần tử <input> với thuộc tính “readonly” được chỉ định
:read-write input:read-write Chọn các phần tử <input> mà không có thuộc tính “readonly”
:required input:required Chọn phần tử <input> với thuộc tính “required” được chỉ định
:root root Chọn phần tử gốc của tài liệu
:target #news:target Chọn phần tử #news đang hoạt động hiện tại (nhấp vào URL có chứa tên anchor đó)
:valid input:valid Chọn tất cả các phần tử <input> với giá trị hợp lệ
:visited a:visited Chọn tất cả liên kết đã truy cập