Pseudo-classes and Pseudo-elements

Pseudo-classes and Pseudo-elements คือ class และ element พิเศษ มีวิธีเขียนได้ 2 รูปแบบ ดังนี้

selector: Pseudo-class { property: value }

or

selector: Pseudo-element { property: value }

selector.class: Pseudo-class { property: value }

or

selector.class: Pseudo-element { property: value }

Anchor Pseudo-classes เช่น

a:link { color: red }
a:hover {color:black; text-decoration:underline;}
a:active { color: blue; font-size: 125% }
a:visited { color: green; font-size: 85% }

a:link คือสถานะของลิ้งค์ a:hover คือ สถานะลิ้งค์เมื่อเอาเมาส์ไปแตะ a:active คือ สถานะเมื่อลิ้งค์หน้านั้นถูกเปิดอยู่ a:visited คือ สถานะลิ้งค์ที่ถูกเปิดและปิดไปแล้ว คุณสามารถกำหนด ให้มีรูปแบบต่างกันได้ ในกรณีนี้ เมื่อคุณ เขียน
<a href=”http://www.divland.com”> ลิ้งค์จะเป็นสีแดง เมื่อเอาเมาส์แตะ จะเป็นสีดำ มีเส้นใต้ หากเป็นการเปิดหน้าใหม่ คุณจะเห็นลิ้งค์ เป็นสีน้ำเงิน และเมื่อคุณปิดหน้านั้น ลิ้งค์ที่คุณได้กดไปแล้ว จะเป็นสีเขียว

First Line Pseudo-element
ในหน้าหนังสือพิมพ์ จะมีพาดหัวข่าวบรรทัดแรกตัวหนา ใหญ่ รูปแบบนั้น จะใช้ firstline

P:first-line {
font-variant: small-caps;
font-weight: bold }

First Letter Pseudo-element
ตามชื่อเลยครับ firstletter ก็คือการควบคุมตัวหนังสือตัวแรกนั่นเอง

P:first-letter { font-size: 300%; float: left }

ที่ใช้บ่อยๆ ก็คือการควบคุมลิ้งค์ ส่วน first line and first letter ก็ลองนำไปใช้กันดูครับ

Related Articles

• เริ่มต้นด้วย Selectors (0)
• Inheritance & comment (0)
• Grouping (0)
• Contextual selectors (4)
• Class,ID selectors (3)