คลาสหลอก
คลาสหลอกแสดงสถานะของตัวเลือก เช่น :hover, :active, :last-child เป็นต้น สิ่งเหล่านี้เริ่มต้นด้วยเครื่องหมายทวิภาค (:)
ไวยากรณ์ของคลาสหลอก CSS มีดังต่อไปนี้ -
:pseudo-class{
attribute: /*value*/
} องค์ประกอบหลอก
ในทำนองเดียวกัน องค์ประกอบเทียมจะใช้เพื่อเลือกองค์ประกอบเสมือน เช่น ::after, ::before, ::first-line เป็นต้น
สิ่งเหล่านี้เริ่มต้นด้วยเครื่องหมายทวิภาคคู่ (::)
ไวยากรณ์ขององค์ประกอบหลอก CSS มีดังต่อไปนี้ -
::pseudo-element{
attribute: /*value*/
} ตัวอย่าง
ตัวอย่างต่อไปนี้แสดงคุณสมบัติของ CSS pseudo-class และ pseudo-element
<!DOCTYPE html>
<html>
<head>
<style>
a:hover{
padding: 3%;
font-size:1.4em;
color: tomato;
background: bisque;
}
</style>
</head>
<body>
<p>You're somebody else</p>
<a href=#>Dummy link 1</a>
<a href=#>Dummy link 2</a>
</body>
</html> ผลลัพธ์
สิ่งนี้จะให้ผลลัพธ์ดังต่อไปนี้ -
ตัวอย่าง
<!DOCTYPE html>
<html>
<head>
<style>
p::after {
content: " BOOM!";
background: hotpink;
}
p:last-child {
font-size: 1.4em;
color: red;
}
</style>
</head>
<body>
<p>Anymore Snare?</p>
<p>Donec in semper diam. Morbi sollicitudin sed eros nec elementum. Praesent eget nisl vitaeneque consectetur tincidunt. Ut molestie vulputate sem, nec convallis odio molestie nec.</p>
<p>Hit</p>
<p>Pop</p>
</body>
</html> ผลลัพธ์
สิ่งนี้จะให้ผลลัพธ์ดังต่อไปนี้ -
