Chúng ta có thể tạo kiểu cho các phần cụ thể của một phần tử như chữ cái đầu tiên, dòng đầu tiên hoặc thậm chí chèn vào trước / sau nó. Vì những mục đích này, Phần tử giả CSS được sử dụng.
LƯU Ý - Để tách lớp CSS Pseudo khỏi Pseudo Elements, trong CSS3, các phần tử giả sử dụng ký hiệu dấu hai chấm.
Cú pháp
Sau đây là cú pháp để sử dụng các phần tử CSS Pseudo trên một phần tử -
Selector::pseudo-element {
css-property: /*value*/;
} Sau đây là tất cả các Phần tử giả CSS có sẵn -
| Sr.No | Phần tử giả &Mô tả |
|---|---|
| 1 | sau Nó chèn một cái gì đó sau nội dung của mỗi phần tử được đề cập |
| 2 | trước Nó chèn một cái gì đó trước nội dung của mỗi phần tử được đề cập |
| 3 | chữ cái đầu tiên Nó chọn chữ cái đầu tiên của mỗi phần tử được đề cập |
| 4 | dòng đầu tiên Nó chọn dòng đầu tiên của mỗi phần tử được đề cập |
| 5 | trình giữ chỗ Nó chọn văn bản giữ chỗ trong các phần tử biểu mẫu |
| 6 | lựa chọn Nó chọn phần của một phần tử được chọn bởi người dùng |
Hãy xem một ví dụ về CSS Pseudo Elements -
Ví dụ
<!DOCTYPE html>
<html>
<head>
<style>
p::first-letter {
background-color: black;
}
p::first-line {
background-color: lightgreen;
color: white;
}
span {
font-size: 2em;
color: #DC3545;
}
</style>
</head>
<body>
<h2>Computer Networks</h2>
<p><span>A</span> system of interconnected computers and computerized peripherals such as printers is called computer network. </p>
</body>
</html> Đầu ra
Hãy xem một ví dụ khác về CSS Pseudo Elements -
Ví dụ
<!DOCTYPE html>
<html>
<head>
<style>
div:nth-of-type(1) p:nth-child(2)::after {
content: " LEGEND!";
background: orange;
padding: 5px;
}
div:nth-of-type(2) p:nth-child(2)::before {
content: "Book:";
background-color: lightblue;
font-weight: bold;
padding: 5px;
}
</style>
</head>
<body>
<div>
<p>Cricketer</p>
<p>Sachin Tendulkar:</p>
</div>
<hr>
<div>
<p><q>Chase your Dreams</q></p>
<p><q>Playing It My Way</q></p>
</div>
</body>
</html> Đầu ra
