คู่มือท่องเที่ยว สำหรับคนรักการท่องเที่ยว

Chapter 26

Pseudo-element

เป็น selector กลุ่มที่น่าสนใจที่จัดรูปแบบการแสดงผลโดยขึ้นกับสถานะ หรือเงื่อนไข เช่น เฉพาะอักษรตัวแรกใน <p> เท่านั้นที่เป็นตัวอักษรสีแดงตัวใหญ่ เป็นต้น

selector:pseudo-element {property: value}

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

Pseudo-element Purpose
:first-letter กำหนด style ให้ตัวอักษรตัวแรกของข้อความ
:first-line กำหนด style ให้กับข้อความบรรทัดแรก
:before Inserts some content before the content of an element
:after Inserts some content after the content of an element



The :first-letter Pseudo-element

การกำหนดรูปแบบให้กับตัวอักษรตัวแรกของ element

Example
<html>
<head>
<style type="text/css">
p:first-letter {color:#ff0000;font-size:xx-large}
</style>
</head>
<body>
<p>Enjoyday.net</p>
</body>
</html>
Output

Enjoyday.net


หรือ จะเขียน Pseudo-element กับ CSS Classes ก็ได้
ถ้าต้องการระบุให้เฉพาะบาง paragraph เท่านั้นที่แสดงผล เขียนได้ดังนี้
p.article:first-letter {color:#ff0000}

<p class="article">Enjoyday.net</p>
<p>Enjoyday.net</p>
Output

Enjoyday.net

Enjoyday.net





The :first-line Pseudo-element

การกำหนดรูปแบบให้กับตัวอักษรบรรทัดแรกของ element

Example
<html>
<head>
<style type="text/css">
p:first-line {color:#0000ff}</style>
</head>

<body>
<p>Heath<br>รับประทานอาหารที่มีประโยชน์ หมั่นออกกำลังกาย และพักผ่อนให้เพียงพอ</p>
</body>
</html>
Output

Health
รับประทานอาหารที่มีประโยชน์ หมั่นออกกำลังกาย และพักผ่อนให้เพียงพอ




Multiple Pseudo-elements

เราสามารถนำทั้ง 2 แบบมาเขียนผสมกันได้

Example
<html>
<head>
<style type="text/css">
p:first-letter {color:#ff0000;font-size:xx-large}
p:first-line {color:#0000ff}</style>
</head>

<body>
<p>Heath<br>รับประทานอาหารที่มีประโยชน์ หมั่นออกกำลังกาย และพักผ่อนให้เพียงพอ</p>
</body>
</html>
Output

Health
รับประทานอาหารที่มีประโยชน์ หมั่นออกกำลังกาย และพักผ่อนให้เพียงพอ




CSS2 - The :before Pseudo-element

สามารถกำหนดเพิ่ม content บางอย่าง ก่อนแสดง content ของ element นั้นๆ *ใช้ไม่ได้กับ web browser IE

Example
<html>
<head>
<style type="text/css">
h1:before
{
content: url(../images/star_icons.gif)
}
</style>

</head>
<body>
<h1>This is a header</h1>
</body>
</html>
Output

This is a header




CSS2 - The :after Pseudo-element

สามารถกำหนดเพิ่ม content บางอย่าง หลังจากแสดง content ของ element นั้นๆ *ใช้ไม่ได้กับ web browser IE

Example
<html>
<head>
<style type="text/css">
h1:after
{
content: url(../images/star_icons.gif)
}
</style>
</head>

<body>
<h1>This is a header</h1>
</body>
</html>
Output

This is a header


« Chapter 25